如何調整div在其他兄弟淡出時不移動

有一個可容納div內部的出價div（leftBox）：LeftBox-InnterTop和LeftBox-InnterButtom。第一個內部div有90％的高度，另一個有10％。通常情況下，第一個內部div（LeftBox-InnterTop）被隱藏，並且在鼠標懸停在常規div中時淡入。如何調整div在其他兄弟淡出時不移動

我的問題是類LeftBox-InnterButtom當兄弟div被隱藏時，它會變爲頂部。它應該留在盒子的底部。即使隱藏了另一個潛水點，我怎樣才能讓它堅持到底？

這裏是CSS和HTML代碼：

.leftBox { 
float:left; 
width:300px; 
height:300px; 
background:url(http://goo.gl/Z3Escd); 
} 
.LeftBox-InnterTop { 
    width:100%; 
    height:90%; 
    background: rgba(255, 255, 255, 0.50); 
} 
.LeftBox-InnterButtom { 
    width:100%; 
    height:10%; 
    background: rgba(0, 0, 0, 0.80); 
}

HTML：

<div class="leftBox"> 
     <div class="LeftBox-InnterTop"> 
      <div class="SmallBoxes"></div> 
      <div class="SmallBoxes"></div> 
      <div class="SmallBoxes"></div> 
      <div class="SmallBoxes"></div> 
     </div> 
     <div class="LeftBox-InnterButtom"></div> 
</div>

演示：http://jsfiddle.net/danials/X7VTE/2/

來源

2014-07-04 Daniel JJ

代替使用淡入（）和淡出（）的。只需通過css更改visibility即可。這樣，元素不會從頁面結構中刪除：http://jsfiddle.net/X7VTE/11/。

順便說一句，您正在嘗試做的事情可以100％在CSS中實現。沒有必要使用jQuery。

來源

2014-07-04 03:20:05 DRD

好的！我沒有想到這個解決方案。我只是使用jQuery來產生淡化效果。 –

在許多情況下，瀏覽器路由要好得多。你的效果將使用更少的資源，並且需要更少的代碼。以下是純CSS解決方案：http://jsfiddle.net/X7VTE/12/。 – DRD

您需要將以下樣式添加到您的箱子：

.leftBox { 
    position: relative; 
}

和

.LeftBox-InnterButtom { 
    position: absolute; bottom: 0; left: 0; 
}

請參閱更新的小提琴這裏：http://jsfiddle.net/X7VTE/6/

來源

2014-07-04 03:06:56 Ash

您可以使用CSS position: absolute對於這一點，所以該元素的位置是固定的容器內，這裏就是你需要

.LeftBox-InnterButtom { 
    width:100%; 
    height:10%; 
    background: rgba(0, 0, 0, 0.80); 
    position: absolute; // this will make the element position fixed inside it's container 
    bottom: 0; // this will make the position at the bottom 
}

並給出

position: relative

或

position: absolute

的容器，所以position: absolute的子元素會相對於它的父，在這種情況下.LeftBox-InnterButtom內.leftBox

這裏的工作FIDDLE

來源

2014-07-04 03:08:27 Kyojimaru

好的答案，但應該指出，父容器應該有一個絕對或相對的位置，以確保它是抵消父母。 –

@Nathaniel它已經在代碼下面提到了，但也許它應該用代碼編寫到 – Kyojimaru

如果「LeftBox -InterButtom'將始終處於最底部，那麼你應該使用'position：absolute;'

http://jsfiddle.net/s49p6/

.mainBox { 
    width:600px; 
    height:300px; 
    background:black; 
    position: relative; 
} 
.LeftBox-InnterButtom { 
    width:100%; 
    height:10%; 
    background: rgba(0, 0, 0, 0.80); 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

來源

2014-07-04 03:11:19 deansimcox

如何調整div在其他兄弟淡出時不移動

回答

相關問題