하나의 요소를 다른 요소 위에 겹치게하는 방법

안녕하세요 저는 <hr> 라인을 페이지 전체에 걸쳐 펼쳐 놓았습니다.하지만 위의 이미지로 잘려나 간다고 생각합니다. 누구든지 <hr> 라인이 이미지를 겹치게 만들 수있는 방법을 알고 있습니까?하나의 요소를 다른 요소 위에 겹치게하는 방법

<img src=".\pncwelcome.png" 
    style="float:right; clear:right; margin-top:-40px;" 
    alt="PNC Welcome Logo"/> 
<hr color="black" 
    style="margin-top:30px;" />

출처

2013-05-28 Joe Engle

이 코드의 조각이다. 그것은 페이지 벗어나지 않습니다 .. –

jfiddle에서 스 니펫을 실행하면 괜찮아 보입니다. 오류를 재현하는 예제를 제공 할 수 있습니까? http://jsfiddle.net/p5PBn/ – MaX

Z- 색인을 사용하십시오. CSS에서는 hr을 높은 z- 인덱스 값으로 설정하면 이미지 위에 겹쳐서 표시됩니다. 또는 이미지를 떠 다니므로 시간을 띄우고 더 높은 z- 인덱스 을 설정하여 이미지와 여전히 겹칠 수 있습니다.

<hr>을 플로팅하는 경우 상위 요소의 너비를 설정해야합니다.

사용 :

<img src=".\pncwelcome.png" style="z-index: 1; float:right; clear:right; margin-top:-40px;" alt="PNC Welcome Logo"/> 
<hr color="black" style="z-index: 2; margin-top:30px;" />

이 나던 '대신 이것을 사용 해결할 경우

<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/> 
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" />

출처

2013-05-28 18:39:32

그 모양은 어떻습니까? –

예를 게시했습니다. –

파트너와 확인하겠습니다. 잠시 –

사용 position: absolute;. 이 같은

Check the fiddle.

뭔가 작동합니다.

CSS의 :

.parent { 
    position: relative; 
} 

img { 
    width: 200px; 
} 

hr { 
    position: absolute; 
    z-index: 50; 
    top: 30px; 
    right: 0; 
    left: 0; 
}

HTML :

<div class="parent"> 
    <hr> 
    <img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg"> 
</div>

출처

2013-05-28 18:47:23

하나의 요소를 다른 요소 위에 겹치게하는 방법

답변

관련 문제