Just needing clarification: W3Schools partially defines the CSS “top” property (not margin- or padding-top) thusly:
For absolutely positioned elements, the top property sets the top edge
of an element to a unit above/below the top edge of its containing
element.
NB: This is for “position:absolute” only.
I am confused by the “top edge of its containing element” part, because if I have the following structure (edited using the example on the “top” property provided by W3Schools):
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:0px;
}
.main { padding: 5px; border: 1px solid #000; }
.col { position: absolute; overflow: hidden; top: 0px; }
.container { padding: 10px; border: 1px solid #000; }
.container2 { padding: 10px; border: 1px solid #000; }
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="test">
<p>Test</p>
</div>
</div>
<div class="container2">
<div class="col">
<img src="logocss.gif" width="95" height="84" />
<h1>This is a heading</h1>
</div>
</div>
</body>
</html>
If its the “top edge of containing element” why is it that the image is at the top of the screen covering the “Test” text? I purposely nested two containing elements under the “main” , and to my mind the containing element would be “container2”.
If I take out the “col” CSS, the image is still at the top of the screen but the text is not.
Confused. :/
You need to give .container2 a position, try this:
.container2 { padding: 10px; border: 1px solid #000; position:relative; }