影响其他导航元素的导航分区

Question

我有几个div元素充当主导航。当一个页面处于活动状态时，我为每个页面都有一个单独的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

Answer 1

我最近遇到了一个类似的问题，我通过为"活动"状态/类分配（更高的）z索引来解决它。它对我有效。以防万一，为了避免和我一样的挣扎；请记住，z索引只适用于已定位的元素。