I have a div with a 1px top border. Immediately above this div is an image of some text which is the same colour as the div below. This is what I am trying to achieve: alt text

...and this is what I currently have:

alt text

I would like for the text to overlap the border, and 'conect' to the div below.

My idea was to give the image a -1px bottom margin, and set a z-index to place it above the border below, but this does not seem to be working.

This is the simplified HTML for the section:

<div>
<section>
<h2 class="bloghead">Log</h2>
</section>
</div>

<div id="blogwrap">
This div has a 1px top border
</div>

and this is the relevant CSS:

#blogwrap {
    margin: 0;
    width: 100%;
    clear:both;
    overflow:hidden;
    background: #b6b6b6;
    border-top: solid 1px #fff;
    position:relative;
    z-index:0;
}
    h2.bloghead {
        clear:both;
        width:100%;
        margin:0 0 -1px 0;
        text-indent:-999px;
        background:url(../images/log.png) no-repeat left top;
    }

Hopefully this makes sense -- can anybody help?

2 answers

2
points
This was chosen as the best answer

Suck the #blogwrap upwards with an margin top of -1px:

#blogwrap {margin: -1px 0 0 0;}

Or use relative positioning:

#blogwrap {
position: relative;
top: -1px;
z-index: 1;
}

h2.bloghead {
position: relative;
z-index: 5;
}

Variant:

 h2.bloghead {
    position: relative;
    top: 1px;
    z-index: 5;
 }
Answered about 7 years ago by Jens Hedqvist
0
points

Thanks for the reply, but it is not the positioning that is the problem, rather the order.

I have the elements positioned correctly with a 1px overlap, but the div border appears on top of the image.

I guessed this was fixable using z-index, but this does not seem to have made a difference.

UPDATE: oops, I tested your reply and didn't add the z-index property to the h2 element.

This now works exactly as I wanted, thanks!

Answered about 7 years ago by Andrew Appleton