的z-index不會工作位置

我試圖做到這一點的erf_fromto將具有較高的z-index比left_side，導致left_side確實有邊界，而我希望erf_fromto是越過邊境。的z-index不會工作位置

這就是它現在的樣子，而我想erf_fromto超過了線路。

<body class="parent" ng-app="myApp"> 
    <div class="left_side child"></div> 
    <div class="right_side"> 
    <div class="erf_block" style="position:relative;"> 
      <div class="erf_fromto">2011 - 2012</div> 
     </div> 
    </div> 

    </body>

CSS：

.left_side { 
    width:35%; 
    float:left; 
    border-right: 3px solid #F6F6F6; 
} 

.parent { 
    overflow: hidden; 
    position: relative; 
} 


.child { 
    height: 100%; 
    position: absolute; 
} 


.erf_fromto { 
    position: absolute; 
    left: -122px; 
    border: 2px solid #F6F6F6; 
    padding: 5px; 
    font-weight: bold; 
    box-shadow: 0px 0px 2px #F6F6F6; 
    font-size: 15px; 
    z-index: 99; 
    overflow: hidden; 
}

codepen：http://codepen.io/anon/pen/XjzwdN

來源

2016-10-04 maria

z-index適用於元素，它是孩子。由於.erf_fromto嵌套在.erf_block內，它位於.right_side之內，因此您需要確保它的.right_side的z-index的值高於.left_side的值！

從MDN：

的z索引屬性指定的元素，及其後代的z順序。當元素重疊時，z順序決定哪一個覆蓋另一個。具有較大z-索引的元素通常覆蓋具有較低元素的元素。

來源

2016-10-04 19:39:02

那麼整個右側需要更高的zindex？不可能只做元素？:) – maria

也許有這樣一個去吧：http://codepen.io/cam5/pen/RGjOwo 我已經把'.left_side'＆'.right_side'設爲50 ％的一半，並用'.erf_block'和'.parent'完成了'相對'''絕對'定位技巧，以防止其他塊的流動中斷。（我也在此筆中將'.erf_block'設置爲'.left_side'和'.right_side'的兄弟。）沒有z-index需要這種方式。但是，如果我的原始答案澄清了您的原始問題，請將其標記爲已接受！ :) –

我試圖在右側（位置相對）z-index 2，左側z-index 1，但該塊不會覆蓋該元素。怎麼來的？ – maria

如果你也把一個位置：相對;和z-index：0;到.left_side孩子它將工作

來源

2016-10-04 19:26:33

班的孩子確實有絕對的。 – maria

瑪麗亞，

如果添加背景left_side和erf_fromto，你會看到他們在正確的位置。

我想你只需要在你的erf_fromto類添加背景屬性：

.erf_fromto { 
    ... 
    background: white; 
    ... 
}

我希望它可以幫助...

祝您好運！

來源

2016-10-04 20:40:56

的z-index不會工作位置

回答

相關問題