One hurdle I have yet to conquer is the the onclick drop down menu, which I know I will need to master for small/mobile layouts. While looking for a pure CSS version I came across some code that I did not fully understand. To dissect it I copied it into notepad and began to comb through it line by line.
The first thing I noticed that through me off was a series of nested divs (parent/child? I still have to get up on this terminology!):
- Div #1: Normal, no positioning
- Div #2 (inside Div #1): Relative Positioning assigned
- Div #3 (inside Div #2): Absolute Positioning assigned
I was soooo confused, how could this be? How could an absolutely positioned element be housed inside a div like this, won’t it just break out to its proper position? Before I go too far, lets first explain what absolute and relative position is.
Absolute {position: absolute; top: 10px; left: 20px;}: What this code means is that the element will absolutely be positioned 10px down from the top and 20px from the left. No ifs, ifs, and or buts, this is where it is going to be. You could wrap the element in another div, put text before or after it, an image before or after, etc., but it all doesn’t matter. Absolute positioning means no matter what this is the defined location for this element on the page. It’s not going to move down or left to right when you scroll or resize the screen, nor will it respect any margins you set in the via the body tag. Absolute means absolute!
Relative {position: relative; top: 10px; left: 20px;}: Relative means the element will be placed relative to where it is supposed to be, in the case it would be 10px down and 20px to the left of its normal position.
Let’s compare, suppose your CSS is the following:
CSS:
body {margin-left: 20px; margin-top: 10px; background-color: #fff;}
.abs {position: absolute; top: 5px; left: 10px; border: 1px solid red;}
.rel {position: relative; top:5px; left: 10px; border: 1px solid blue;}
HTML:
<div class=”abs”>Jason Learns Absolute Positioning</div>
<div class=”rel”>Jason Learns Relative Positioning</div>
So what happens? The red .abs div will be positioned at 5px from the top and 10px from the left, it disregards the body’s margin values. The blue .rel div normally would be 20px from the left and 10px from the top, but with the relative tag it means it will move relative to that position. So it would be (10+5) 15px from the top and (10+20) 30px from the left.
Whew! That’s a lot! I hope you got all of that.
So you see now? Back to our original problem. How can the coder put a div that is absolutely positioned inside another div? Won’t the element just break out the div and position itself on the page based on its top/left coordinates?
After coding an example for myself I discovered the answer to that question is ‘NO!’ – not when the outer (parent) div is relatively positioned! Remember the example from above:
- Div #1: Normal, no positioning
- Div #2 (inside Div #1): Relative Positioning assigned
- Div #3 (inside Div #2): Absolute Positioning assigned
When you place an absolutely positioned div (or any other element) inside a relatively positioned one, the absolute will measure its coordinates from the top left corner of the relative div (not the top left corner of the browser window like it normally would).
Hopefully this will help you out like it has helped me to understand.