Positionieren Sie ein Element relativ zu einem anderen in CSS

Question

Ich möchte vier div s relativ zu einem anderen positionieren. Ich habe ein Rechteck div, und ich möchte 4 div s an seinen Ecken einfügen. Ich weiß, dass CSS ein Attribut "position:relative" hat, aber das ist relativ zu der normalen Position dieses Elements. Ich möchte meine div s nicht relativ zu ihrer normalen Position, sondern relativ zu einem anderen Element (dem Rechteck) positionieren. Was soll ich machen?

Answer 1

würde ich im Element absolute Positionierung empfehlen die Verwendung.

Ich habe diese JSfiddle erstellt, um Ihnen ein wenig zu visualisieren.

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute wird positionieren das Element durch Koordinaten, bezogen auf den am nächsten positionierten Vorfahren, das heißt die am nächsten Mutter der nicht position: static ist.

Lassen Sie Ihre vier Divs im Ziel-Div verschachteln, geben Sie das Ziel Div position: relative, und verwenden Sie position: absolute auf den anderen.

Struktur Ihre HTML ähnlich wie diese:

<div id="container"> 
    <div class="top left"></div> 
    <div class="top right"></div> 
    <div class="bottom left"></div> 
    <div class="bottom right"></div> 
</div> 

Und das CSS funktionieren sollte:

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...