У меня есть несколько элементов div, которые выступают в качестве основной навигации. Когда страница активна, у меня есть отдельный элемент div для каждого, так что высота div выше. По некоторым причинам это влияет на высоту/положение линии других разделов на странице.
Вот мой SASS
#neo_mainnav { /* Main navigation */
position: fixed;
bottom: 35px;
width: 480px;
.nav_text {
font: 14pt Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
line-height: 35px;
}
#video_nav {
float: left;
margin-right: 10px;
width: 112.50px;
height: 35px;
background: #66a9c6;
}
#video_nav_active {
float: left;
margin-right: 10px;
width: 112.50px;
height: 50px;
background: #66a9c6;
}
#gallery_nav {
float: left;
margin-right: 10px;
width: 112.50px;
height: 35px;
background: #f0a262;
}
#gallery_nav_active {
float: left;
margin-right: 10px;
width: 112.50px;
height: 75px;
background: #f0a262;
}
#floorplans_nav {
float: left;
margin-right: 10px;
width: 112.50px;
height: 35px;
background: #66a9c6;
}
#floorplans_nav_active {
float: left;
margin-right: 10px;
width: 112.50px;
height: 75px;
background: #66a9c6;
}
#contact_nav {
float: left;
width: 112.50px;
height: 35px;
background: #f0a262;
}
#contact_nav_active {
float: left;
width: 112.50px;
height: 35px;
background: #f0a262;
}
} /* Main navigation end */
HTML можно увидеть здесь http://jsfiddle.net/MQcGF/
Вся страница можно посмотреть здесь http://www.neoscapelabs.com/projects/469seventh/gallery.php
В последнее время у меня была аналогичная проблема, и я решил ее, назначив (более высокий) z-индекс "активным" состояниям/классам. Это сработало для меня. На всякий случай, чтобы избежать той же самой борьбы; помните, что z-индексирование работает только с позиционированными элементами.