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?Positionieren Sie ein Element relativ zu einem anderen in CSS
27
A
Antwort
23
würde ich im Element absolute Positionierung empfehlen die Verwendung.
Ich habe diese JSfiddle erstellt, um Ihnen ein wenig zu visualisieren.
28
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;
}
...
Was ist, wenn Sie nicht sicher sind, die Details des übergeordneten Elements, sagen Sie, wenn der Bildschirm dynamisch ist – abhi
Nicht wirklich eine Antwort auf die Frage. –
@ AndreasL.Agreed. Ich denke, die Antwort ist einfach, dass Sie nicht können. Du musst dich mit etwas anderem hacken. – CptAJ