absoluted定位和relative定位

时间 2019-11-16

标签 absoluted 定位 relative 栏目系统网络繁體版

原文原文链接

脱离文档流？

首先div设置absoluted绝对定位后，div会脱离文档流，所以不占据空间。
与div设置为relative相对定位不一样，相对定位实际上被看做普通流定位模型的一部分。spa

absoluted相对于谁定位？

绝对定位的元素的位置相对于最近的已定位祖先元素，若是元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户代理的不一样，最初的包含块多是画布或 HTML 元素。代理

relative相对于谁定位？

相对于它在普通文档流中的位置。code

脱离文档流后能够作什么？

绝对定位的框与文档流无关，因此它们能够覆盖页面上的其它元素。能够经过设置 z-index 属性来控制这些框的堆放次序。blog

absoluted相对定位是相对于哪一个盒子进行定位

相对于div最近的（非static定位的）父级元素的borderbox进行定位。主要代码以下：ip

<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="margin: 0;border: 20px solid peru;position: relative; ">
<div 
    style="width: 100px;height: 10px;background: lightblue;position: relative; 
        left:10px;"></div>
<div id="out" 
    style="
        width: 200px;
        height: 200px; 
        background: firebrick;
        <!--改变下边的注释行看效果-->
        <!--position: relative;--> 
        border: 50px solid black;
        padding: 50px;">
    <div id="in" 
        style="width: 50px;
        height: 50px;
        background: grey; 
        position: absolute; 
        left: 0px;">
    </div>
</div>
</body>