H5杂记之绝对定位 position:absolute;

最新推荐文章于 2024-01-14 22:49:02 发布

GOGOGOAAAA

最新推荐文章于 2024-01-14 22:49:02 发布

阅读量2.5k

点赞数

分类专栏： h5 文章标签： css html5 div布局

本文链接：https://blog.csdn.net/qq_29469941/article/details/52267957

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

position:absolute;

绝对定位，是相对于最近的一次定位（绝对定位，相对定位，和固定定位都可以，只要是定位都可以，float不行，margin不行）的祖先（父辈及以上）元素（与父辈同级的元素无效）。不是相对于浏览器，也不是相对于父元素。如果找不到符合条件的，则是相对于 body元素进行定位。

并且设置之后，其本身的文档流会删除，等于消失了一样。

fixed是相对于浏览器定位。

relative是相对于原位置定位，其仍然占据原位置。只是表现的位置不一样了。

<html>
<head>
    <style type="text/css">

        *{
            padding:0px;
            margin:0px;}
        h2.pos_abs
        {
            position:absolute;
            left:0px;
            top:0px
        }

        div.d1{
            width:100px;
            height:100px;
            background-color: aquamarine;

            position: absolute;
            left:20px;
        }
        div.d2{
            width:50px;
            height:50px;
            background-color: chartreuse;


        }

        div.d3{
            width:50px;
            height:50px;
            background-color: red;

          /*  position: absolute;
            left:50px;
            这块注释取消 会看到 绝对定位 不是相对于 叔辈元素，而且会绝对定位会删除原本占据的位置。
            */
        }
    </style>
</head>

<body>

<div class="d1">
    <div class="d3">

    </div>
    <div class="d2">
        <h2 class="pos_abs">aaaaaaaaaa</h2>
    </div >


</div>


</body>

</html>

aaaaaa包含在 d2中，d2是绿色，无绝对定位。位置处在d3 红色之下。

d1进行了绝对定位。

但是aaaa出现的位置是与d1相关的。而不是与包着着它的d2中。

注释里的内容也是知识点，需要看一下

代码效果图

GOGOGOAAAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5杂记之绝对定位 position:absolute;

position:absolute;绝对定位，是相对于最近的一次定位（绝对定位，相对定位，和固定定位都可以，只要是定位都可以，float不行，margin不行）的祖先（父辈及以上）元素（与父辈同级的元素无效）。不是相对于浏览器，也不是相对于父元素。如果找不到符合条件的，则是相对于 body元素进行定位。并且设置之后，其本身的文档流会删除，等于消失了一样。fixed是相对于浏览
复制链接

扫一扫