Is it possible to place a hr element over an image? I was hoping to do with with z-index but I don't know how exactly. I want the hr line to go over the top of the img in div.rside

parts of css look like this:

.header hr {
 margin-top: 0px;
 z-index: 2;
}
.rside img {
    float: right;
    z-index: 1;
    border-style: solid;
    margin-right: 2em;
    padding: 1px;
}

extract of the html looks like this:

<body>

<div class="rside">
    <img src='frame2_fade.png' />
</div>
<div class="header">
    <h2>Header 2</h2>
    <h1>header 1</h1>
    <hr />
</div>

<div class="menu">

    <ul id="nav" class="nav1">

    <li><a href="home">home</a></li>
    <li><a href="abc">abc</a></li>
    <li><a href="def">def</a></li>
    <li><a href="hij">hij</a></li>

    </ul>
</div>

<div class="content">
    <h2>Another header 2</h2>
    <p>Content Content Content Content Content Content Content Content Content Content Content Content</p>

</div>
</body>

3 answers

2
points
This was chosen as the best answer

Z-Index only works on positioned elements (absolute, fixed or relative), (docs) so you should add position: relative; to both hr and image.

However, you also need to take into account the z-index of the div that contains the hr, because if you lower the image's z-index you'll get the entire div over the image and not just the hr. If you want just the ruler over the image you probably need to take it out of the div.

Answered almost 7 years ago by Diego Garcia Gangl
  • Does this mean I can't use float: right on the img too? aland almost 7 years ago
1
point

I wouldn't have used an hr but just set a border on the header div, and I would have added the image as a background to a page container, with appropriate padding to avoid text overflowing it.

using position absolute on the image means that it's out of the document flow and unable to affect anyother content around it, so it will also allow text to go over the top of it...

Answered almost 7 years ago by Tony Crockford
  • Interesting, I'll have to try that when I get home. My only concern is that the background-color of the header div would also flow over the img.. although I'm not sure how it would really work. aland almost 7 years ago
  • put the background color on the container, perhaps, or make the background color for he header, part of the background image on the container... Tony Crockford almost 7 years ago
aland 0
0
points

Well I didn't change the html, only made the css like this:

hr {
    border: thin solid black;
    margin-top: 0px;
    z-index: 2;
    position: relative;
}

.rside img {
    position: absolute;
    top: 1em;
    right: 2em;
    z-index: 1;
    border: none;
    margin-right: 2em;
    padding: 1px;
}

.rside {
    text-align: right;
}

Which is working as far as I can tell but if someone has a better solution I'm happy to hear it :D

Answered almost 7 years ago by aland