如何將DIV元素堆疊在一起並使用相對位置：relative

Question

我遇到問題，請將div元素垂直堆疊在一起。我有一個mainwrapper和2 div裏面的元素，我需要堆疊。但每當我給第一個內部divposition: absolute，然後right: 0或甚至float: right，它會進入第二個div。有沒有辦法解決？

<div class="wrapper"> 

    <div class="test1"></div> 

    <div class="test2"> 
     <div class="test3"></div> 
    </div> 

</div> 

CSS：

.wrapper { 
    width: 605px; 
    margin: 0 auto; 
    position: relative; 
    background: transparent; 
    border: 1px solid black; 
    height: 240px; 
} 

.test1 { 
    border: 1px solid black; 
    width: 200px; 
    height: 30px; 
    display: block; 
    position: absolute; 
    right: 0; 
} 

.test2 { 
    border: 1px solid red; 
    width: 600px; 
    height: 200px; 
    display: block; 
    position: absolute; 
} 

.test3 { 
    border: 1px solid black; 
    width: 100px; 
    height: 20px; 
    position: absolute; 
    bottom: 20px; 
    right: 0; 
} 

這是我jsfiddle。

Answer 1

會http://jsfiddle.net/uFf9D/工作？

我註釋掉了.wrapper上的尺寸，並添加了overflow：hidden。然後將.test1和.test2更改爲position：relative和float：right。

編輯：讀取寬度，因爲它需要居中。

.wrapper { 
    width: 605px; 
/* 
    height: 240px; 
*/ 
    overflow: hidden; 
    ... 
} 

.test1 { 
/* 
    position: relative; 
*/ 
    float: right; 
    ... 
} 

.test2 { 
    position: relative; 
    float: right; 
    ... 
} 

如果你想跳過花車和溢出：隱藏，方向：RTL可能在.wrapper一個可能的解決方案..不知道如果它的工作原理不管是繼承。

嘗試這個除了.test2填補.test1：

width: 100%; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 

Answer 2

我不完全確定你爲什麼定位像你這樣的人。我會假設你使用的是position：absolute，以便這些div不會干預其他內容。另外，不需要爲div顯示「display：block」，這是它們的默認值。

這是一個可以隨心所欲的小提琴，包裝被設置爲絕對位置，以便這些div不會干涉其他內容。基本上，你會使用包裝作爲框架。 Solution

.wrapper { 
    width: 605px; 
    left: 50%; 
    margin-left: -302.5px; 
    position: absolute; 
    background: transparent; 
    border: 2px solid black; 
    height: 240px; 
} 

.test1 { 
    border: 2px solid green; 
    width: 200px; 
    height: 30px; 
    position: relative; 
    right: 0; 
} 

.test2 { 
    border: 2px solid red; 
    width: 600px; 
    height: 200px; 
    position: relative; 
} 

.test3 { 
    border: 2px solid black; 
    width: 100px; 
    height: 20px; 
    position: absolute; 
    bottom: 20px; 
    right: 0; 
} 

注：

1. 位置：相對可以做同樣的東西，位置：絕對的， 事情還是流動彷彿元素仍處於默認 位置（但它不沒必要）。
2. 的位置是：絕對需要的是 元件從流動
3. 位置：固定是一樣的，但絕對與 參考窗口本身（認爲固定導航欄）