자녀가 부모 개요를 보지 못하도록 하시겠습니까?

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- 색인은 위치가 지정된 요소 (위치 : 절대, 위치 : 상대 또는 위치 : 고정)에서만 작동합니다.