定位与堆叠

最新推荐文章于 2024-11-17 00:15:00 发布

earth_small_ma

最新推荐文章于 2024-11-17 00:15:00 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：前端 CSS 定位

本文链接：https://blog.youkuaiyun.com/earth_smallma/article/details/80853618

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了CSS中的定位机制，包括绝对定位、相对定位、固定定位等特性及其偏移属性的使用方法，并介绍了如何通过z-index属性来控制元素的堆叠顺序。

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

定位与堆叠

偏移属性

取值

top/right/left/bottom : [length] | [percentage] | auto | inherit

默认值： auto

适用于定位元素(position值不为static的元素)，无继承性

百分数时：对于top与bottom，则相对于包含块的高度；对于right与left，则相对于包含块的宽度

首先介绍什么是初始包含块：初始包含块是一个视窗大小的矩形，可以认为就是视窗

偏移属性的坐标轴

以定位元素包含块左上角为原点，水平方向从左向右为X轴正方向，垂直方向从上到下为Y轴正方向。各自的反方向为负方向。偏移属性便是按照该坐标进行元素偏移的

position

绝对定位元素的包含块

绝对定位元素的包含块为，最近的position不是static与inherit的祖先元素(祖先元素可以是任何类型，甚至是行内元素)：

1.如果祖先是块级元素，包含块则设置为该元素的内边距边界(即padding+内容区所形成的整个区域)

2.如果没有符合上述要求的祖先元素，元素的包含块定义为初始包含块

元素绝对定位时，会从文档流中完全删除。然后相对于其包含块进行定位，其边界(包括margin)根据偏移属性进行放置

绝对定位元素的特点

1.脱离标准文档流

2.绝对定位元素会随着文档一起滚动(只要绝对定位元素不是固定定位元素的后代)。原因是，元素最终都会相对于正常流的某一部分进行定位

3.元素绝对定位后会变为块级元素，而无论以前是什么类型的元素

自动边偏移

元素绝对定位时，除bottom外的某个任意偏移属性设置为auto，会有一种特殊行为：

当top值为auto时，定位元素的顶端要相对于其未定位前本来的顶端位置对齐(即当元素的position值为static时它的顶端位置)

同理，left与right都有这样的特点

元素在正常流中原本的位置(即position:static)称为静态位置

fixed

固定定位元素的包含块

绝对定位元素的包含块是视窗。其边界(包括margin)根据偏移属性进行放置

固定定位元素的特点

1.脱离标准文档流

2.不会随文档滚动，因为相对于视窗

3.元素固定定位后会变为块级元素，而无论以前是什么类型的元素

relative

相对定位元素的包含块

相对定位元素的包含块由最近的块级框或行内块祖先框的内容区构成。其边界(包括margin)根据偏移属性进行放置

相对定位元素的特点

1.脱离标准文档流

2.原本所占的空间仍然保留

3.会随文档滚动

4.相对定位不会使元素变为块级元素

z-index

定位元素由于脱离标准文档流，因此总有可能发生相互重叠的情况，而z-index就是控制定位元素的在Z轴上的重叠次序的

z-index取值

z-index ： [integer] | auto | inherit
默认值： auto
适用于定位元素，无继承性

浏览器中的z轴

即为从前向后，更通俗的说是：面对屏幕，逐渐远离用户的那根轴

这里写图片描述

z-index的取值要求

正负都行

局部叠放上下文

一旦为一个元素指定了z-index值(非auto)，该元素就会建立自己的局部叠放上下文，这意味着该元素的所有后代都是在该元素的基础上进行z-index叠放

例如：

    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .first{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: auto;
            top: auto;
            z-index: 100;
        }
        .second{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 170px;
            top: 0px;
            z-index: 50;
        }
        .second-inner{
            width: 100px;
            height: 50px;
            background-color: orange;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 200;
        }
    </style>
    <body>
        <div class="first"></div>
        <div class="second">
            <div class="second-inner"></div>
        </div>
    </body>

运行结果

这里写图片描述

虽然.second-inner的z-index比.first的大，但其作为.second的后代，固是在.second所建立的堆叠上下文中进行z-index重叠的，而.second的z-index已经位于.first的下面了，所以即使.second-inner的z-index大于.first的z-indx，其也不会放置在.first前面

ps：本文案参考了以下书籍
《CSS权威指南》