div下另一個div

用css，我可以把div放在另一個div而不用絕對定位嗎？div下另一個div

我有這兩個div，我希望純白色的一個直接出現在帶有黃色不透明度的那個下面（但不是直接在角落裏，在輪廓的角落）。

這是如何完成的。我一直在試驗z-index和相對定位，但無濟於事。

感謝 http://jsfiddle.net/loren_hibbard/WtGsv/

來源

2012-11-06 1252748

當您想要在同一個地點出現兩個元素時，絕對定位是常用的解決方案。爲什麼它不適合你？ – Quentin

澄清，因爲我看到你的小提琴，因爲你請求 –

@Quentin以及，我不能真正的絕對位置，因爲這些元素（我在小提琴上的div）將在頁面上動態創建。他們不會總是在同一個地方：/ – 1252748

不使用定位，我使用負利潤率增加了一個風格，你的內容的div：

工作演示在這裏：http://jsfiddle.net/WtGsv/3/

我建議增加一個id你.fixed_width DIV這雖然容納.content DIV，並使用id給予負面保證金，這樣父div有負保證金，而不是子div。

但是，如果你想使用絕對定位，我已經更新您的jsfiddle這裏： http://jsfiddle.net/WtGsv/12/

基本上，你position:relative;添加父DIV各地要使用position:absolute;

來源

2012-11-06 15:12:54 Andy

這是一個非常全面的解決方案。非常感謝你，安迪。 :) – 1252748

悠可以使用position: relative; top -100px，http://jsfiddle.net/WtGsv/1/

，或者您也可以使用負利潤率margin-top: -100pxhttp://jsfiddle.net/WtGsv/5/

使用這兩種解決方案，在底部的DIV仍然需要空間，這將是最初

請注意，動態添加div並不妨礙您將其設置爲絕對位置oned，你就必須讓家長定位相對的，動態絕對定位的div將正確的插入，你想讓它http://jsfiddle.net/WtGsv/10/

來源

2012-11-06 15:11:26

整潔。謝謝！在哪些瀏覽器中這是可靠的。我似乎記得在負邊距，位置等方面遇到了問題。就像在不同的瀏覽器中反應不同一樣。那是錯的。另外，你會只使用z-索引來控制它們的高度，還有其他一些控制方式來控制它的高度。把div與關於黃色div的輸入放在一起看起來並沒有完成。再次感謝！ – 1252748

@thomas你必須在你的目標瀏覽器中自己測試它，但據我所知它是可靠的。是的，'z-index'是你如何控制圖層的堆疊 –

@JuanMendes在這個例子中擊敗了我，但是當你看到相對位置的父div仍然允許動態內容。 – Andy

你的其他兩個div如果你把它們都放在一個父div裏面，並且設置它的寬度等於黃框的寬度，那麼默認情況下，白色的直接放在下面。

來源

2012-11-06 15:14:38 Quinny

您可以將您想要的div放在您想要的div下面的頂部，並將其放置在頂層絕對位置。

例HTML：

<div id="bottom"> 
    lorem ipsum 

    <div id="top"> 
     hello world 
    </div> 

</div>

CSS：

#bottom { 
    background:red; /* to see dimensions */ 
    position:relative; 
} 

#top { 
    background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}

這裏是一個JSfiddle。

來源

2012-11-06 15:18:22 fncombo

我想你應該重寫標記，這是非常簡單的，我不知道你是否知道這個或不是，但你可以拿起div並把它放在一個定位容器中，比你不需要切緣陰性

Demo

HTML

<div class="wrap"> 
    Add a line item 
    <div class="inner_wrap"><textarea></textarea></div> 
</div>

CSS

body { 
    background-color: #aaaaaa; 
} 

.wrap { 
    border: 4px dashed #ff0000; 
    height: 100px; 
    text-align: center; 
    line-height: 100px; 
    font-size: 20px; 
    font-family: Arial; 
    position: relative; 
} 

.inner_wrap { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: #919191; 
    top: 0; 
}

來源

2012-11-06 15:18:52

我不太確定我是否理解這個小提琴。似乎只有一個分區。我想我錯過了一些東西。 – 1252748

@thomas你不知道CSS的定位，是的，你可以給** - **邊距，但你可以避免它，'絕對定位div'可以浮動在'相對定位div'內，所以當你可以完成時使用負邊距這在一個乾淨的方式 –

div下另一個div

回答

相關問題