Relative div inside an Absolute div

css, html

Solution

You would expect the `relative` div `d3` to maintain position relative to it's parent. See W3 Specification for Css for more information on how things should be positioned.

I emphasise should as there are quirks within individual browsers for the box model that may have an impact on this.

See the JSFiddle Here for a quick demo of this.

Problem

Consider The Following case, ``` <div id="d1" style="position:relative"> <div id="d2" style="position:absolute"> <div id="d3" style="position:absolute"> </div> </div> </div> ``` By Referring the Link, I Just confirmed that the `<div id="d3">` will be relative to the `<div id="d2">`. Even if we given position as absolute for `<div id="d2">`. Similarly what would it assumes when we place `<div>`s like below? (relative `<div>` inside a absolute `<div>`) ``` <div id="d1" style="position:relative"> <div id="d2" style="position:absolute"> <div id="d3" style="position:relative"> </div> </div> </div> ``` can anybody explain this.?

Original source

Related problems