Zインデックス文句を言わない作業位置

私はerf_fromtoは私がerf_fromtoが国境を越えてになりたいながらleft_sideは、国境を持っている原因となり、left_sideよりも高いz-indexを持っているであろうことを達成しようとしています。Zインデックス文句を言わない作業位置

これは現在のように見えますが、私は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は.right_sideの内側にある.erf_blockの内側にネストされていますので、.right_sideの方がよりも高いz-indexであることを確認してください。 MDNから

：

のz-indexプロパティは、要素とその子孫のz順序を指定します。要素が重なっているときは、どちらが他の要素をカバーしているかを判断します。より大きなz-インデックスを有する要素は、一般に、より低い要素をカバーする。

出典

2016-10-04 19:39:02

右辺全体に高級zindexが必要ですか？できない：要素を行うだけですか？:) – maria

多分このようなことがあります：http://codepen.io/cam5/pen/RGjOwo 私は '.left_side'と' .right_side'を50にしました'.erf_block'と' .parent'で 'relative' /' absolute'測位トリックを行い、他のブロックの流れを妨げないようにしました。（私は '.erf_block'をこのペンの' .left_side'と '.right_side'に兄弟として設定しています）この方法では、z-indexは必要ありません。私の元の回答で元の質問が明らかになった場合は、それを受け入れたものとしてマークしてください！ :) –

私は右側（位置相対）でZ-インデックス2を行い、左側でZ-インデックス1を試みましたが、ブロックはその要素をカバーしませんでした。どうして？ – maria

：相対; z-インデックス：0; .left_side子にはそれが働くでしょう

出典

2016-10-04 19:26:33

クラス子供は絶対持っています。 – maria

マリア、

あなたはleft_sideとerf_fromtoに背景を追加した場合、あなたは、彼らが正しい位置にある表示されます。

私はあなたがちょうどあなたのerf_fromtoクラスにbackgroundプロパティを追加する必要があると思う：

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

私はそれが役に立てば幸い...

グッドラック！

出典

2016-10-04 20:40:56

Zインデックス文句を言わない作業位置

答えて

関連する問題