0

I'm studying CSS and as I learn, when an absolute element A inside relative element B, that A will be relative to B. I want to test the case absolute element inside absolute element but I don't see any differences.

Here is my test:

<div id="box-1">
    <div id="box-2"></div>
</div>

Absolute inside Relative

#box-1 {
    width: 200px;
    height: 200px;
    background: #000000;
    position: relative;
}

#box-2 {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background: #e2e2e2;
    position: absolute;
}

Absolute inside Absolute

#box-1 {
    width: 200px;
    height: 200px;
    background: #000000;
    position: absolute;
}

#box-2 {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background: #e2e2e2;
    position: absolute;
}

So. my question is: Are there any differences when an absolute element is inside other absolute element ? If not, why every examples that I have read always just mention the case absolute element inside other relative element ?

thanks :)

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Trần Kim Dự
  • 5,872
  • 12
  • 55
  • 107
  • you can test it yourself, here's a fiddle http://jsfiddle.net/jj3dbfha/1/ it looks like it behaves the same as absolute in relative – Abdul Ahmad May 01 '15 at 12:02
  • @AbdulAhmad No. my question is different. Did you read that post ? – Trần Kim Dự May 01 '15 at 12:12
  • @When someone downvote, please give reason ? – Trần Kim Dự May 01 '15 at 12:12
  • `first` I didn't down vote - `second` its not different, you asked basically the same question - `third` if you don't see any difference it must be similar, see the fiddle I posted. – Abdul Ahmad May 01 '15 at 12:13
  • As far as my knowledge about this, if we want to set a position of an element using `absolute` we must make a parent as `relative` because the child will use it's relative parent as its origin and its position is set relative to this parent not relative browser's width/hight. an `absolute` within `absolute` is always use the window area as parent so they with positioned themselves relative to window – Shah Rukh May 01 '15 at 12:16

1 Answers1

6

Positioning an absolute element in relation to an absolute parent is "absolutely" the same as with a relative parent. In fact it's also the same if the parent were fixed.

Basically you will always position an absolute element in relation with the closest parent with NO position:static (which is the position of all elements by default).

While learning the example most common is absolute inside relative because while you are making some basic html, the first element you need to be absolute won't be positioned (probably) as you wish till you set relative to the parent and that won't change the position of this parent at all (from static to relative shoudn't make any difference on any element).

Probably your next question you may find willing to do is "why not all the elements are set to position:relative by default if it won't change the flow of the html at all and then you save time not adding position:relative to so many classes?". Yes, I coudn't understand it either till some day I needed an absolute element to be positioned in relation to NOT the closest parent. (for example, a position of an absolute submenu on relation to the main-menu ul but not to his direct parent which would be a li). Hope it's clear enough

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57