How exactly does absolute position element behaves inside a static parent
css, html
Solution
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.
Problem
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?