CSS Positioning Help - Printable Version

CSS Positioning Help - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: CSS Positioning Help (/showthread.php?tid=82124)

CSS Positioning Help by Chris4 on 03-04-2008 at 11:56 PM

I've come across a problem when trying to code my website for college.

I've used CSS to position two horizontal lines, for example:

code:
div#hr1
{
position: absolute;
top: 35px;
}

and in the HTML it is simply..

code:
<div id="hr1">
<hr>
</div>

But the problem is they appear in front of the image, like this:

[Image: linesqt2.png]

...and I want them to be behind the image. Or bring the image in front.

I've tried changing absolute to static, relative or fixed as explained here, but doesn't fix it.

Any ideas?

RE: CSS Positioning Help by MeEtc on 03-05-2008 at 12:00 AM

put the code for the DIV higher in the code, and put the image in later. It has to do with layering and rendering order. the line is being rendered after the image, so its shown on top.

RE: CSS Positioning Help by -dt- on 03-05-2008 at 12:26 AM

quote:
Originally posted by MeEtc
put the code for the DIV higher in the code, and put the image in later. It has to do with layering and rendering order. the line is being rendered after the image, so its shown on top.

or just adjust the z-index in css

http://www.w3schools.com/css/pr_pos_z-index.asp

RE: CSS Positioning Help by Chris4 on 03-05-2008 at 01:02 AM

quote:
Originally posted by MeEtc

put the code for the DIV higher in the code, and put the image in later. It has to do with layering and rendering order. the line is being rendered after the image, so its shown on top.

Thank you that worked perfect

quote:
Originally posted by -dt-

or just adjust the z-index in css

http://www.w3schools.com/css/pr_pos_z-index.asp

Thanks -dt-, I'll keep that in mind.