остановить ребенка покрытие родительского контура?

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

Вы можете использовать псевдоэлемент и добавить 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-индекс работает только с расположенными элементами (положение: абсолютное, положение: относительное или положение: фиксированное).