CODEWITHSUNDEEP
htmlcss
Joe Engle
Joe Engle

Reputation: 197

How to overlap one element over another

Hi i have an <hr> line stretching across the page, but I think it keeps getting cut off by an image above it. Does anyone know how I could make it so that the <hr> line overlaps the image?

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

Upvotes: 3

Views: 8684

Answers (3)

Chad Philip Johnson
Chad Philip Johnson

Reputation: 21

Building off of Savas's answer, as I experienced some rendering issues when the <img> was not also given absolute positioning...

Here is how one would create an <hr> with a graphical embellishment. The <div> is sized to the graphic being used and everything is treated like a single, spatially-defined unit on the page:

#example {
    display: block;
    position: relative;
    width: 100%;
    height: 92px;
}

#example hr {
    position: absolute;
    z-index: 0;
    top: 46px;
    bottom: 46px;
    margin: 0px;
    width: 100%;
    border: 5px solid #8fcbf1;
}

#example img {
    position: absolute;
    width: 272px;
    height: 92px;
    z-index: 5;
    left: calc(50% - 136px);
}

<div id="example">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
  <hr />
</div>

Here is the Fiddle: https://jsfiddle.net/z517fkjx/

Also, this uses calc() for centering, which is CSS3-only.

Upvotes: 1

Jonny Sooter
Jonny Sooter

Reputation: 2417

Use Z-index. In the css if you set the hr to a higher z-index value it will be layered over the image. Or since you're floating the image, float the hr too and then set a higher z-index on it so that it will still overlap the image.

If you float the <hr> you will have to set a width on the parent element.

Use:

<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;" />

If that doesnt' solve it use this instead:

<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%;" />

Upvotes: 2

Savas Vedova
Savas Vedova

Reputation: 5692

Use position: absolute;.

Check the fiddle.

Something like this should work.

The 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>

Upvotes: 5

Related Questions