Question

我很难过。我正在从头开始创建表格导航设置，因为jquery选项卡式窗格会破坏firefox中的iframe。所以我使用z-index来堆叠元素而不是show-hide。这就是我开始走这条路的方式。我的html中唯一不采用背景颜色的元素是采用z-index值的元素。正如您将看到的那样，它们需要背景颜色。

这是html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
    </head>
    <body>
        <div id= "center_console">
            <div id = "portal_wrapper">
                <div id="navtabs_bar">
                    <span id = "connect" class = "navtab">Connect</span>
                    <span id = "create" class = "navtab">Create</span>
                    <span id = "discover" class = "navtab">Discover</span>
                    <span id = "progress" class = "navtab">Progress</span>
                </div>
                <div id = "portal_display">
                    <div id = "connect_display" class = "portal_display_big4">
                        <!-- <iframe id = "video_embedded" width="680" height="360" src="http://www.youtube.com/embed/xnMJWq1BVuI?modestbranding=1&controls=1&autoplay=0&iv_load_policy=3" frameborder="0" autoplay allowfullscreen></iframe> -->
                    </div>
                    <div id = "create_display" class = "portal_display_big4">create display
                    </div>
                    <div id = "discover_display" class = "portal_display_big4">discover display
                    </div>
                    <div id = "progress_display" class = "portal_display_big4">progress display
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src = "js/jquery.js"></script>
        <script type="text/javascript" src = "js/interface.js"></script>
    </body>
</html>

css：

#portal_wrapper{
    width:680px;
    height:360px;
}
#portal_display{
    position:relative;
}
.portal_display_big4{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    background-color:blue;
}

#navtabs_bar{
    display:table;
    width:100%;
}


.navtab{
    display: table-cell;
    width: 25%;
    text-align:center;
    background-color:white;
    border:1px solid green;
}

#connect_display{
    background-color:red;
}
#create_display{
    background-color:green;
}
#connect_display{
    background-color:orange;
}

和interface.js：

$('.navtab').on('click', function(){
    //alert('ok');
    id = this.id;
    display_id = '#' + id + '_display';
    $('#connect_display').css('z-index', '0');
    $('#create_display').css('z-index', '0');
    $('#discover_display').css('z-index', '0');
    $('#progress_display').css('z-index', '0');
    $(display_id).css('z-index', '1');
    //$(display_id).css('color', 'red');
    //alert($(display_id).css('background'));
});

我试过了：

将位置从相对位置更改为绝对位置... 检查firefox和chrome中的控制台......没什么从每个其他元素中删除背景颜色......没有检查了所有链接到css blah blah blah。这里有一些我不知道的东西

任何想法？

编辑...好吧所以我决定尝试在显示的元素中放置一个div并给它一个背景颜色。基本上将绝对定位和z索引元素视为包装。这就是我最终的目标。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
    </head>
    <body>
        <div id= "center_console">
            <div id = "portal_wrapper">
                <div id="navtabs_bar">
                    <span id = "connect" class = "navtab">Connect</span>
                    <span id = "create" class = "navtab">Create</span>
                    <span id = "discover" class = "navtab">Discover</span>
                    <span id = "progress" class = "navtab">Progress</span>
                </div>
                <div id = "portal_display">
                    <div id = "connect_display" class = "portal_display_big4">
                        <iframe id = "video_embedded" width="680" height="360" src="http://www.youtube.com/embed/xnMJWq1BVuI?modestbranding=1&controls=1&autoplay=0&iv_load_policy=3" frameborder="0" autoplay allowfullscreen></iframe>
                    </div>
                    <div id = "create_display" class = "portal_display_big4">
                        <div class = "inner_wrapper" >create display</div>
                    </div>
                    <div id = "discover_display" class = "portal_display_big4">
                        <div class = "inner_wrapper" >discover display</div>
                    </div>
                    <div id = "progress_display" class = "portal_display_big4">
                        <div class = "inner_wrapper" >progress display</div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src = "js/jquery.js"></script>
        <script type="text/javascript" src = "js/interface.js"></script>
    </body>
</html>

和更新后的css

*{
    font-family:Avenir;
}

#portal_wrapper{
    width:680px;
    height:360px;
}
#portal_display{
    position:relative;
}
.portal_display_big4{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    background-color:blue;
}

#navtabs_bar{
    display:table;
    width:100%;
}


.navtab{
    display: table-cell;
    width: 25%;
    text-align:center;
    background-color:white;
    border:1px solid green;
}

.inner_wrapper{
    background-color:blue;
    height:360px;
}

所以这很有效，基本上解决了我的问题......但我想知道为什么我无法为z-indexed元素提供背景颜色。是什么赋予了？我找不到理由。

Answer 1

您的问题是您的门户网站显示没有高度，因为其中的所有元素都是绝对定位的，因此当您向内部元素添加100％高度时，它们实际上设置为height:0px

Answer 2

你忘了把身高：100％;在具有id portal_display

的相对div中

#portal_display{
    position:relative;
    height: 100%;
}

查看您的工作版本here

另外如果你的js改了一点。无需使用z-index;） fixed version

$('.navtab').on('click', function(){
    id = this.id;
    display_id = '#' + id + '_display';
    $('.portal_display_big4').hide();
    $(display_id).show();
});

Answer 3

给你的div一些高度。它们的高度为0。

background-color不适用于z-indexed元素

3 个答案: