相對與絕對之間的區別

我在讀這article about position，我不明白爲什麼in this example相對定位的div受BODY的影響，但絕對定位的盒子會忽略它嗎？
當他們被放置在另一個元素內時，他們是不是應該表現得一樣？相對與絕對之間的區別

的CSS：

body { 
    display: block; 
    margin: 8px; 
} 

#box_1 { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: #ee3e64; 
} 
#box_2 { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    width: 200px; 
    height: 200px; 
    background: #44accf; 
}

來源

2011-08-09 ilyo

-1

在示例所示：

好，相對沒有上/下/左/右相對，使其保持在它應該留下來。（主體有自己的邊距和填充由瀏覽器定義，您可以覆蓋）。

絕對，我們有頂部和左邊，所以它有點上漲，因爲它忽略任何其他項目。

來源

2011-08-09 14:42:03

相關元素應具有左，頂等屬性，它們影響元素的位置。 –

對不確定性感到抱歉，我指的是一個例子。 –

基本上你有四個位置的狀態，這是如下：

靜態的（默認）
相對
固定的相對和絕對之間
絕對

的差是這個親戚對自己是「相對的」（left:15px會用15px填充左邊），但絕對是相對於其父（即第一個非靜態父對象）並應用相同的屬性（left：15px）將導致它從父元素的左邊移動15px。

這實際上是一個迷人的研究，並將有助於巨大的理解網頁佈局。

來源

2011-08-09 14:44:51

-1

上面說明的解釋和說明都很好，但對於普通人或初學者來說，這很難理解。它很簡單。

相對：相對類似於沒有定位。即使你的避風港，T使用相對的，你讓一個div出現就像這樣：

margin-left:10px;

它會移動到具有的10px的空間左邊; 同樣如果你這樣做： position：relative;

margin-left:10px;

這將是相同的，因爲沒有親戚使用。如果絕對值用於其他一些div，其編號相同： position：absolute;

margin-left:10px;

它會移動總共10 + 10 = 20px的餘裕。因爲其中添加了絕對的第二個div的10px和相對div id的10 px。它類似於這樣：

#div1{ 
float:left; 
margin-left:10px; 
} 
#div2{ 
float:left; 
margin-left:10px; 
}

來源

2014-06-09 08:23:16

absolute是最適合做頁面佈局。它應該有由CSS導入的左上角和右下角。和relative完成沒有任何標籤從CSS

來源

2017-04-22 10:51:54

這裏是位置的簡單解釋：絕對和位置：相對。

有了絕對位置，我們可以在任何地方page.If移動HTML元素我們沒有定義任何位置元素，則其將位置從體元素，否則將採取它距離最近的定義位置元素位置。下面是例子。

在這種情況下，'div2'取自'div1'元素的位置。

<div id='div1' style="position: relative; left: 100px;top: 10px;"> 
<h1>This is the first position element</h1> 
<div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
<h2>This is a heading with an absolute position</h2> 
</div> 
</div>

在這種情況下「DIV2」拍攝位置從體元件沒有位置被限定。

<div id='div1'> 
    <h1>This is the first position element</h1> 
    <div id='div2' style=" position: absolute;left: 100px;top: 150px;"> 
    <h2>This is a heading with an absolute position</h2> 
    </div> 
    </div>

隨着相對位置，一個html元素可以移動從它的正常 position.Below是示例。

在這種情況下，它將從它的位置移動10px左邊和10px以下。

<div id='div2' style=" position: relative;left: 10px;top: 10px;"> 
<h2>This is a heading with an absolute position</h2> 
</div>

來源

2017-06-26 05:11:16

相對與絕對之間的區別

回答

相關問題