Z- 상대 위치 지정 용 인덱스

저는 HTML을 초보자입니다. 나는 상대적으로 위치 된 요소들에 대해 z-index이 작동하는지 여부를 조사했고, 그것이 작동한다는 것을 발견했다.Z- 상대 위치 지정 용 인덱스

하지만 문제는 내가 쌓아 두지 않을 때입니다.

<style> 
.div0{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:1;} 
.div1{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:1;} 
.div2{position:relative;top:0px;left:0px;width:100%;height:auto;z-index:2;} 
</style> 
</head> 
<body> 
<div class="div0"> 
    <div class="div1">Text One</div> 
    <div class="div2">Text Two</div> 
</div> 
</body>

Fiddle

출처

2014-01-13 Ritesh kumar

누적 된 것은 무엇입니까? –

@ Mr.Alien Z- 인덱스 순서에서 두 텍스트가 겹치는 텍스트 –

'position : relative; top : 0px; left : 0px;'div의 위치에 차이가 나타나지 않음 – Zword

먼저 항상 auto 당신이 block 레벨 요소의 width로 width:100%; 및 height: auto; 필요하지 않습니다, 당신의 CSS를 리팩토링 할 수 있지만, 전체 수평 공간을 차지 height까지는 기본적으로 auto이므로 정의 할 필요가 없습니다.

둘째, 당신은 당신이 부정적으로 top 값을 정의해야합니다보다 position: relative;을 고수 할 경우, 대신 position: relative;의 자식 요소에 대한 position: absolute;을 사용하는 것이보다 서로에 div 스택하려는 경우.

.div2{ 
    position:relative; 
    left:0px; 
    z-index:2; 
    top: -15px; 
}

Demo 그러나 position: relative;이 요소의 위치를 변경 않도록해야하지만, 반면 position: absolute;는하지 않습니다, 흐름에 물리적으로 공간을 보유하고 있습니다. 당신이 당신의 자식 요소에 몇 가지 동일한 속성을 적용 할 경우

또한, 당신은 최고 & 왼쪽 속성 요소의 현재 X-y 위치에서 작동

.div0, .div1, .div2 { 
    /* Common properties here */ 
} 

.div2 { 
    /* Override common properties, or you can define unique ones as well. */ 
}

출처

2014-01-13 06:34:00

CSS 배치가 작동하는 방법에 대한 자세한 내용은 내 대답 [here] (http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on)을 참조하십시오. -each-other-instead-of) –

업데이트 .div1의 위치와 absolute에 .div2. 그것을 떠 나가 inline-block 또는 inline에 켜져있는 경우를 제외 모든

.div1{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:1;} 
.div2{position:absolute;top:0px;left:0px;width:100%;height:auto;z-index:2;}

출처

2014-01-13 06:32:21

절대적으로 수행 할 수 있지만 친척에 대해서? –

@Ishank Gupta Ritesh Kumar가 절대 위치를 묻습니다. – Haji

절대 위치 지정은 이러한 구현에 가장 적합합니다. 상대 위치를 사용하여 구현하려면 다른 div와 겹치도록 요소를 이동해야합니다. –

상대 위치 요소를 선택기를 사용할 수 있습니다. 이 경우 div1보다 div2를 쌓아 가기 위해 음의 상단을 사용할 수 있습니다.

출처

2014-01-13 06:37:00

Z- 상대 위치 지정 용 인덱스

답변

관련 문제