How can I overlay div

**quota** · 20-05-2009

I am trying to create a mashup. Is there a way to overlay a div so that everything is contained in a main DIV which holds the background image.

For example you have a static web page. When a user goes onto a page a the background image applies to the "main" div. I want at the side of a button to show a div that contains a rss feed when the user click on a title of a post in the feed .

How can achieve this?

**Praetor** · 20-05-2009

You can set an absolute position, width, height and z-index to a div. Try adding:

position:relative;

to your css for #bgimage. Z-index won't work without it.

**fellah** · 20-05-2009

I can't explain how to overlay divs but I will just provide a small bit of code which might help you:

HTML Code:

<style>

HTML, BODY { height: 100%; }

div.pagewrapper { width: 100%; height: 100% overflow: auto; }
div.overlay {
position: absolute; left: 100px; top: 100px;
background: lightblue;
}

</style>

<body>

<div class='pagewrapper'>
Your content goes here, put enough in to make it scroll! Some of that Lorem Ipsum rubbish should do.
</div>

<div class='overlay'>This should stay where it is!</div>

</body>