Positionieren Sie ein div relativ zu einem anderen div, das nicht sein Elternteil ist, mit CSS

Question

Ich bin mir der position:relative und position:absolute Trick zu positionieren, ein div relativ zu seinem Elternteil zu positionieren. Aber was, wenn das Div nicht sein Elternteil ist und ich es relativ dazu positionieren möchte? Ich versuche etwas in diese Richtung zu implementieren.

Ich bin auch bewusst, position:fixed zu einem div zu beheben, aber ich baue eine responsive Website, und ich möchte das vermeiden. Ich habe hier eine Frage gefunden, die erwähnt, jQuery zu verwenden: How to position one element relative to another with jQuery? Ist jQuery der einzige Weg, es zu tun? Kann es auch mit CSS gemacht werden?

Ich habe hier eine Geige aufgestellt: http://jsfiddle.net/19bdpgsf/. In der Geige versuche ich, das child2 Element relativ zu dem notparentdiv zu positionieren, so wie es relativ zu dem parent div positioniert wurde. Ist es möglich, nur CSS zu verwenden?

Danke.

Answer 1

Sie könnten die absolute Positionierung (relativ zum gesamten Text der Seite) verwenden, aber ansonsten glaube ich nicht, dass es einen anderen Weg als jQuery gibt.

Answer 2

Eine andere Möglichkeit, wenn Sie nicht wollen CSS Positionen verwenden, verwenden jquery wie unten versetzt Sie auf Position div

var nonparent = $('.notParent'); 
 
var position = nonparent.offset(); 
 
$('.child1').offset({ 
 
    top: position.top, 
 
    left: position.left 
 
});

.notParent { 
 
    background-color: red; 
 
    padding: 20px; 
 
} 
 
.child2 { 
 
    background-color: yellow; 
 
} 
 
.child1 { 
 
    background-color: green; 
 
} 
 
.parent { 
 
    background-color: purple; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="notParent"> 
 
    not parent div 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="parent"> 
 
    parent 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>

Sie können ein div in einem anderen div positionieren, die als nicht Elternteil mit absoluten relativen Positionen ist unter

.notParent { 
 
    background-color: red; 
 
    position: relative; 
 
} 
 
.child2 { 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 10px; 
 
} 
 
.child1 { 
 
    background-color: green; 
 
    top: 30px; 
 
} 
 
.parent { 
 
    background-color: purple; 
 
}

<div class="notParent"> 
 
    not parent div 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div class="parent"> 
 
    parent 
 
    <div class="child1">child1</div> 
 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>