脱离文档流特点之absolute

最新推荐文章于 2024-10-16 21:48:27 发布

奋斗的菜鸟.com

最新推荐文章于 2024-10-16 21:48:27 发布

阅读量316

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/CodePrincess/article/details/129806201

版权

脱离文档流特点

脱离文档流是指，该元素脱离了文档中。

有两个结果：

不再占据默认分配的空间,（导致父元素高度塌陷）

它下面的元素会上去补位。

但是一般来说脱离文档流分为两种

全脱离文档补位元素中无论是有图片还是文字，都会全部上去补位
半脱离文档补位元素中有图片、文字的，这些图片或者文字会卡在元素周围，形成环绕效果

半脱离文档流 float方式

浮动元素不会把其他占位的图片(或文字)覆盖，图片(或文字)会环绕在浮动元素周围

文字半脱离文档流

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:pink;
        }
        /*这个补位的文字不会被覆盖，会环绕在浮动元素周围*/
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">今天是星期五</div>
</body>

在这里插入图片描述

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:pink;
        }
        img{
            width: 100px;
            height: 100px;
        }
        /*这个占位的图片不会被覆盖，会环绕在浮动元素周围*/
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        <img src="../../img/bg0.jpg" alt="">
    </div>
</body>

全脱离文档流 position:absolute方式

后面元素被全覆盖，包括这个补位的文字，称为全脱离文档流

在这里插入图片描述

<style>
        .test1{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
        }
        .test2{
            width: 100px;
            height: 100px;
            background-color:pink;
        }
        /*后面元素被全覆盖，包括这个补位的文字，称为全脱离文档流*/
    </style>
</head>
<body>
    <div class="test1"></div>
    <div class="test2">今天是星期五</div>
</body>

position: absolute 意味着元素的位置是相对于最近position不为static的祖先元素来定位进行绝对定位。如果元素没有已定位的祖先，则相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

是脱离正常的文档流（的显示方法），而不是真正的脱离了文档流。

如果元素不在文档流，肯定是不可见的

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid;
        }
        .test{
            width: 200px;
            height: 100px;
            background-color:bisque;
            border: 1px solid;
            position: absolute; /*设置了absolute布局  */
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="test"></div>
</body>

在这里插入图片描述

position :absolute脱离文档流的影响

将脱离原来文本，盖在其他盒子之上

z-index可改变多个absolute定位的元素的堆叠顺序

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

<style>
        .div1{
            width:300px;
            height:300px;
            border:1px solid red;
            padding: 20px;                       /* 规定了父元素的padding*/
            position: relative;                  /*  相对定位*/
        }
        .pos1,.ab2{
            width:200px;
            height:200px;
            border:1px solid yellowgreen;
            position:absolute;             /*绝对定位,但没有规定left和top*/
        }
        .pos1{
            background-color: blue;
            top: 0;
            left:20px;
            z-index: 999;
        }
        .ab2{
            background-color: aquamarine;
            top: 20px;
            left: 40px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="pos1"></div>
        <div class="ab2"></div>   
        <!-- 默认后面的absolute元素在前面的absolute元素上方 ,z-index可以改变堆叠顺序 -->
    </div>
</body>

解决absolute脱离文档流高度塌陷：

拿到子元素的高度,将子元素的高度赋予父元素

    <style>
        #child{
            width: 200px;
            height: 100px;
           border: 1px solid red;
            position: absolute;
            /*正常布局时，child撑开了父元素container的高度
            absolute布局时，child元素脱离文档流，不能撑开父元素
            父元素看似有内容，但未设置高度，不占据空间，会被其他元素占据位置
            */
        }
        #container{
            height: auto;
            width: 300px;
            background: rgb(54, 181, 219);
        }
        /* #container:after{
            content: "";
            height: 0;
            clear: both;
            overflow: hidden;
            display: block;
            visibility: hidden;
        }   这样写没用 */
    </style>
</head>
<body>
    <div id="container" >  
        <div id="child"></div>
        <!-- <div style="clear: both;"></div> -->
    </div>
</body>
<script>
    //拿到子元素的高度
    let box=document.getElementById("child").offsetHeight;
    //将子元素的高度赋予父元素,一定要写+px
    document.getElementById("container").style.height=box+'px';

</script>