背景顏色不適用於z索引元素

我很難過。我從頭開始創建一個表格式的導航設置，因爲jquery選項卡式窗格會破壞firefox中的iframe。所以我使用z-index來堆疊元素而不是show-hide。我就是這樣開始的。在我的html中不會採取背景顏色的唯一元素是採用z-index值的元素。正如你會看到如果你運行這個，他們需要一個背景顏色。背景顏色不適用於z索引元素

下面是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和鉻...沒有從每個其他元素刪除背景顏色...沒有檢查所有鏈接到CSS等等等等等等。有什麼我在這裏失蹤

任何想法？

編輯...好吧，所以我決定嘗試把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索引元素。是什麼賦予了？我找不到原因。

來源

2014-02-26 user3256623

太模糊......你想達到什麼目的？標籤的背景顏色？ – Siyah

他們需要背景顏色，否則所有的單詞都顯得混亂。但我只是找到了一個解決方案，我認爲。 – user3256623

你的問題是，您的門戶網站顯示沒有高度，因爲所有它裏面的元素是絕對因此定位時加高度100％自己內心的元素，他們實際上設置爲height:0px

來源

2014-02-26 10:17:02 Pete

明白了，這是有道理的。謝謝！ – user3256623

你忘了把高度：100％;與ID portal_display

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

相對DIV見你的工作版本here

此外，如果改變了你的JS一點點。無需用z-指標的工作;） fixed version

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

來源

2014-02-26 10:13:49

謝謝理查德，除了我不能使用顯示/隱藏，因爲它重置iframe youtube播放器，我不能有這個工作。感謝指出我可以使用類選擇器！ – user3256623

給你的div一些高度。他們有0高度。

來源

2014-02-26 10:27:19 slynagh

背景顏色不適用於z索引元素

回答

相關問題