Question

I am constructing a website based off of the Fluid 960 GS System. I want to overlay an image in the header so that it stays put relative to the header image without disrupting the header itself. If I use the following CSS, I get halfway there:

.imgFloat {
    position:absolute;
    left:400px;
    top:-2px;
    z-index:1;  
}

<div class="grid_16">
    <h1 id="branding">
        <a href=""><img src="img/logo.png" /></a>
        <img src="img/float.png" class="imgFloat" />
    </h1>
</div>

The only “issue” (not really since the CSS is doing what it is supposed to) with this code is that the image stays put rather than being staying x pixels away from the header image like I want.

If I change the position to relative, it breaks the size of the header and thus the layout of the header itself, but it will position the image like I want.

Is there a happy medium CSS “trick” that I can apply to achieve this result?

Thanks in advanced!

Answer 1

You just need to make sure that the absolute positioned element is inside the element you want it to be relative to. Then just add position: relative to that element and it should work.

So:

tag(position:relative)
  ag(position:absolute; left:2px)

Should work

I’m just guessing here since the code you’re showing is not detailed enough 😉

Update:

#branding {position:relative}

.imgFloat {
    position:absolute;
    left:400px;
    top:-2px;
    z-index:1;  
}