如果元素在容器之外，是否可以相对于容器进行绝对定位？

Question

Lets say you have two divs:

<div class="div1"></div>
<div class="div2"></div>

div1 has relative positioning and div2 has absolute positioning. Can div2 be positioned as if it was inside div1 either using CSS or pure Javascript?

Answer 1

Using JavaScript.

You have to wrap divs inside parent container with position: absolute and set div2 position to absolute as well.

<div class="wrap">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

And then using javascript:

var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");

div2.style.left = div1.offsetLeft + 'px';
div2.style.top = div1.offsetTop + 'px';

See JS fiddle

Answer 2

Maybe this fits your question? http://jsfiddle.net/bghxmm3o/

Absolute div2 (blue) positioned into relative div1 (red).

It's just CSS:

#d1 {
    position:relative;
    top:10px;
    left:10px;
    width:200px;
    height:200px;
    background:red;
}
#d2 {
    position:absolute;
    top:100px;
    left:50px;
    width:20px;
    height:20px;
    background:blue;
}

Answer 3

Yes and no, it depends on how you build it and the surrounding HTML. If you put this code directly inside the body then yes, because the body would then be the parent element of both .div1 and .div2. And if you didn't know it already positioning something absolute positions the element to the top left corner of the "closest" relative positioned parent element. (Hard to explain in text)

But if you were to have other HTML outside these two div elements, then you would need a parent element with a position relative.

So as an example:

HTML

<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

CSS

.parent {
    float:left;
    position:relative;
}

.box1 {
    width:100px;
    height:100px;
    float:left;
    position:relative;
}

.box2 {
    width:100px;
    height:100px;
    position:absolute;
}