레이어 (특히 그림자)의 순서를 지정하려면 어떻게합니까?

빨간 부분의 그림자가 흰색 부분과 겹치지 않게하고 싶습니다. 그 반대도 마찬가지입니다.레이어 (특히 그림자)의 순서를 지정하려면 어떻게합니까?

Screencap of issue

적용 CSS는 : 경우

#container { (the white part) 
    width: 960px; 
    margin: 0 auto 24px auto; 
    background: #FFFAFA; /*background: url(images/grid.png) center top no-repeat;*/ 
    box-shadow: 0px 5px 45px #343434; 
} 

#banner { (the red part) 
    background: -moz-linear-gradient(top, #BC4E4C 0%, #9E403F 100%); 
    background: -webkit-linear-gradient(top, #BC4E4C 0%, #9E403F 100%); 
    height: 40px; 
    width: 100%; 
    box-shadow: 0px 10px 10px #343434; 
    border-bottom: 1px solid #612525; 
}

그것은 중요 년대 HTML의 주요 내용 전 배너의가. 감사!

출처

2011-08-17 Benjin

HTML은 과소 평가 기능을 가지고 있기 때문에 영어로 설명하는 대신 관련 HTML 코드를 붙여 넣는 것이 좋습니다.) – BoltClock

to #banner을 추가하면됩니다. 새 "stacking context"이 생성됩니다.

그냥 안전을 위해 : 당신은 또한 그림자처럼 상단에 표시 될 것입니다 귀하의 질문에 포함되지 않은 다른 요소가있는 경우 수도도 z-index: a number이 필요합니다.

출처

2011-08-17 01:15:39 thirtydot

레이어 순서를 설정하는 방법은 무엇입니까? – Dani

'z-index'는'static'의 초기 값에서'position'을 변경하지 않으면 작동하지 않습니다 :'position : relative'가 필요합니다. 다른 어떤 것도'z-index'를 사용하지 않으면 무언가를 맨 위에 표시되도록 명시 적으로'z-index '를 설정할 필요가 없습니다. – thirtydot

다른 방법으로 말하면 : 정적으로 배치 된 요소는 레이어가 아닙니다. – BoltClock

CSS 속성 z-index을 사용하십시오. z-index이 높을수록 요소가 앞에 있음을 의미합니다. 당신의 예에서

는

#container { 
    z-index: 1; 
} 
#banner { 
    z-index: 2; 
}

을 추가하고 작동합니다.

출처

2011-08-17 01:15:11 Dani

그들은 무엇이든 할 수있는 'position : static'외에 뭔가가 필요할 것입니다. – alex

레이어 (특히 그림자)의 순서를 지정하려면 어떻게합니까?

답변

관련 문제