내가 여기 발견 CSS의 그림자 기법을 사용하고 다른 요소에 걸쳐 누워되지 후 : 그것은 이전과 이후 사이비 클래스를 사용CSS는 사이비 클래스 :: 전 :: 그림자가
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
을, 당신의 그림자에 더 많은 모양을 제공합니다. 문제는 다른 요소 위에 그림자를 표시 할 수 없다는 것입니다.
여기 jsfiddle이다 I 다른 Z-인덱스 된 div의 다양한 상대적인 위치를 시도 http://jsfiddle.net/S7dzj/6/
. 상단 div 내에있는 헤더 요소를 이동하려고 시도했지만 도움이되지 않습니다. 위로 이동 div top: -5px헤더 div 아래로 이동하지만 그림자는 여전히 보이지 않도록했습니다.
이 방법이 있습니까?
z-index 속성은 position: static없는 요소에 적용됩니다, 그래서 당신의 .top 클래스는 단지 해당 속성을 무시했다.
.header과 .top 클래스는 모두 z-index이며 머리글이 맨 위에 표시되었습니다.
See the updated jsFiddle. 내가 한 모든
는.top에 (시각 자체에 아무것도하지 않는)
position: relative를 추가했고 그것이
-2-
z-index의 변경합니다.
그림자가 .top과 겹치게하려면 animuson의 대답을 참조하십시오.
그렇지 않다면, 당신은 여백을 추가하는 경우, 당신은 그림자를 볼 줘야 http://jsfiddle.net/S7dzj/8/
.drop-shadow{
margin-bottom:10px;
}
를 참조하십시오.
질문은 * css psuedo class :: before :: after shadow를 놓고 다른 요소 위에 놓지 말고 어쨌든 감사드립니다. –
@Jakobud 하하, 당신 말이 맞아요.하지만 다음 요소 위에 놓여있는 그림자가 마음에 들지 않아 ... 그래서 그림자로 무엇을했을지 말하고 싶었습니다. 그리고 그림자가있는 솔루션을 게시하고 싶지만 animuson은 나보다 빠릅니다 ... – Oriol
빠른 후속 조치로, 'top' div에 비슷한 그림자를 추가하고 싶다면 어떻게해야합니까? http://jsfiddle.net/KRG3K/3/? 저 밑 그림자가 올바르게 보이도록하는 유일한 방법은'top'의'z-index'를 제거하는 것입니다.하지만 그것은 분명히 첫 번째 그림자를 숨 깁니다. 이견있는 사람? –
그 바이올린을 업데이트 : http://jsfiddle.net/KRG3K/4/ 당신이 내게 줄 수있는 도움을 주시면 감사하겠습니다. –
@Jakobud : [이 같은] (http://jsfiddle.net/b4rET/1/)? 기본적으로 긍정적 인 z- 인덱스를 사용하기 위해 그것을 뒤집 었습니다. 왜냐하면 네거티브 처리는 여러 요소를 연속적으로 사용하려고 할 때 상당히 문제가되기 때문입니다. – animuson