CSS中深入浅出系列之盒子定位：绝对定位！（脱离文档流）

CH040708

已于 2024-10-20 22:27:06 修改

阅读量1k

点赞数 13

CC 4.0 BY-SA版权

文章标签： css 前端

于 2024-10-20 22:26:04 首次发布

本文链接：https://blog.csdn.net/CH040708/article/details/143092337

#在CSS中当一个元素被设置为绝对定位时，它会脱离正常的文档流，不再占据原本在页面布局中的空间。这意味着其他元素会忽略它的存在，就好像它不存在一样，如设计页面中的覆盖层、弹出框等时非常有用处。#

一、绝对定位的定义

1、前言

绝对定位可以用于脱离文档流，盒子从标准流中脱离，与相对定位不同，绝对定位对其后的兄弟盒子定位没有影响，原先在正常文档流中所占的空间会关闭，如同原来就不存在过一样。

元素通过定位后，会生成一个新的块级框。

2、绝对定位的包含块

①. 包含块的定义

在盒子定位中对于没有脱离文档流的元素：包含块就是其父元素.
对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位，那包含块就是整个页面)。

②. 包含块的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父容器 */
        article{
            width: 250px;
            height: 350px;
            background-color: gray;
            position: relative;
        }
        
       /* 盒子 */
        div{
            width: 220PX;
            height: 100px;
            background-color: antiquewhite;
            border: black 2px solid;
            /* 外边距 */
            margin: 2PX;
            top: 5%;
            left: 5%;    
        }
        #div1{
            background-color: red;
            position: relative;
        }
        #div2{
            background-color: rgb(59, 223, 100);
            position: relative;
        }
        #div3{
            background-color: blue;
            position: relative;
        }

    </style>
</head>
<body>
    <article >
       <div id="div1">盒子一</div>
       <div id="div2">盒子二</div>
       <div id="div3">盒子三</div>
    </article>
</html>

代码运行后如下：

二、绝对定位的使用

1、前言

在盒子定位中通过给元素设置 position:absolute即可实现绝对定位
精确控制位置：使用 left、right、top、bottom 四个属性调整位置。
层叠顺序：绝对定位的元素会根据其设置的 z-index 值来确定层叠顺序。

2、绝对定位的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100PX;
            height: 100px;
            /* background-color: antiquewhite; */
            border: 2PX black solid;
            /* 外边距 */
            margin: 3PX;    
        }
        #div1{
            background-color: red;
            position: relative;        
        }
        #div2{
            background-color: rgb(59, 223, 100);
            position: absolute;
            left: 50px;
            top: 50px;
        }
        #div3{
            background-color: rgb(116, 63, 122);
        }
        article{
            width: 300px;
            height: 300px;
            background-color: gray;
            position: relative;
        }
    </style>
</head>
<body>
    <article>
       <div id="div1">红</div>
       <div id="div2">绿</div>
       <div id="div3">蓝</div>
    </article>

</html>

代码运行后如下：

3、绝对定位的特点

在盒子定位中，使用绝对定位，会脱离文档流，对父元素、兄弟元素造成影响。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。

①、绝对定位的浮层作用

浮层的作用在于它的独立性和突出性，一般只在需要时出现，完成特等的的任务或提供必要的信息后，会消失或隐藏，不会长期占据页面空间。
有助于保持页面的简洁和清晰，避免信息过载。

②绝对定位的综合使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <style>
        #div1{
            width: 30px;
            height: 30px;
            position: absolute;
            background-color: aliceblue;
            left: 100PX;
            top: 100PX;
        }
        #div2{
            width: 30px;
            height: 30px;
            position: absolute;
            background-color: aliceblue;
            left: 250px;
            top: 100PX;
        }
        #div3{
            width: 30px;
            height: 30px;
            position: absolute;
            background-color: red;
            left: 180px;
            top: 200PX;
        }
        #div4{
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: green;
            left: 185px;
            top: 205PX;
        }
        #div5{
            width: 150px;
            height: 25px;
            position: absolute;
            background-color: aliceblue;
            left: 123px;
            top: 290PX;
        }
        article{
            width: 400px;
            height: 400px;
            background-color: gray;
            position: absolute;
            left: 550px;
            top: 50px;
        }
     </style>
</body>
    <article>
       <div id="div1"></div>
       <div id="div2"></div><br>
       <div id="div3"></div>
       <div id="div4"></div>
       <div id="div5"></div>
   </article>
</html>

CSS中深入浅出系列之盒子定位：绝对定位！（脱离文档流）

一、 绝对定位的定义

1、前言

2、绝对定位的包含块

①. 包含块的定义

②. 包含块的使用

代码运行后如下：

二、 绝对定位的使用

1、前言

2、绝对定位的使用

代码运行后如下：

3、绝对定位的特点

①、绝对定位的浮层作用

②绝对定位的综合使用：

代码运行后如下：

一、绝对定位的定义

二、绝对定位的使用