webentwicklung-frage-antwort-db.com.de

Positionieren Sie ein HTML-Element mit CSS relativ zu seinem Container

Ich versuche, ein horizontales 100% -Stapel-Balkendiagramm mit HTML und CSS zu erstellen. Ich möchte die Balken mit DIVs mit Hintergrundfarben und prozentualen Breiten erstellen, abhängig von den Werten, die ich grafisch darstellen möchte. Ich möchte auch ein Raster haben, um eine beliebige Position entlang der Grafik zu markieren.

In meinem Experiment habe ich bereits die Balken horizontal zu stapeln erhalten, indem ich die CSS-Eigenschaft float: left zuweise. Ich möchte das jedoch gerne vermeiden, da es scheinbar verwirrend mit dem Layout zu tun scheint. Die Rasterlinien scheinen auch nicht gut zu funktionieren, wenn die Balken verschoben werden.

Ich denke, dass CSS-Positionierung damit umgehen können sollte, aber ich weiß noch nicht, wie das geht. Ich möchte in der Lage sein, die Position mehrerer Elemente relativ zur oberen linken Ecke ihres Containers anzugeben. Ich bin regelmäßig mit dieser Art von Problem konfrontiert (auch außerhalb dieses speziellen Grafikprojekts). Ich möchte also eine Methode,

  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.
172
Craig Walker

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

position: relative wird ein Element relativ zu selbst anordnen. Mit anderen Worten, die Elemente werden im normalen Fluss angeordnet, dann vom normalen Fluss entfernt und um die von Ihnen angegebenen Werte versetzt (oben, rechts, unten, links). Es ist wichtig zu beachten, dass sich andere Elemente um ihn herum nicht verschieben (verwenden Sie stattdessen negative Ränder, wenn Sie dieses Verhalten entfernen).

Sie interessieren sich jedoch höchstwahrscheinlich für position: absolute, wodurch ein Element relativ zu einem Container positioniert wird. Standardmäßig ist der Container das Browserfenster. Wenn jedoch für ein übergeordnetes Element position: relative oder position: absolute festgelegt ist, fungiert es als übergeordnetes Element für die Positionierung der Koordinaten seiner untergeordneten Elemente.

Demonstrieren:

<div id="container">
   <div id="box"> </div>
</div>
#container {
  position: relative;
}

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

In diesem Beispiel wäre die obere linke Ecke von #box 100px nach unten und 50px links von der oberen linken Ecke von #container. Wenn für #containerposition: relative nicht festgelegt wurde, sind die Koordinaten von #box relativ zur oberen linken Ecke des Browseransicht-Ports.

Hoffentlich hilft das.

358
Bryan M.

Sie müssen die Position des übergeordneten Containers zusammen mit der Position des untergeordneten Containers explizit festlegen. Der typische Weg, dies zu tun, ist etwa 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;
}
16
Stephen Deken

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

Im Folgenden sind die Werte für die Positionseigenschaft aufgeführt.

  • statisch
  • fest
  • relativ
  • absolut

position: statisch

Dies ist die Standardeinstellung. Das bedeutet, dass das Element an einer Stelle vorkommt, an der es normalerweise wäre.

#myelem {
    position : static;
}

position: fest

Dadurch wird die Position eines Elements in Bezug auf das Browserfenster (Viewport) festgelegt. Ein fix positioniertes Element bleibt an seiner Position, auch wenn die Seite einen Bildlauf durchführt.

(Ideal, wenn Sie die Schaltfläche "Bildlauf nach oben" in der rechten unteren Ecke der Seite anzeigen 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 wir möchten, dass ein Element an einer exakten Position auf der Seite platziert wird.

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

Das obige CSS positioniert das #myelem-Element an einer Position 30px von oben und 300px von links auf der Seite und blättert 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;
}

 Absolute position of a child element w.r.t. a Relative positioned parent element.

In der Abbildung oben sehen Sie, dass das # div-2 -Element in der oberen rechten Ecke des #container -Elements positioniert ist.

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

Hoffe das Tutorial hilft.

11
yusufshakeel

Bei der absoluten Positionierung wird ein Element relativ zu seinem nächstgelegenen Vorfahren positioniert. Fügen Sie also position: relative in den Container ein. Für untergeordnete Elemente sind top und left relativ zur linken oberen Ecke des Containers, solange die untergeordneten Elemente position: absolute haben. Weitere Informationen finden Sie in der CSS 2.1-Spezifikation .

3
Jim

Wenn Sie ein Element zuerst relativ zum enthaltenen Element positionieren müssen, müssen Sie position: relative zum Containerelement. Das untergeordnete Element, das Sie relativ zum übergeordneten Element positionieren möchten muss habenposition: absolute. Die Art und Weise, wie die absolute Positionierung funktioniert, ist, dass es relativ zum ersten relativ (oder absolut) positionierten Elternelement gemacht wird. Falls es kein relativ positioniertes Elternelement gibt, wird das Element relativ zum Wurzelelement (direkt zum HTML-Element) positioniert.

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

.parent {
  position: relative;
} 

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

Sie werden sehr davon profitieren, wenn Sie diesen Artikel lesen. Hoffe das hilft!

0
Nesha Zoric