Tutorials
How to absolute position an object relative to the inside of a center aligned container.
Putting in the image
Our goal is to absolute position our image 200 pixels from the left border of our div wrapper and 30 pixels from the top border of our div wrapper. It will hover over any content beneath it.
We start off by simply placing the image in our div wrapper as follows:
<body>
<div id="wrapper">
<img src="sample.gif" height="50" width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>
It is important that we place our image tag first inside the div wrapper, before any of the page's other content.
Now we absolute position our image so that it does not take up space on our page. This should place our image in the upper left hand corner of our div wrapper, on top of our content. The CSS for this looks as follows:
<body>
<div id="wrapper">
<img src="sample.gif" style="position:absolute" height="50"
width="100" alt="our img" />
This text is sample content that we want to start in the upper
left hand corner of our site, behind any absolute positioned
elements.
</div>
</body>
Final position >>
1 2 3 4