position定位

最新推荐文章于 2023-02-11 19:19:24 发布

CodingBugs

最新推荐文章于 2023-02-11 19:19:24 发布

阅读量259

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_33061377/article/details/52841497

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定义和用法
position 属性规定元素的定位类型。

说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

可选值
position: static (默认值) / absolute / fixed / relative / static / inherit

absolute（绝对定位）

生成绝对定位的元素，相对于 static 定位以外的第一个父元素的左上角进行定位。若无父级或祖先元素均无除static定位以外的定位，则根据body的左上角进行定位，可层叠。

元素的位置通过 “left”, “top”, “right” “bottom” 以及 “z-index(层级)” 属性进行规定。

绝对定位的元素脱离正常的html文档流，原来的位置会被后面的元素所占据，这与relative(相对定位)有所不同，定位从border与内容区间开始(不受padding影响,margin会影响定位)

width / height：100% ( width / height = 父级的内容区宽度/高度(+padding * 2) )
不设置width/height 则大小为内容的宽度高度

<!DOCTYPE html>
<html>
<head>
    <title>Position</title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 5px;
        }   
        #div1 {
            width: 400px;
            height: 400px;
            border: 5px solid red;
        }
        #div2 {
            width: 300px;
            height: 300px;
            border: 5px solid blue;
        }
        #div3 {
            width: 50px;
            height: 80px;
            border: 5px solid green;
            position: absolute;
        }
        #div4 {
            width: 100px;
            height: 100px;
            border: 5px solid yellow;
            position: absolute;
            top: 5px;
            left: ;

        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div4">45</div>
                <p>占据div4的空间</p>
            </div>
        </div>
    </div>
</body>
</html>