親のアウトラインをカバーする子を停止しますか？

Question

スライドショーの中にいくつかの要素があるため、境界線ではなくマイナスオフセットでアウトラインを使用しています。

しかし、子要素はアウトラインをカバーしていますが、その上に境界線が必要です。私はコンテンツをフレームに使用しています。

http://jsfiddle.net/z22kw2zq/1/

.parent { 
position:relative; outline: green 3px solid; 
    outline-offset:0px; 
background-color:pink; 
pading:5px; 
overflow:hidden; 
} 
.child {position:relative; top:26px; background-color:yellow; 
display:inline; 
} 

Answer 1

アウトラインには:after疑似要素を使用し、position: absoluteを追加できます。

.parent { 
 
    position: relative; 
 
    background-color: pink; 
 
    overflow: hidden; 
 
} 
 
.parent:after { 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ''; 
 
    outline: green 3px solid; 
 
    outline-offset: -3px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.child { 
 
    position: relative; 
 
    top: 23px; 
 
    background-color: yellow; 
 
    display: inline; 
 
} 
 
p { 
 
    margin: 0; 
 
}

<div class="parent"> 
 
    <div class="child">lorem ipsum doler sit amet</div> 
 
    <p>text here</p> 
 
</div>

Answer 2

z-indexを追加すると、あなたの問題を解決します：

.parent { 
    position:relative; outline: green 3px solid; 
    outline-offset: -3px; 
background-color:pink; 
pading:5px; 
overflow:hidden; 
z-index:999; 
} 
.child {position:relative; top:23px; background-color:yellow; 
display:inline; 
z-index:-1 
} 

のz-indexプロパティは、大きなスタック順序でelement.An要素のスタック順序を指定の前に常にありますスタックオーダーの低い要素。

注：zインデックスは、位置指定された要素（位置：絶対、位置：相対、または位置：固定）でのみ機能します。