css stack center div在另外兩個之上

這應該相當簡單。我試圖將div放在另外兩個div的頂部，但是當窗口重新調整大小時，我不知道如何讓它停留在那裏。css stack center div在另外兩個之上

#middle{ 
    z-index:10; 
    border-radius:10px; 
    border:15px solid #232323; 
    background: #232323; 
    width:400px; 
    height:200px; 
    text-align:center; 
    top:180px; 
    position:absolute; 
}

我只是想「中間」的div其他兩個之間，並在頁面的正中英寸請看看小提琴，讓我知道我可以在這裏做什麼。

http://jsfiddle.net/VwRkC/

我一直修修補補，但我不是很有經驗的CSS。

謝謝

來源

2013-07-08 Owen

試試這個：

#middle{ 
    z-index:10; 
    border-radius:10px; 
    border:15px solid #232323; 
    background: #232323; 
    width:400px; 
    height:200px; 
    text-align:center; 
    top:180px; 
    left: 50%; 
    margin-left: -215px; /* This is half the total width (width + border + padding) */ 
    position:absolute; 
}

來源

2013-07-08 05:23:44 kalley

感謝Kalley，這做到了 – Owen

你不能讓position:absolute;工作而無需增加position:relative;其父股利。

對於您的情況，您需要將position:relative;添加到wrapper id。

這裏是WORKING DEMO

#wrapper { 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
    width: 960px; 
}

只有position:absolute;會使div來取它的位置相對屏幕。通過將position:relative;應用於絕對位置div的父div，將使絕對位置div從其父div的相對位置進行定位。

來源

2013-07-08 05:30:33 Nitesh

+1謝謝你，我不知道家長需要被設置爲相對 – Owen

只有'的位置是：絕對的;'將使div來採取相對屏幕的位置。通過對絕對位置div的父div應用'position：relative;'將使絕對位置div從其父div的相對位置進行定位。 – Nitesh

css stack center div在另外兩個之上

回答

相關問題