停止孩子覆蓋父母大綱？

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索引屬性指定具有更大的堆疊順序的element.An元件的堆疊順序總是在前面堆棧順序較低的元素。注：z-index僅適用於定位元素（位置：絕對，位置：相對或位置：固定）。