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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。