[CSS]定位

简介: [CSS]定位

前言

  • 系列文章目录:
  • 根据视频和PPT整理
  • 视频及对应资料:
  • HTML CSS

1. 定位

1.1 使用定位的场景

  1. 某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子.
  2. 当我们滚动窗口的时候,盒子是固定屏幕某个位置的。

1.2 定位与浮动

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

1.3 定位的组成

定位:将盒子固定在某一个位置。所以定位也是在摆放盒子, 用于盒子的布局。

定位由定位模式和边偏移组成,定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置。

1.3.1 定位模式

定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:

1.3.2 边偏移

边偏移就是定位的盒子移动到的最终位置。有 top、bottom、left 和 right 4 个属性。

2. 静态定位 static

静态定位是元素的默认定位方式,即无定位。

静态定位按照标准流特性摆放位置,它没有边偏移,静态定位在布局时很少用到。

2.1 语法

选择器 { position: static; }

3. 相对定位 relative

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。

3.1 语法

选择器 { position: relative; }

3.2 相对定位的特点

  1. 相对定位是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
  2. 相对定位的元素原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。即相对定位的元素不会脱标,继续保留原来的位置。

由于相对定位不会脱标,所以相对定位的元素通常作为绝对定位的父元素。

3.3 示例

<style>
  .one {
    /* 相对定位 */
    position: relative;
    /* 相对与原来的位置向下移动50px向右移动50px */
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: brown;
  }
  .two {
    width: 100px;
    height: 100px;
    background-color: coral;
  }
</style>
<body>
  <div class="one">1</div>
  <div class="two">2</div>
</body>

4. 绝对定位 absolute

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。

4.1 语法

选择器 { position: absolute; }

4.2 绝对定位的特点

  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document 文档)。
  2. 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
  3. 绝对定位不再占有原先的位置。(脱标)

4.3 示例

4.3.1 没有祖先元素或者祖先元素没有定位

<style>
  .one {
    width: 100px;
    height: 100px;
    background-color: rgb(206, 60, 60);
  }
  .two {
    /* 绝对定位 */
    position: absolute;
    /* 边偏移 */
    /* 相对与浏览器向下30px向右30px */
    top: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background-color: coral;
  }
  .three {
    width: 150px;
    height: 150px;
    background-color: rgb(40, 167, 12);
  }
  .four {
    /* 绝对定位 */
    position: absolute;
    /* 边偏移 */
    /* 相对与浏览器向下80px向右80px */
    top: 80px;
    left: 80px;
    width: 50px;
    height: 50px;
    background-color: rgb(89, 80, 255);
  }
</style>
<body>
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">
    <div class="four">4</div>
  </div>
</body>

4.3.2 祖先元素有定位

<style>
  .one {
    width: 250px;
    height: 250px;
    background-color: rgb(206, 60, 60);
  }
  .two {
    /* 父元素添加相对定位 */
    position: relative;
    /* 相对于原来的位置偏移 */
    top: 50px;
    left: 50px;
    width: 150px;
    height: 150px;
    background-color: coral;
  }
  .three {
    /* 绝对定位 */
    position: absolute;
    /* 由于父元素有定位 */
    /* 边偏移以父元素为基准 */
    top: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background-color: rgb(40, 167, 12);
  }
</style>
<body>
  <div class="one">
    <div class="two">
      <div class="three"></div>
    </div>
  </div>
</body>

4.3.3 绝对定位元素脱标

<style>
    .one {
      /* 绝对定位 */
      position: absolute;
      /* 边偏移 */
      top: 100px;
      left: 50px;
      width: 150px;
      height: 150px;
      background-color: rgb(206, 60, 60);
    }
    .two {
      width: 50px;
      height: 50px;
      background-color: coral;
    }
  </style>
  <body>
    <div class="one"></div>
    <div class="two"></div>
  </body>

5. 子绝父相

子级是绝对定位,父级要用相对定位

① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。

因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位。

6. 固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。

主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

6.1 语法

选择器 { position: fixed; }

6.2 固定定位的特点

  1. 以浏览器的可视窗口为参照点移动元素。
  • 跟父元素没有任何关系
  • 不随滚动条滚动。
  1. 固定定位不在占有原先的位置。
  • 固定定位也是脱标的。

6.3 示例

<style>
    .img {
      position: fixed;
      top: 50%;
      left: 10px;
    }
    .other {
      width: 100px;
      height: 1000px;
      background-color: cadetblue;
    }
  </style>
  <body>
    <div class="img">
      <img src="./img/pvp.png" />
    </div>
    <div class="other">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum, quae cupiditate fugit dicta nemo quidem minima, corrupti natus aliquam magni pariatur eos a eaque. Mollitia laboriosam eaque voluptatibus beatae necessitatibus?</div>
  </body>

6.4 固定到版心右侧

  1. 让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。
  2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
<style>
  .one {
    /* 固定定位 */
    position: fixed;
    /* 移动到可视区域中间 */
    left: 50%;
    /* 移动版心的一半距离 */
    margin-left: 405px;
    width: 50px;
    height: 100px;
    background-color: aquamarine;
  }
  .banner {
    margin: 0 auto;
    width: 800px;
    height: 800px;
    background-color: burlywood;
  }
</style>
<body>
  <div class="one"></div>
  <div class="banner"></div>
</body>

7. 粘性定位 sticky

7.1 语法

选择器 { position: sticky; top: 10px; }
  • 被设置为粘性定位的元素,页面发生滚动,当与浏览器的可视区域的上边界距离为10px时,该元素就会被固定,不会再向上滚动。

7.2 粘性定位的特点

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必须添加 top 、left、right、bottom 其中一个才有效

粘性定位一般跟页面滚动搭配使用。

7.3 示例

<style>
  .banner {
    /* 粘性定位 */
    position: sticky;
    /* 当与可视区域距离为10px时就黏住,不在向上滚动 */
    top: 10px;
    margin: 0 auto;
    width: 100px;
    height: 50px;
    background-color: burlywood;
  }
  .other {
    width: 10px;
    height: 1000px;
  }
</style>
<body>
  <div class="other"></div>
  <div class="banner"></div>
  <div class="other"></div>
</body>

8. 定位的叠放顺序 z-index

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)

语法:

选择器 { z-index: 1; }
  • 数值可以是正整数、负整数或 0, 默认是 auto,数值越大,盒子越靠上
  • 如果属性值相同,则按照书写顺序,后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有 z-index 属性
<style>
  div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .one {
    background-color: aquamarine;
    z-index: 1;
  }
  .two {
    background-color: brown;
    top: 25px;
    left: 25px;
    z-index: 2;
  }
  .three {
    background-color: coral;
    top: 50px;
    left: 50px;
  }
</style>
<body>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</body>

9. 绝对定位居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。

left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。

margin-left: -100px;:让盒子向左移动自身宽度的一半。

<style>
  .one {
    /* 子绝父相 */
    position: relative;
    width: 200px;
    height: 200px;
    background-color: aquamarine;
  }
  .two {
    /* 绝对定位 */
    position: absolute;
    /* 向右移动父元素一半的宽度的距离 */
    left: 50%;
    /* 向左移动自身宽度的一半 */
    margin-left: -10px;
    width: 20px;
    height: 20px;
    background-color: blue;
  }
</style>
<body>
  <div class="one">
    <div class="two"></div>
  </div>
</body>

10. 定位的特殊特性

  1. 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
  2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
<style>
    .one {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: aquamarine;
    }
    .two {
      position: absolute;
      top: 65px;
      background-color: blue;
    }
  </style>
  <body>
    <span class="one"></span>
    <div class="two">123123123</div>
  </body>

  1. 脱标的盒子不会触发外边距塌陷,浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题。
  2. 浮动元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字或图片;但是绝对定位、固定定位会压住下面标准流所有的内容。浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。
<style>
    .two {
      position: relative;
      width: 400px;
      height: 200px;
      background-color: blue;
    }
    img {
      float: left;
    }
    .img_two {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <body>
    <div class="two">123123123 Lorem ipsum dolor sit amet 
      <img src="./img/pvp.png" alt="">
      consectetur adipisicing elit. Cum consectetur accusamus modi at placeat mollitia tenetur repudiandae amet eaque veniam, dolorem excepturi maiores aut culpa libero ipsam? Impedit, ullam odio!
    </div>
    <br>
    <div class="two">123123123 Lorem ipsum dolor sit amet 
      <img src="./img/pvp.png" alt="" class="img_two">
      consectetur adipisicing elit. Cum consectetur accusamus modi at placeat mollitia tenetur repudiandae amet eaque veniam, dolorem excepturi maiores aut culpa libero ipsam? Impedit, ullam odio!
    </div>
  </body>

相关文章
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
28 0
|
3月前
|
前端开发
|
4月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
35 5
|
4月前
|
前端开发 容器
css中使用定位实现吸顶效果
css中使用定位实现吸顶效果
105 2
|
4月前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
4月前
|
前端开发 容器
解锁CSS定位奥秘,从迷茫到精通,让你的网页布局“稳如老狗”,引领前端新潮流!
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石:相对定位、绝对定位与固定定位。通过具体示例,展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置;绝对定位使元素完全脱离文档流,适用于精确控制位置的需求;固定定位则确保元素始终固定于浏览器窗口特定位置,不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
73 0
|
4月前
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
190 0
|
5月前
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
177 3
|
6月前
|
前端开发 开发者
CSS属性选择器:精确定位元素的利器
CSS属性选择器:精确定位元素的利器
|
6月前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)