DIV 위치 절대 원인 사업부가

Question

나는 다음과 같은 스타일로 사업부를 숨길 수 후 다른 요소

#holder{ 
    margin-top: 1px; 
    background-color: #DCE1E5; 
    position:absolute; 
    left:0; 
    right:0; 
    display:block; 
    padding:8px; 
} 

내 문제를 내가이 div 태그 후 입력 요소가 예를

의 사업부 뒤에 숨겨져 있다는 것입니다

<div id="holder">My Stuff here of</div> 
<div id="somethingelse">This will be hidden behind the top div</div> 

어떻게 해결할 수 있고 IE7과 호환 되나요?

Answer 1

다음 div에서 절대 대신 position: relative;을 시도해야합니다.

Answer 2

이것은 색인 생성 문제입니다. Z-index 값을 다양한 요소에 할당하여이 동작을 무시할 수 있습니다. 그리고 forewarning, IE7은 "position"스타일의 모든 요소에 Z- 인덱스 값을 할당하므로 제대로 작동하려면 약간의 테스트가 필요할 수 있습니다. 일반적으로 올바르게 작동하려면 부모 요소에 Z- 색인을 할당해야합니다.

Answer 3

절대 요소에 대해 위쪽과 왼쪽을 지정해야합니다. somethingelse 요소가 holder 뒤에 있습니다.

#somethingelse을 보려면 배경색을 제거하거나 두 요소에 z- 색인을 지정하십시오. 그러면 두 요소가 겹쳐진 것을 볼 수 있습니다. 불투명도를 추가하거나 홀더 위치를 상대적으로 설정할 수도 있습니다.

Answer 4

#holder DIV를 "절대"위치로 변경하면 페이지의 일반적인 요소 흐름에서 벗어나게됩니다. 따라서 다른 모든 요소들이 그 대신에 떠돌아 다닙니다. 최종 목표에 따라 많은 해결책이있을 수 있습니다. 그러나 당신이 우리에게 주신 것과 마찬가지로, 당신은 위치를 "상대적"으로 변경함으로써 문제를 해결할 수 있습니다.

Answer 5

위치 : 절대;은 상자 모델에 정의 된 흐름에서 요소를 제거합니다. 홀더보다 작은 모든 요소는이 요소에 의해 숨겨집니다. 해결책은 위치를 사용하지 않아야합니다 : 절대; 이 경우에는을 입력해야합니다. 실제로이 작업을 통해 달성 할 수있는 것을 원하지 않는다는 것을 이해합니다.

나는 당신이 무엇 상자 모델을 이해하는 시간을 가지고하는 것이 좋습니다 것입니다 :

Answer 6

당신이 절대적 요소를 배치 http://www.w3.org/TR/CSS2/box.html, 그것은 일반 문서 흐름에서 제거하고 사용자가 지정한 지점에 배치됩니다. 다른 모든 항목은 문서의 정상적인 흐름을 계속 따르므로 일부 항목은 절대 위치 요소와 동일한 위치에 배치 될 수 있습니다.

이 문제를 해결하려면, 당신은 두 가지 방법 중 하나를 채택 할 수있다 :

하지 절대적 위치 #holder를 수행합니다. 이렇게하면 정상적인 문서 흐름을 유지하고 다른 요소와 잘 작동합니다.

또는

적절한 마진 #holder 멀리 다른 원소의 위치를 ​​제공한다.

Answer 7

IE7은 상대 위치 또는 절대 위치를 가진 모든 요소에 대해 z- 색인 특성을 설정해야합니다.

CSS

#holder{ 
position:absolute; 
left:0; 
right:0; 
display:block; 
padding:8px; 
margin-top: 1px; 
background-color: #DCE1E5; 
z-index: 1;} 

#somethingelse { 
position: relative; 
top: 40px; 
z-index: 1000; 

}

DEMO는 여기 : http://jsfiddle.net/B3jZ5/2/

Answer 8

하는 절대 위치를인지 요소 SOMETHINGELSE 위에서 추가.

가기 : #holder

또는 마진 상단의 높이 #holder의 높이 #holder 요소 플로트 같은 부유 경우 : 좌우;