Html 如何在其他同级淡出时调整div使其不移动

有一个bid div（

leftBox

）保存在div中：

leftBox InnterTop

和

leftBox inntertbutom

。第一个内分区的高度为90%，另一个内分区的高度为10%。通常情况下，第一个内部div（

LeftBox InnterTop

）是隐藏的，当鼠标在常规div中移动时淡入

我的问题是，当同级div被隐藏时，类

LeftBox innterbutom

将位于顶部。它应该留在盒子的底部。即使另一次潜水被隐藏了，我怎样才能让它粘到底部呢

以下是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>

---

演示：

您需要将以下样式添加到方框中：

.leftBox {
   position: relative;
}

及

---

请参见此处更新的小提琴：

您需要将以下样式添加到方框中：

.leftBox {
   position: relative;
}

及

---

请参见此处更新的fiddle:

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

或

对于容器，因此子元素的

位置：绝对

将相对于其父元素，在本例中为

.LeftBox interbuttom

内

.LeftBox

---

这里是工作

您可以使用CSS

位置：绝对

，因此元素的位置在容器中是固定的，下面是您需要的

.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 

或

对于容器，因此子元素的

位置：绝对

将相对于其父元素，在本例中为

.LeftBox interbuttom

内

.LeftBox

---

这是工作原理

如果“LeftBox innterbutom”始终位于底部，那么您可能应该使用“position:absolute；”

---

如果“LeftBox innterbutom”始终位于底部，那么您可能应该使用“position:absolute；”

而不是使用fadeIn（）和fadeOut（）。只需通过css更改

可见性

。这样就不会从页面结构中删除元素：

顺便说一句，您尝试做的事情可以100%用CSS实现。没有必要使用jQuery。

而不是使用fadeIn（）和fadeOut（）。只需通过css更改

可见性

。这样就不会从页面结构中删除元素：

---

顺便说一句，您尝试做的事情可以100%用CSS实现。不需要使用jQuery。

回答很好，但应该提到父容器应该有一个绝对或相对位置，以确保它是偏移父容器。@Nathaniel代码下面已经提到了它，但可能应该用代码编写它来回答问题，但是应该提到的是，父容器应该有一个绝对或相对的位置，以确保它是偏移父容器。@Nathaniel代码下面已经提到了它，但可能它应该用代码toNice one编写！我没有想到那个解决办法。我只是使用jQuery来实现淡入淡出的效果。在很多情况下，使用浏览器的方式要好得多。您的效果将使用更少的资源，需要更少的代码。这是唯一的CSS解决方案：。很好！我没有想到那个解决办法。我只是使用jQuery来实现淡入淡出的效果。在很多情况下，使用浏览器的方式要好得多。您的效果将使用更少的资源，需要更少的代码。这是唯一的CSS解决方案：。