4

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?

Leron
  • 9,546
  • 35
  • 156
  • 257
  • Absoulte positioning shouldn't be used in this scenario. – Patryk Ziemkowski Nov 17 '13 at 17:52
  • Maybe. As I said it's just result of my research as a CSS beginner. What do you see as a better approach, especially when I need to go outside the parent div which gave me the most headache? – Leron Nov 17 '13 at 17:54
  • I am not sure what you are trying to achive, but you can use negative margins to move something out of its initial position. http://jsfiddle.net/ziemniak1990/tpRf9/ – Patryk Ziemkowski Nov 17 '13 at 17:57
  • Minor point of detail. If an absolute positioned element doesn't have a positioned ancestor, it's top, left, bottom, right properties are relative to the `initial containing block` not the `html` element. This matters for bottom (by default, the height of the initial containing block is different from that of the html element) and also matters for the other properties if the html element has its position or width changed from its defaults. (The latter case doesn't happen often, but it can be done.) – Alohci Nov 18 '13 at 01:00

2 Answers2

10

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:

  1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.

  2. 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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Well, I'm really confused right now. In fact I did not only remove the `float` but I remove all CSS from that class and I still get the desired result. Why does my `
    ` did not get pushed down by `
    `?
     – Leron Nov 17 '13 at 18:20
  • Frankly it's quite unclear to me how having `float: left` or not causes it to change position given your layout, but I was thinking it happens because `#vertical-menu` is floating. – BoltClock Nov 17 '13 at 18:25
4

CSS 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.

gchiconi
  • 624
  • 1
  • 7
  • 17