CSS关于绝对定位absolute的理解

最新推荐文章于 2023-10-12 11:19:45 发布

啊啊啊～～

最新推荐文章于 2023-10-12 11:19:45 发布

阅读量797

点赞数

分类专栏： absolute positoon 文章标签： css html 定位

本文链接：https://blog.csdn.net/qq_40891322/article/details/109069154

版权

absolute 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

positoon

1 篇文章 0 订阅

订阅专栏

1.absolute 元素将会脱离正常的文档流，所以其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。这个绝对定位需要稍微理解下，因为这里容易与 relative产生混淆。例如，当对 absolute 元素添加 left:10px定位后，这个left究竟是对哪个元素而言呢？其实，此时将会往上查找absolute元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left:10px元素具备不为static的position值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。（元素默认position属性为static）
2.当只给元素定义了position：absolute时，如果top, bottom, left, right都没有指定时，则left，top值与原文档流位置一致（当然了它是不占位的）。
3.示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>  
<style>
.div1 span{
    position: absolute;
    top:10px;
}
.div2 span{
    position: absolute;
}
.div3 span{
    position: absolute;
    left: 400px;
}
.div4 span{
    position: absolute;
    top:50px;
}

</style>
</head>

<body>
    
     <div class="div1" style="position: relative;width: 150px;height: 100px;background-color: cadetblue;">
        第一个div块
        <span>11</span>
        <span>22</span>
        <span>33</span>
    </div>
    <div class="div2" style="width: 150px;height: 100px;background-color:chocolate;">
        第二个div块
        <span>44</span>
        <span>55</span>
        <span>66</span>
    </div>
    <div class="div3" style="position: relative;width: 150px;background-color:darkgreen;">
        第三个div块
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="div4" style="width: 150px;height: 100px;background-color:chocolate;">
        第四个div块
        <span>444</span>
        <span>554</span>
        <span>666</span>
    </div>
</body>
</html>

在这里插入图片描述

（1）第一个div块中span元素找到第一个父元素定位为relative，不为static，以此定位，但是没有设置left，只设置了top，按照top为10px，并放在普通文档流之后。但是其本身已经不占据任何空间，所以每一个span都会叠在上一个span的上面。
（2）第二个div块中span元素找不到父元素不为static定位，则以window进行定位，由于没有设置top,left，则直接按照普通文档流的位置放置。
（3）第三个div块中span元素找到第一个父元素定位为relative，则以其为定位。
（4）第三个div块中span元素以window定位。

啊啊啊～～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS关于绝对定位absolute的理解

1.absolute 元素将会脱离正常的文档流，所以其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时，我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性，top 或 bottom,left 或 right。这个绝对定位需要稍微理解下，因为这里容易与 relative产生混淆。例如，当对 absolute 元素添加 left:10px定位后，这个left究竟是对哪个元素
复制链接

扫一扫