Shoutbox

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:



...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?

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.

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

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.