Question

有一个出价div（leftBox），其中包含div：LeftBox-InnterTop和LeftBox-InnterButtom。第一个内部高度为90％，另一个高度为10％。通常，第一个内部div（LeftBox-InnterTop）是隐藏的，并且在鼠标悬停在普通div中时淡入。

我的问题是，当隐藏兄弟div时，班级LeftBox-InnterButtom会登顶。它应该留在盒子的底部。即使隐藏另一个潜水，我怎样才能使它坚持到底部？

这是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/

Answer 1

而不是使用fadeIn（）和fadeOut（）。只需通过css更改visibility即可。这样就不会从页面结构中删除元素：http://jsfiddle.net/X7VTE/11/。

顺便说一下，你想要做的事情可以在CSS中100％实现。没有必要使用jQuery。

Answer 2

您需要在框中添加以下样式：

.leftBox {
   position: relative;
}

和

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

请在此处查看更新的小提琴：http://jsfiddle.net/X7VTE/6/

Answer 3

你可以使用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

Answer 4

如果'LeftBox-InnterButtom'总是在底部，那么你应该使用'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;
}

当其他兄弟褪色时，如何调整div不移动

4 个答案: