Positionieren Sie ein Element relativ zu seinem Container

Ich versuche, ein horizontales, zu 100% gestapeltes Balkendiagramm mit HTML und CSS zu erstellen. Ich möchte die Balken DIVsmit Hintergrundfarben und prozentualen Breiten erstellen, abhängig von den Werten, die ich grafisch darstellen möchte. Ich möchte auch Gitterlinien haben, um eine beliebige Position entlang des Diagramms zu markieren.

In meinen Experimenten habe ich die Balken bereits durch Zuweisen der CSS-Eigenschaft zum horizontalen Stapeln gebracht float: left. Ich möchte dies jedoch vermeiden, da es wirklich verwirrend mit dem Layout zu tun zu haben scheint. Außerdem scheinen die Gitterlinien nicht sehr gut zu funktionieren, wenn die Balken schweben.

Ich denke, dass die CSS-Positionierung in der Lage sein sollte, damit umzugehen, aber ich weiß noch nicht, wie ich das machen soll. Ich möchte in der Lage sein, die Position mehrerer Elemente relativ zur oberen linken Ecke ihres Containers anzugeben. Ich stoße regelmäßig auf diese Art von Problem (auch außerhalb dieses speziellen Grafikprojekts), daher möchte ich eine Methode, die:

1. Browserübergreifend (idealerweise ohne zu viele Browser-Hacks)
2. Läuft im Quirks-Modus
3. So klar / sauber wie möglich, um Anpassungen zu erleichtern
4. Wenn möglich ohne JavaScript.

Sie haben Recht, dass die CSS-Positionierung der richtige Weg ist. Hier ist ein kurzer Überblick:

position: relativelegt ein Element relativ zu sich selbst an. Mit anderen Worten, die Elemente werden im normalen Fluss angeordnet, dann aus dem normalen Fluss entfernt und um die von Ihnen angegebenen Werte (oben, rechts, unten, links) versetzt. Es ist wichtig zu beachten, dass andere Elemente um ihn herum nicht verschoben werden, da es aus dem Fluss entfernt wird (verwenden Sie stattdessen negative Ränder, wenn Sie dieses Verhalten wünschen).

Sie sind jedoch höchstwahrscheinlich daran interessiert, position: absolutewelches Element relativ zu einem Container positioniert wird. Standardmäßig ist der Container das Browserfenster. Wenn jedoch ein übergeordnetes Element vorhanden position: relativeoder position: absolutefestgelegt ist, fungiert es als übergeordnetes Element für die Positionierungskoordinaten für seine untergeordneten Elemente .

Demonstrieren:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

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

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

In diesem Beispiel wäre die obere linke Ecke von #box100 Pixel nach unten und 50 Pixel nach links von der oberen linken Ecke von #container. Wenn #containernicht position: relativefestgelegt, #boxwären die Koordinaten von relativ zur oberen linken Ecke des Browser-Ansichtsfensters.

Sie müssen die Position des übergeordneten Containers zusammen mit der Position des untergeordneten Containers explizit festlegen. Der typische Weg, dies zu tun, ist ungefähr so:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

Ich weiß, dass ich zu spät komme, hoffe aber, dass dies hilft.

Es folgen die Werte für die Positionseigenschaft.

• statisch
• Fest
• relativ
• absolut

Position: statisch

Dies ist die Standardeinstellung. Dies bedeutet, dass das Element an einer Position auftritt, an der es normalerweise auftreten würde.

#myelem {
    position : static;
}

Position: fest

Dadurch wird die Position eines Elements in Bezug auf das Browserfenster (Ansichtsfenster) festgelegt. Ein fest positioniertes Element bleibt auch dann in seiner Position, wenn die Seite gescrollt wird.

(Ideal, wenn Sie in der unteren rechten Ecke der Seite nach oben scrollen möchten).

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

Position: relativ

Platzieren eines Elements an einer neuen Position relativ zu seiner ursprünglichen Position.

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

Das obige CSS verschiebt das # myelem-Element 30px nach links und 30px vom oberen Rand seiner tatsächlichen Position.

Position: absolut

Wenn ein Element genau an der Position auf der Seite platziert werden soll.

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

Das obige CSS positioniert das # myelem-Element an einer Position 30 Pixel von oben und 300 Pixel von links auf der Seite und scrollt mit der Seite.

Und schlussendlich...

Position relativ + absolut

Wir können die Positionseigenschaft eines übergeordneten Elements auf relativ und dann die Positionseigenschaft des untergeordneten Elements auf absolut setzen . Auf diese Weise können wir das Kind relativ zum Elternteil an einer absoluten Position positionieren.

#container {
    position : relative;
}

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

Im obigen Bild sehen wir, dass das Element # div-2 in der oberen rechten Ecke des Elements #container positioniert ist.

GitHub: Den HTML-Code des obigen Bildes finden Sie hier und CSS hier .

Hoffe, dieses Tutorial hilft.

Durch die absolute Positionierung wird ein Element relativ zu seinem nächsten positionierten Vorfahren positioniert. Setzen Sie also position: relativeden Container auf, dann für untergeordnete Elemente, topund befinden Sie leftsich relativ zur oberen linken Ecke des Containers, solange die untergeordneten Elemente vorhanden sind position: absolute. Weitere Informationen finden Sie in der CSS 2.1-Spezifikation .

Wenn Sie ein Element zuerst relativ zu seinem enthaltenden Element positionieren müssen, müssen Sie position: relative es dem Containerelement hinzufügen . Das untergeordnete Element, das Sie relativ zum übergeordneten Element positionieren möchten, muss vorhanden sein position: absolute . Die absolute Positionierung funktioniert so, dass sie relativ zum ersten relativ (oder absolut) positionierten übergeordneten Element erfolgt . Falls es kein relativ positioniertes übergeordnetes Element gibt, wird das Element relativ zum Stammelement positioniert (direkt zum HTML-Element) .

Wenn Sie also Ihr untergeordnetes Element oben links im übergeordneten Container positionieren möchten, sollten Sie Folgendes tun:

.parent {
  position: relative;
} 

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

Sie werden stark vom Lesen dieses Artikels profitieren . Hoffe das hilft!