HTML和CSS | 邊框會忽略z-index
[英]HTML & CSS | Border ignores z-index
問題描述
我創建了一個小練習頁面。 我遇到了這個小問題，標題中心有一個牛頭圖像（id： #logoCenter ）。
我嘗試將其放在所有內容的頂部，但是邊框位於其頂部，即使圖像#logoCenter的z-index為100 ，邊框的z-index 10 ？ 我很困惑，希望有人能幫我解決這個小問題。
/* - - - Header - - - - - - - - - - - - - - - - - - - - - - */ .content { margin: 0 auto; padding-top:120px; padding-bottom: 90px; transition: 0.3s; } .center{ width: 50%; margin: 0 auto; } .centerText{ width: 50%; margin: 0 auto; } #headerContainer { position: relative; padding: 0; margin: 0; } #headerMainContainer { position: fixed; z-index: 10; height: 65px; background-color: white; padding: 0; margin: 0; width: 100%; font-size: 22px; } #logoCenter { width: 120px; z-index: 100; } #transparentBorder { height: 72px; z-index: 10; width: 100%; border-bottom: 15px solid rgba(0,0,0, 0.78); border-radius: 0 0 100px 100px; padding: 0; margin: 0; position: fixed; } .header { position: absolute; } #headerLeft { } #headerCenter { } #headerRight { } .headerTitle { margin-top: 20px; font-size: 20px; overflow: visible; } .FooterTitle { margin: 0px; padding: 10px; } .FooterContainer{ color: white; text-align: center; padding-top: 10px; background-color: black; width: 100%; bottom: 0px; padding-bottom: 10px; } .FooterButton{ color: #d4d4d4; font-size: 20px; text-decoration: none; margin-left: 20px; } .FooterButton:hover{ color: white; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="col-xs-12" id="headerMainContainer"> <div class="col-xs-12 header" id="headerContainer"> <div id="headerLeft" class="header col-xs-3 col-xs-offset-0"> <center><h3>Left</h3></center> </div> <div id="headerCenter" class="header col-xs-6 col-xs-offset-3"> <center><img id="logoCenter" src="https://previews.123rf.com/images/miceking/miceking1506/miceking150600220/40800271-Silhouette-Bull-Head-Stock-Vector-bull.jpg"></center> </div> <div id="headerRight" class="header col-xs-3 col-xs-offset-9"> <center><h3>Right</h3></center> </div> </div> </div> <div id="transparentBorder"></div> <div class="col-xs-12 content"> <center><h4>Welcome!</h4></center> <pre> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </pre> </div> <nav class="navbar navbar-fixed-bottom"> <div class="FooterContainer"> <h3 class="FooterTitle">© 2017 Edward Black</h3> </div> </nav> <script src='http://localhost/rat/public/js/main.js'></script> <script src='http://localhost/rat/public/js/partials/sidenav.js'></script></body>
注意：關於stackoverflow的示例已損壞（似乎SO無法處理引導程序），請改為檢出jsfiddle 。
1 個解決方案
解決方案1
2 已采納 2017-08-01 21:54:22
解
- 添加
position:relative對於#logoCenter類； - 移動
<div id="transparentBorder"></div>，使其位於帶有headerContainerID的div之前
為什么有效
z-index只是更改前景和背景中哪些元素的一種方法。 盡管由於z-index您的元素應該位於頂部，但是這里還有其他一些因素在起作用。
transparentBorder具有position:fixed的樣式。 具有這種位置樣式的元素通常會出現在其他元素的頂部-請參閱z-index不適用於固定位置 。
為了確保我們的圖像始終顯示在頂部，我們給它一種position:relative樣式。 這意味着它有一個位置風格，但實際上並不會改變它的位置，除非我們提供left和right的風格給它（我們不會）。
但是，您的圖像仍不會出現在頂部。 這是因為HTML中更靠下的元素出現在更靠上的元素之上。 通常， z-index或position處理此問題， position:fixed仍然勝過圖像上的兩個位置（這是最強的position屬性）。 因此，我們需要確保將行放置在HTML中的圖像之前。
HTML / CSS透明邊框縮進，z-index
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.