CSS 定位、层叠顺序、层叠上下文

TIP

CSS 中 position 属性用于指定一个元素在文档中的定位方式，元素的定位方式有 5 种类型。

如下表

定位类型值

属性值	描述
static	没有定位，元素出现在正常的流中（默认值，可以忽略）
relative	相对定位，相对于自身正常位置进行位置的调整
absolute	绝对定位，相对于其最近的定位的父元素定位，进行位置调整
fixed	固定定位相对于浏览器窗口进行位置调整
sticky	粘性定位是基于用户的滚动位置来定位

注：

static 相当于元素没有加定位效果，如果元素加了定位，后面需要去掉，可以添加 position: static;

一、相对定位¶

TIP

盒子可以相对自己原来的位置进行位置调整，称之为相对定位

给需要添加相对定位的元素，加上position: relative; 元素的位置通过（位置描述词）："left", "top", "right" ,"bottom"属性进行调整位置属性值可以是正数，也可以是负数 ![[Pasted image 20260228120635.png]]

定位的位置属性

定位的位置属性	描述
top	向下移动
bottom	向上移动
left	向右移动
right	向左移动
值可以为负数	即往规定方向相反移动

1、相对定位的特点¶

TIP

相对定位：相对于 自己本身正常位置(即：未使用定位前的位置) 进行定位
元素的初始位置占据的空间会被保留
相对定位元素不会对其他元素产生任何影响
自身的层级会提升半层

案例演示：值为正值

<style type="text/css">
.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
}
.box2 {
    background-color: pink;
}
.box2 {
    /* 相对定位 */
    position: relative;
    /* 左偏移 20px */
    left: 20px;
    /* 上偏移 20px */
    top: 20px;
}
</style>
<body>
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</body>

未设置相对定位前效果	设置相对定位后效果
![[Pasted image 20260228120858.png]]	![[Pasted image 20260228120904.png]]

案例演示：值为负数

当把上面案例中的 .box2中的 left 和 top 值改为负数时，其效果如下

.box2 {
    /* 左偏移 -20px */
    left: 20px;
    /* 上偏移 -20px */
    top: 20px;
}

![[Pasted image 20260228120734.png]] 总结：相对定位特性

相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，即：元素的初始位置占据的空间会被保留
只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面其他元素产生任何影响

二、相对定位应用场景¶

TIP

用来微调元素自身的位置（案例 1，2）
可以当做绝对定位的参考盒子（绝对定位中会讲到）
用来提升自身的层级（综合实践 - 弹性滑动导航）

1、悬停卡片效果¶

TIP

鼠标滑动到元素，元素少量位置偏移动画 ![[Pasted image 20260228120944.png]]

<style>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 480px;
    margin: 150px auto;
  }
  ul li {
    width: 100px;
    height: 120px;
    background-color: pink;
    margin: 0px 10px;
    float: left;
  }
  /* 
        鼠标滑动到li上，li设置为相对定位
        然后相对自身向上偏移10px
        向右偏移2px 
    */
  ul li:hover {
    position: relative;
    top: -10px;
    left: 2px;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>

2、水平步骤条¶

TIP

右浮动实现元素从右往左开始排列成一行，第一个排在最后面，最后一个排在最左边通过相对定位微调线条位置，使其与圆形在垂直方向对齐利用 ~ 后续兄弟选择器，来选择他后面的元素，修改样式 ![[Pasted image 20260228121054.png]]

<style>
  .order-progress {
    text-align: center;
  }
  ul {
    /* border: 1px solid red; */
    font-size: 0;
    list-style: none;
    display: inline-block;
  }
  ul li {
    /* 右浮动实现元素从右往左开始排列 */
    float: right;
  }
  ul li:nth-child(even) {
    width: 150px;
    border-top: 2px dashed #ddd;
    /* 通过相对定位来微调线条位置，实现线条与圆垂直居中对齐 */
    position: relative;
    top: 24px;
  }
  ul li:nth-child(odd) {
    background-color: #ddd;
    width: 50px;
    height: 50px;
    font-size: 16px;
    margin: 0px 5px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
  }
  /* 当前进度 */
  ul li.current {
    background-color: skyblue;
    color: #fff;
  }
  /* 当前进度前面的元素偶数项样式 */
  ul li.current ~ li:nth-child(odd) {
    background-color: skyblue;
    color: #fff;
  }
  /* 当前进度前面的元素奇数项样式 */
  ul li.current ~ li:nth-child(even) {
    border-color: skyblue;
  }
</style>
<body>
  <div class="order-progress">
    <ul>
      <li>5</li>
      <li></li>
      <li>4</li>
      <li></li>
      <li class="current">3</li>
      <li></li>
      <li>2</li>
      <li></li>
      <li>1</li>
    </ul>
  </div>
</body>

三、绝对定位¶

TIP

绝对定位的元素，是相对离自己最近的定位祖先元素进行位置调整

给需要添加绝对定位的元素，加上 position: absolute;
元素的位置通过（位置描述词）："left", "top", "right", "bottom"属性进行调整位置
属性值可以是正数，也可以是负数

定位的位置属性

定位的位置属性	描述
top	到上边的距离
bottom	到下边的距离
left	到左边的距离
right	到右边的距离

绝对定位元素 7 大特性

绝对定位元素脱离文档流，释放原本所占据的空间，同时层级提升
绝对定位的元素，相对离自己最近的定位祖先元素进行位置调整
如果没有定位的祖先元素，则相对 body 进行位置调整
行内元素加上定位后，其具有行内块元素特性，支持宽高设置
块级元素没有设置宽度的情况下，如果加了绝对定位，宽度自动为内容宽
margin:0 auto;水平居中失效
定位元素未设置宽高情况下，同时设置 top 和 bottom 会改变元素高，同时设置 left 和 right 会改变元素宽
在元素设置宽高情况下，同时设置 top 与 bottom ,会以 top 值为主 bottom 不生效，同时设置 left 与 right ，则以 left 为主，right 不生效。

1、脱离文档流，层级提升¶

TIP

绝对定位元素完全脱离文档流，释放其原本所占据的空间，同时层级提升，会覆盖在其它元素上面。

<style>
  .container {
    width: 300px;
    height: 100px;
    border: 2px solid red;
    margin: 100px auto;
    /* 相对定位，是.box2绝对定位的参考对象 */
    position: relative;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
  }
  .box3 {
    background-color: khaki;
  }
  .box2 {
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    /* 与.container元素左边距离为 10px */
    left: 10px;
    /* 与.container元素上边距离50px */
    top: 50px;
  }
</style>
<body>
  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>

上面这个案例，我们让.box2 相对于 .container 相对定位元素来进行绝对定位，调整自身位置。

.box2 未绝对定位前效果	.box2 绝对定位后效果
![[Pasted image 20260228121304.png]]	![[Pasted image 20260228121309.png]]
## 2、相对于离自己最近的定位的祖先元素定位
TIP

绝对定位元素相对于离自己最近的定位的祖先元素定位假如元素的父元素未采用定位，祖先元素采用了定位，则绝对定位相对于离自己最近的祖先元素定位

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 100px auto;
    /* 相对定位，是.box2绝对定位的参考对象 */
    position: relative;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: pink;
    /* 绝对定位 */
    position: absolute;
    /* 与.container元素左边距离为 10px */
    left: 10px;
    /* 与.container元素上边距离50px */
    top: 10px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="item"></div>
    </div>
  </div>
</body>

上面案例中 .item的直接父元素.box不是定位元素，而祖先元素 .container是定位元素，所以.item 最终相对于 .continaer相对定位元素进行绝对定位。

.item 未使用绝对定位前效果	.item 使用绝对定位后效果
![[Pasted image 20260228121403.png]]	![[Pasted image 20260228121408.png]]
## 3、父元素及祖先元素都未定位，则相对于 body 定位

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 100px auto;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-top: 100px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: pink;
    /* 绝对定位 其父元素和祖先元素都未设置定位，则其相对body定位 */
    position: absolute;
    /* 与body左边距离为 10px */
    left: 10px;
    /* 与body上边距离10px */
    top: 10px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="item"></div>
    </div>
  </div>
</body>

.item 未使用定位前效果	.item 设置绝对定位后效果
![[Pasted image 20260228121523.png]]	![[Pasted image 20260228121529.png]]
## 4、行内元素绝对定位后，具有行内块元素特性

<style>
  span {
    /* 行内元素加上绝对定位后，支持宽高设置 */
    width: 200px;
    height: 100px;
    background-color: red;
    /* 绝对定位 */
    position: absolute;
    /* 上偏移50px */
    top: 50px;
    /* 左偏移 */
    left: 50px;
  }
</style>
<body>
  <span></span>
</body>

![[Pasted image 20260228121600.png]]

5、margin:0 auto 水平居中失效¶

TIP

绝对定位的元素，使用 margin:auto 水平居中无效

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 元素绝对定位后，margin:0 auto;水平居中失效 */
    margin: 0 auto;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

![[Pasted image 20260228121636.png]]

6、同时设置 top、 bottom、 right、 left 值，调节元素宽高¶

TIP

定位元素在未设置宽高时

同时设置 top 和 bottom 会改变元素高同时设置 left 和 right 会改变元素宽

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
  }
  .item {
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 
        通过以下值，元素会被自动拉宽和拉高，
        与相对定位元素上下 左右 10px间距 
        */
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    /*
        left:50%;
        right:50%;  
        元素的宽度将被设置为 0
        */
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

![[Pasted image 20260228121709.png]]

7、top 、 bottom 和 left 、 right 的优先级¶

TIP

在元素设置宽高情况下

同时设置 top 与 bottom，会以 top 值为主 bottom 不生效同时设置 left 与 right，则以 left 为主，right 不生效

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: khaki;
    /* 元素绝对定位 */
    position: absolute;
    /* 
        通过以下值，元素会被自动拉宽和拉高，
        与相对定位元素上下 左右 10px间距 
        */
    top: 50px;
    bottom: 10px;
    left: 50px;
    right: 50px;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

![[Pasted image 20260228121748.png]]