浮动、定位层级问题

最新推荐文章于 2025-06-02 09:49:53 发布

拂衣去

最新推荐文章于 2025-06-02 09:49:53 发布

阅读量1.8k

点赞数 5

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.csdn.net/hj123456852/article/details/119649856

本文详细介绍了CSS中元素的层级关系，包括标准流、浮动元素和定位元素的层级顺序。浮动元素相对于标准流元素提升半级，定位元素提升一级。在需要调整元素层级时，通过`z-index`配合`position`属性可以有效改变元素的堆叠顺序。文章还探讨了在浮动元素和定位元素中如何通过`z-index`和`transform`调整层级，确保元素在交互时不会被遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

层级默认规则

正常排列下，层级的大小由顺序决定，后面的元素要比前面的元素层级要高。

浮动元素层级提升半级，定位元素层级提升一级，所以定位元素层级比标准流和浮动元素的层级要高（默认静态定位除外），浮动元素要比标准流元素层级要高。

在都有定位的情况下，层级依旧取决于顺序。

浮动元素提升层级

在一行同浮动的元素中，默认的层级关系是从前到后的书写顺序来定义的，例如本来并排排列的五个div，同时加一个magin-left:-20px，五个div将会一个一个的摞在一起，从左到右层级越来越高。

.box div {
            width: 100px;
            height: 100px;
            float: left;
            border-radius: 50%;
            cursor: pointer;
            text-align: center;
            transition: all .4s;
            margin-left: -20px;
        }

在这种情况下，如果想要提高单个某个div的层级，单单通过z-index是无法改变的

.d2 {
          
            z-index: 1;
            background-color: #ea5180;
            border: 5px solid #c12d5e;
        }

虽然加了z-index，但是第二个div的层级还是没有提高，还是会被第三个div遮盖.

在这种情况下，想要提高第二个div的层级，就要给第二个div设置一个相对定位

.d2 {
            position: relative;
            /* z-index: 1; */
            background-color: #ea5180;
            border: 5px solid #c12d5e;
        }

由于定位元素的层级比浮动元素要高，所以此时第二个将会在第三个上面。

鼠标悬浮给元素添加transform: scale(1.2);将元素放大1.2倍，此时都是浮动元素，层级较低，放大之后不会被旁边元素遮盖。

定位排列的元素提升层级

将五个div使用绝对定位进行刚才相同的排列

.box div {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            cursor: pointer;
            text-align: center;
            transition: all .4s;
            margin-left: -20px;
        }
.d1 {
            left: 0;
            background-color: #0dc392;
            border: 5px solid #529c88;
        }

        .d2 {
            left: 80px;
            background-color: #ea5180;
            border: 5px solid #c12d5e;
        }

        .d3 {
            left: 180px;
            background-color: #5cc3e6;
            border: 5px solid #a9cbe0;

        }

        .d4 {
            left: 280px;
            background-color: #f0c655;
            border: 5px solid #dcc996;
        }

        .d5 {
            left: 380px;
            background-color: #de76c3;
            border: 5px solid #d4aac6;
        }

由于五个都使用了绝对定位，所以五个div依旧是从左到右层级越来越高

在这个时候想要提升某一个元素的层级，只需要给起设置z-index，

.d2 {
            
            z-index: 1;
            background-color: #ea5180;
            border: 5px solid #c12d5e;
        }

这个时候第二个层级将会变高，不会被第三个元素遮住

但是在此时让鼠标悬浮时添加 transform: scale(1.2);元素会被放大，但是放大的部分会被旁边元素遮住

这个时候就要添加z-index属性

.box div:hover {
            transform: scale(1.2);
            z-index: 1;
        }

元素将不会被盖住