CSS 浮动与定位以及定位中z-index的堆叠问题

一、浮动布局的特点与应用

1. 浮动核心特性

脱离标准流：浮动元素会脱离文档流。
环绕特性：后续内容会环绕浮动元素排列
自动换行：多个浮动元素在容器宽度不足时自动换行

css 复制代码

.float-box {
  float: left; /* 或 right */
  width: 200px;
  margin: 10px;
}

2. 浮动典型应用场景

图文混排：实现文字环绕图片效果
多栏布局：创建水平排列的导航菜单(水平显示加浮动)

3. 清除浮动技巧

css 复制代码

/* 方法1：clearfix hack */
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* 方法2：创建BFC */
.container {
  overflow: hidden;
}

二、定位布局的特点与应用

1. 定位类型对比

定位方式	参照基准	是否脱离文档流	典型应用场景
`static`(默认)	正常流	否	常规布局
`relative`	自身原始位置	否	正常调整元素位置
`absolute`	最近非static定位祖先	是	绝对定位
`fixed`	浏览器视窗	是	固定导航/悬浮按钮
`sticky`	浏览器视窗	否	实现粘性效果

2. 定位布局

css 复制代码

/* 相对定位示例 */
.tooltip {
  position: relative;
}
.tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* 固定定位示例 */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

/* 粘性定位示例 */
.section-title {
  position: sticky;
  top: 20px;
}

在显示布局页面中，常常使用相对和绝对定位，在嵌套过程中也常常是父盒子为相对定位，子盒子绝对定位即子绝父相。

3.固定定位的使用，绝对，相对定位的结合

网页设置中要先设置网页的版心，这里实现一个固定定位跟随版心，以及一个绝对定位居中

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .w {
      width: 800px;
      height: 2000px;
      background-color: pink;
      /*版心的盒子居中*/
      margin: 0 auto;
    }

    /* 绝对定位的盒子不能通过margin: 0 auto 实现居中 */
    .fixed {
      position: fixed;
      /* 固定的盒子先走 浏览器界面的一半 */
      left: 50%;
      /* right: 50; */
      /* 之后走版心的盒子的一半 */
      margin-left: 405px;
      top: 200px;
      width: 50px;
      height: 150px;
      background-color: skyblue;
    }

    .cen {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 200px;
      height: 200px;
      transform: translate(-50%, 0);
      /* transform(0,-50%);与下面这一属性设置的等同都实现了向上移动自身高度的一半 */
      margin-top: -100px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="fixed"></div>
  <div class="w">
    <div class="cen">
    </div>
  </div>
</body>

</html>

渲染效果如下：

固定定位和绝对定位

三、z-index与层叠上下文

1. z-index核心规则

仅对定位元素生效：position值非static时才有效
数值越大越靠前：可正可负，默认auto(相当于0)，如果有嵌套现象但并没对子盒子设置，那么子盒子与父盒子在同一堆叠上下文中。
同层级比较：比较相同堆叠上下文中的z-index值，子元素的z-index值只在父元素范围内有效。子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。

2. 层叠上下文创建条件

根元素(HTML)
position非static且z-index非auto
opacity < 1
transform/filter非none
flex/grid容器的子项且z-index非auto

3. 嵌套元素的z-index陷阱

html 复制代码

<div class="parent" style="position: relative; z-index: 1;">
  <div class="child" style="position: absolute; z-index: 100;">
    <!-- 无法突破父级的层叠上下文 -->
  </div>
</div>
<div class="sibling" style="position: relative; z-index: 2;">
  <!-- 会覆盖整个parent层叠上下文 -->
</div>

关键结论 ：

子元素的z-index只在当前层叠上下文 中有效，无法超越父级上下文与其他上下文的比较结果

下述例子取自z-index堆叠规则-starof

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Stacking without z-index</title>
    <style type="text/css">

    div {
        font: 12px Arial;
        text-align: center;
        opacity: 0.7;
    }

    .bold { font-weight: bold; }

    #normdiv {
        z-index: 8;
        height: 70px;
        border: 1px dashed #999966;
        background-color: #ffffcc;
        margin: 0px 50px 0px 50px;
    }

    #reldiv1 {
        z-index: 3;
        height: 100px;
        position: relative;
        top: 30px;
        border: 1px dashed #669966;
        background-color: #ccffcc;
        margin: 0px 50px 0px 50px;
    }

    #reldiv2 {
        z-index: 2;
        height: 100px;
        position: relative;
        top: 15px;
        left: 20px;
        border: 1px dashed #669966;
        background-color: #ccffcc;
        margin: 0px 50px 0px 50px;
    }

    #absdiv1 {
        z-index: 5;
        position: absolute;
        width: 150px;
        height: 350px;
        top: 10px;
        left: 10px;
        border: 1px dashed #990000;
        background-color: #ffdddd;
    }

    #absdiv2 {
        z-index: 1;
        position: absolute;
        width: 150px;
        height: 350px;
        top: 10px;
        right: 10px;
        border: 1px dashed #990000;
        background-color: #ffdddd;
    }

</style>
</head>

<body>

    <br /><br />

    <div id="absdiv1">
        <br /><span class="bold">DIV #1</span>
        <br />position: absolute;
        <br />z-index: 5;
    </div>

    <div id="reldiv1">
        <br /><span class="bold">DIV #2</span>
        <br />position: relative;
        <br />z-index: 3;
    </div>

    <div id="reldiv2">
        <br /><span class="bold">DIV #3</span>
        <br />position: relative;
        <br />z-index: 2;
    </div>

    <div id="absdiv2">
        <br /><span class="bold">DIV #4</span>
        <br />position: absolute;
        <br />z-index: 1;
    </div>

    <div id="normdiv">
        <br /><span class="bold">DIV #5</span>
        <br />no positioning
        <br />z-index: 8;
    </div>

</body>
</html>

相应的渲染效果：

4.z-index设置

存在多个堆叠层时，每个层设置时可以以100为间隔，设置的大一点会更容易确定渲染顺序，比如第一个的z-index为0，第二个的z-index为100，设置第三个的z-index为200。后期如果需要添加一些层的话，以10为间隔，设置z-index为10，20，再需要添加的话以5为间隔，这样的写法可以方便后期扩展添加内容。
在做图文替换的时候可以使用负值。

5. z-index失效排查步骤

检查position是否为static
检查是否处于低优先级的堆叠上下文中
检查祖先元素是否创建了新的堆叠上下文

四、浮动与定位的对比选择

特性	浮动布局	定位布局
文档流影响	半脱离(保留位置)	完全脱离(不占位)
主要用途	文字环绕	精准定位/复杂层叠

使用建议：

优先考虑Flex/Grid实现整体布局
浮动用于传统浏览器支持或文字环绕
定位布局用于需要精确控制层叠关系的场景

五、常见问题解决方案

1. 浮动布局的容器塌陷

css 复制代码

/* 现代解决方案 */
.container {
  display: flow-root;
}

2. 定位元素的居中问题

css 复制代码

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. z-index失效排查步骤

检查position是否为static
检查是否处于低优先级的层叠上下文中
检查祖先元素是否创建了新的层叠上下文

CSS 浮动与定位以及定位中z-index的堆叠问题

CSS 浮动与定位以及定位中z-index的堆叠问题

一、浮动布局的特点与应用

1. 浮动核心特性

2. 浮动典型应用场景

3. 清除浮动技巧

二、定位布局的特点与应用

1. 定位类型对比

2. 定位布局

3.固定定位的使用， 绝对，相对定位的结合

三、z-index与层叠上下文

1. z-index核心规则

2. 层叠上下文创建条件

3. 嵌套元素的z-index陷阱

4.z-index设置

5. z-index失效排查步骤

四、浮动与定位的对比选择

五、常见问题解决方案

1. 浮动布局的容器塌陷

2. 定位元素的居中问题

3. z-index失效排查步骤

3.固定定位的使用，绝对，相对定位的结合