HTML 왜이 두 요소가 서로 위에 직접 위치하지 않습니다?

Question

pre 텍스트 블록 위에 직접 다른 요소를 오버레이하기 위해 일부 HTML 코드를 작성하려고합니다. 문제는, 심지어 가장 간단한 예를 올바르게 정렬하지 않는 것입니다

...

<div style="position:relative"> 
<pre style="position:absolute"> 
hello 
</pre> 
    <div style="position:absolute"> 
    world 
    </div> 
</div> 

당신은 출력 here을 볼 수 있습니다.

div 요소는 pre 요소 위에 렌더링됩니다. 왜 이런 일이 일어나는 걸까요?

요소 배치에 대한 자세한 내용은 here입니다.

Answer 1

에 margin를 넣어 . 그 후에도 여전히 약간의 간격이 있습니다. 글꼴 때문입니다. 내보기에서. 부모 요소의 font-family을 상속하도록 font-family을 재정 의하여 요소가 완벽하게 정렬되었습니다. 또 다른 것은 (HTTPS를이 체크 아웃, 같은 반대의 효과를 대신 pre 태그 pre` 태그`의 여백에 대한 Btw는

pre{ 
 
margin:0px; 
 
font-family:inherit; 
 
}

<div style="position:relative"> 
 
<pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute"> 
 
    world 
 
    </div> 
 
</div>

Answer 2

실제로 div 요소는 pre 요소 위에 렌더링됩니다. 우리는 단지 그것을 볼 수 없습니다. "pre margin"때문에 시각화하기 위해 CSS의 border 속성을 추가했습니다.

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red;"> 
 
    world 
 
    </div> 
 
</div>

, 당신은 지금 어떤 css이를 조금 이동하고이처럼 원하는 것을 얻기 위해 추가 할 수 있습니다 말했다

! 도움이

<div style="position:relative"> 
 
    <pre style="position:absolute"> 
 
hello 
 
</pre> 
 
    <div style="position:absolute; border:1px solid red; top: 7px"> 
 
    world 
 
    </div> 
 
</div>

희망! 또한 pre 태그의 상단에 기본값이 margin 인 것을 알게되었습니다. 확인해보십시오!

이 Fiddle

그래서 그것을 제거 확인, 쉽게, 당신이 우선 0으로 여백을 설정해야하므로 pre 태그는 기본적으로 margin: 1em 0px;의 여유가 0 Fiddle