In the case of a dropdown menu we want the AP element to lay on top of other elements. But if you are using absolute positioning on something else like a logo then you need to protect other elements from being hidden by it. Usually a margin or padding will do the trick to push something away from the AP element. Generally speaking though, the only time you want to use absolute positioning is when something NEEDS to be removed from the flow so it does not push around on other in flow elements. That is why it is used for dropdowns, if we did not use AP on the dropdown it would push the rest of the page down.
1.) What does top: 100% mean and do?
2.) What does top: 0% mean and do?
3.) What does top: 0 mean and do?
These three all seem to do the same thing, which is properly display the dropdown submenu. :-/ top:100% sets the top of the AP box at the very bottom of the containing block.
top:0 and top:0% are the same thing “zero”, and that sets the top of the AP box at the top of the containing block.
4.) What does bottom: 100% mean and do?
5.) What does bottom: 0% mean and do?
6.) What does bottom: 0 mean and do?
These seem to do different things. bottom:100% behaves the same as top:0; you would think it might give the opposite behavior of top:100% but that is not the case. It sets the top of the AP box at the top of the containing block.
bottom:0 and bottom:0% are the same thing “zero”, and that sets the bottom of the AP box at the bottom of the containing block.
Here is an example of all of those conditions. The Parent divs are set with fluid heights and they are the “containing block” since position:relative; has been applied to them.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AP Elements</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
text-align:center;
}
h1,h2 {font-size:1.5em;margin:0}
h2{font-size:1.2em}
p {margin:1em;}
.wrap {
position:relative; /*establish containing block for AP children*/
width:400px;
display:inline-block;
vertical-align:top;
margin:20px 20px 100px;
background:#CDF;
}
.ap {
position:absolute;
padding:20px;
right:0;
top:0;
background:lime;
display:none;/*hide .ap div*/
}
.top-100 {
top:100%;/*override top:0*/
}
.bot-0 {
top:auto;/*null out top:0*/
bottom:0;
}
.bottom-100 {
top:auto;/*null out top:0*/
bottom:100%;
}
.wrap:hover .ap {display:block} /*reveal .ap div on :hover*/
</style>
</head>
<body>
<h1>Hover on Blue Parent Divs to show AP Child Divs</h1>
<div class="wrap">
<h2>AP Child has top:0</h2>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<div class="ap">
<p>AP with top:0</p>
</div>
</div>
<div class="wrap">
<h2>AP Child has top:100%</h2>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<div class="ap top-100">
<p>AP with top:100%</p>
</div>
</div>
<br>
<div class="wrap">
<h2>AP Child has bottom:0</h2>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<div class="ap bot-0">
<p>AP with bottom:0</p>
</div>
</div>
<div class="wrap">
<h2>AP Child has bottom:100%</h2>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<div class="ap bot-100%">
<p>AP with bottom:100%</p>
</div>
</div>
</body>
</html>
<div class="wrap">
<h2>AP Child has bottom:100%</h2>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<p>Parent with fluid height: Parent with fluid height</p>
<div class="ap [COLOR=Blue]bot-100[/COLOR]">
<p>AP with bottom:100%</p>
</div>
</div>
top:100% sets the top of the AP box at the very bottom of the containing block.
Not the most intuitive.
top:0 and top:0% are the same thing “zero”, and that sets the top of the AP box at the top of the containing block.
That makes sense.
bottom:100% behaves the same as top:0; you would think it might give the opposite behavior of top:100% but that is not the case. It sets the top of the AP box at the top of the containing block.
Who dreams up these conventions?!
bottom:0 and bottom:0% are the same thing “zero”, and that sets the bottom of the AP box at the bottom of the containing block.
That makes sense, although you might think it sets the Top of the AP box at the bottom of the containing block as well…
(*NOTE: One reason I was getting confused is that often I make a change in my code but my browser mysteriously caches the old page again and again and so when I load the changed code I see the effects of the old code and that throws me off. That was happening last night when I made this post.)
Sure it is, the offset values get their coordinates from the containing block’s dimensions. In that case it’s setting the top value according to the containing block’s calculated height. By using top:100% we are assured that the AP box will always find the containing block’s height, even when that height is dynamic.
[QUOTE]bottom:100% behaves the same as top:0; you would think it might give the opposite behavior of top:100% but that is not the case. It sets the top of the AP box at the top of the containing block.
Who dreams up these conventions?! [/QUOTE]You seem to have overlooked the correction in my last post.
Here is the example with the corrections posted above. http://www.css-lab.com/misc-test/ap-top-bot.html
EDIT:
I changed the width of the containing block’s to 40%.
Reduce your viewport width and that will cause their heights to increase. That shows you that top:100% is intuitive, it finds the parent height even when it is dynamic.
Yes, if there should be symmetry you’re right. But the whole point is that there is no symmetry. If top and bottom were truly symmetric, it wouldn’t make a lot of sense to have both, would it?
I always view it like this:
bottom: n = move the element n from the bottom of its parent
top: n = move the element n from the top of its parent
