如何使父div無子女絕對位置？

我正試圖讓我的父div在其子div上，基本上我有2個div在我的父母div，左側和右側div浮動。如何使父div無子女絕對位置？

<div id="parent"> 
    <div class="leftbox">left</div> 
    <div class="leftbox">right</div> 
</div>

這兩個子div都有float：left和width：50％css。父DIV有：

#parent { 
    overflow:hidden; 
} 
#parent:hover { 
    background: red; 
}

我想在這裏做的是覆蓋整個父DIV的背景時，懸停狀態上，但事情是，當我將鼠標懸停在父DIV，它不影響孩子DIV使得印象是，它是在父DIV的頂部，所以我所做的就是我說：

position:relative;

父母DIV，但它仍然不工作。任何想法如何我可以實現這一目標？謝謝！

PS：我真的不想隱藏孩子的div，基本上我只想在父親的div上面。我使代碼簡單，但似乎我困惑了你們中的一些人。這裏是我想要做的，讓孩子div低於父母，這樣它可以得到由父母div背景覆蓋，但正如你可以看到我的js小提琴，孩子div是在父母的背景之上：

http://jsfiddle.net/MarkTe/jq12pu3p/

來源

2015-02-05 Mark Te

請澄清你的問題也許附上慾望的效果與圖像.... – DaniP 2015-02-05 15:36:28

這看起來像你想隱藏父母被徘徊時的子元素？但是，真的，我正在努力去嘗試理解當前編寫的問題。 – 2015-02-05 15:37:19

這聽起來像是一個clearfix問題。 – jbutler483 2015-02-05 15:38:12

「不是真的把它隱藏起來，我只是想讓父母的div在它之上」

我能想到你可能想要這個的唯一原因是，如果父div是部分透明的，所以你仍然可以看到孩子下面......在這種情況下，你可以把第三個DIV這是相同的高度&寬度爲母體，但位置絕對...

<div id="parent"> 
    <div class="leftbox">left</div> 
    <div class="leftbox">right</div> 
    <div class="cover"></div> 
</div>

則...

div.cover { 
    position:absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    transition: all .3s; 
}  

#parent:hover > div.cover, div.cover:hover { 
    background-color: #000000; 
} 

#parent { position: relative; } /* As well as your own code */

來源

2015-02-05 15:49:16 colmde

真棒。並不是真正考慮到我的想法，但這會產生相同的結果！謝謝！ – 2015-02-05 16:03:28

沒問題，我已更新以符合您的要求 – colmde 2015-02-05 16:04:29

你不能真正層之上的孩子父母，但你可以通過切換兒童的關注模仿效應盤旋當父，正是如此：

#parent { 
 
    overflow: hidden; 
 
} 
 
#parent:hover { 
 
    background: red; 
 
} 
 
#parent:hover > div{ 
 
    visibility:hidden; 
 
}

<div id="parent"> 
 
    <div class="leftbox">left</div> 
 
    <div class="leftbox">right</div> 
 
</div>

來源

2015-02-05 15:39:13 SW4

這就是我要提出的建議，但問題 - 以及OP在評論中的迴應 - 讓我不知道他究竟想要什麼。 – 2015-02-05 15:45:33

@ DavidThomas-發表評論之前...和是的...現在我超級困惑：S – SW4 2015-02-05 15:54:17

如何使父div無子女絕對位置？

回答

相關問題