Positionieren Sie ein HTML-Element relativ zu seinem Container mithilfe von CSS

Du hast Recht, dass CSS-Positionierung ist der Weg zu gehen. Hier ein schneller Durchlauf unten:

position: relative layout wird ein element relativ zu selbst. In anderen Worten, die Elemente gelegt, die im normalen Ablauf, dann ist es entfernt von der normalen Ablauf-und offset-von was auch immer Werte, die Sie angegeben haben (oben, rechts, unten, Links). Es ist wichtig zu beachten, dass, weil es entfernt von der Strömung, andere Elemente um ihn herum nicht verschieben (mit negativen Margen statt, wenn Sie möchten dieses Verhalten).

Jedoch, sind Sie wahrscheinlich daran interessiert position: absolute die position eines Elements relativ zu einem container. Standardmäßig ist der container aus dem browser-Fenster, aber wenn Sie ein übergeordnetes element entweder hat position: relative oder position: absolute drauf ist, dann wird es fungiert als Muttergesellschaft für die Positionierung Koordinaten für seine Kinder.

Demonstrieren:

<div id="container">
   <div id="box"> </div>
</div>

#container {
  position: relative;
}

#box {
  position: absolute;
  top: 100px;
  left: 50px;
}

In diesem Beispiel ist die Obere linke Ecke des #box wäre 100px nach unten und 50 Pixel Links von der linken oberen Ecke der #container. Wenn #container nicht position: relative setzen, werden die Koordinaten des #box wäre relativ zur oberen linken Ecke des browser-Ansicht-port.

Hoffe, das hilft.

InformationsquelleAutor der Antwort Bryan M.

Ich weiß, ich bin spät dran, aber hoffe, das hilft.

Folgenden sind die Werte für die position-Eigenschaft.

• statische
• festen
• relative
• absolute

position : static

Dies ist die Standardeinstellung. Es bedeutet, das element wird bei auftreten einer position, die es normalerweise tun würde.

#myelem {
    position : static;
}

position : fixed

Damit wird die position eines Elements in Bezug auf das Browserfenster (viewport). Ein fest positioniertes element bleibt in seiner position, auch wenn die Seite scrollt.

(Ideal, wenn Sie wollen, scroll-to-top-button in der unteren rechten Ecke der Seite).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

position : relative

Platz für ein element an eine neue Position relativ zu seiner ursprünglichen position.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

Den obigen CSS verschieben Sie den #myelem element 30px nach Links und 30px von der Spitze der den tatsächlichen Speicherort.

position : absolute

Wenn wir wollen, dass ein element platziert werden um eine exakte position auf der Seite.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

Den oben genannten CSS position #myelem element an einer position 30px von oben und 300px von der linken in die Seite und scrollt mit der Seite.

Und schließlich...

position relative + absolute

Können wir die position-Eigenschaft des übergeordneten Elements zu relative und legen Sie dann die position-Eigenschaft für das untergeordnete element, für absolute. Auf diese Weise können wir die position des Kindes in relation zum übergeordneten Element an eine absolute position.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Finden wir in dem Bild oben die #div-2 element ist positioniert in der oberen rechten Ecke im inneren des #container element.

GitHub: finden Sie den HTML-von dem Bild oben hier und CSS -hier.

Hoffe, das tutorial hilft.

InformationsquelleAutor der Antwort yusufshakeel

Wenn Sie brauchen, um die position eines Elements relativ zu dem enthaltenden element zuerst müssen Sie position: relative auf das container-element. Das untergeordnete element, das Sie wollen, um die position relativ zum übergeordneten hat position: absolute. Die Art und Weise, dass absolute Positionierung funktioniert, ist, dass es gemacht wird relativ zu der ersten relativ (oder absolut) positionierten Eltern-element. In Fall gibt es keine relativ positioniert Elternteil, das element wird relativ positioniert, um die root-element (direkt auf das HTML-element).

Also, wenn Sie wollen position Ihre Kind-element nach oben Links auf den übergeordneten container, das sollten Sie tun:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Wird Ihnen von großem nutzen Lesen dieser Artikel. Hoffe, das hilft!

InformationsquelleAutor der Antwort Nesha Zoric