Posizionare un div relativo a un altro div che non è il suo genitore usando CSS

Question

Sono a conoscenza del trucco position:relative e position:absolute per posizionare un div relativo al suo genitore. Ma cosa succede se il div non è suo genitore e io voglio posizionarlo rispetto a quello? Sto cercando di implementare qualcosa in questo senso.

Sono anche a conoscenza di position:fixed per correggere un div ma sto costruendo un sito Web reattivo e vorrei evitarlo. Ho trovato una domanda qui che menziona usando jQuery per farlo: How to position one element relative to another with jQuery? jQuery è l'unico modo per farlo? Può essere fatto usando anche i CSS?

Ho alzato un violino qui: http://jsfiddle.net/19bdpgsf/. Nel violino, sto cercando di posizionare l'elemento child2 relativo allo notparentdiv proprio come è stato posizionato rispetto al div parent. È possibile utilizzare solo css?

Grazie.

Answer 1

È possibile utilizzare il posizionamento assoluto (relativo all'intero corpo della pagina), ma a parte questo non credo ci sia un altro modo rispetto a jQuery.

Answer 2

Un altro modo se non volete usare posizioni css usano compensate jQuery, come di seguito per posizionare voi 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>

È possibile posizionare un div all'interno di un altro div che non è genitore con posizioni relative assoluti sotto

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