Блог

Существует bid div ( leftBox ), который содержит div внутри: LeftBox-InnterTop и LeftBox-InnterButtom . Высота первого внутреннего div составляет 90%, а другого — 10%. Обычно первый внутренний div ( LeftBox-InnterTop ) скрыт и исчезает при наведении курсора мыши на общий 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

Вместо использования fadeIn() и fadeOut(). Просто измените visibility с помощью css. Таким образом, элемент не удаляется из структуры страницы: http://jsfiddle.net/X7VTE/11 /.

Кстати, то, что вы пытаетесь сделать, может быть на 100% реализовано в CSS. Нет необходимости использовать jQuery.

Вам нужно добавить следующие стили в свои поля :

 .leftBox {
   position: relative;
}
  

и

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

Смотрите обновленную скрипку здесь : http://jsfiddle.net/X7VTE/6

Если ‘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;
}
  

для этого вы можете использовать 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

вот рабочая СКРИПКА