Menu
I ask this question because yesterday I had to style several divs as it's shown in this JSFiddle example.
The tricky part for me was to position <div id="content-container"> right from the <div id="vertical-menu"> but keep them top-aligned. Also I wanted the borders of <div id="content-container"> to go outside it's parent div. So after some research (I'm CSS beginner) I found out that absolute positioning may be the answer for all my questions. So indeed, as you may see I added position: absolute to my <div id="content-container"> and along with the other styling I got what I want.
However from what I've read about absolute positioning I left with the impression that I need a parent with relative positioning and if such is not found I'll end up with <html> as my parent element which for me means that the element with the absolute positioning will be positioned at the very top-left of the page. But as the example shows, even though my parent element, nor any other element has relative positioning I still get my element in the flow.
So what really happening? Why in this case my absolute positioned element doesn't get outside the normal flow? I think, it's correct to say that it's interacting with static positioned element so is there any similar behavior between absolute positioned elements inside static and relative parent elements. And also - could it be there some unexpected behavior - I ask this because I use this in my real world scenario and I'm satisfied with the result even when my parent is with the default static positioning but I wonder if this is just e lucky coincidence or just the absolute elements behave similar when they are inside either static or relative parents?
255
You did not specify any of top, bottom, left or right for your absolutely positioned element, so it remains in the static position and doesn't go anywhere.
This happens regardless of whether your element is in another positioned element or not, and is completely by design; see my answer to this question for an explanation from the CSS2.1 spec.
I see in your fiddle you're trying to float your absolutely-positioned element; that will not work. Once you absolutely position an element, it cannot float:
The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:
If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
Removing the position: absolute declaration alone will cause your element to reposition itself because it's now floating (it's actually being pushed down by #vertical-menu because there's not enough room), and once you remove the float: left declaration as well, it returns to its usual, static position.
Note also that when you absolutely position the element it is still taken out of the normal flow. If you tried to add content directly after <div id="content-container">...</div> you'll see that extra content appearing in the same spot instead of being pushed down.
190
position
position: static is default, and places the elements in order, one after another, according to their display property. There's little practical purpose on manually setting an element to static.position: relative works much like static, however the elements inside a relative parent have their top, left, bottom and right values relative to the first non-static parent. This can be seen when you get the offset position of an element via JavaScript, or set it with either CSS or JavaScript.position: absolute makes the element be placed relative to <html> or the first relatively or absolutely positioned parent element. This means its position should be set with top, left, bottom, right CSS properties, that are counted starting from the first relative or absolute ancestor element.Your mistake was not setting top nor left CSS properties to the <div>. Hope this little explanation lit you up! Best of luck.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With