Position Relativ vs Absolut?

Was ist der Unterschied zwischen position: relativeund position: absolutein CSS? Und wann sollten Sie welche verwenden?

Absolute CSS-Positionierung

position: absolute;

Absolute Positionierung ist am einfachsten zu verstehen. Sie beginnen mit der CSS- positionEigenschaft:

position: absolute;

Dies teilt dem Browser mit, dass alles, was positioniert werden soll, aus dem normalen Fluss des Dokuments entfernt und an einer genauen Stelle auf der Seite platziert werden soll. Es wird nicht beeinflussen , wie die Elemente , bevor er oder nachdem es in dem HTML - Code auf der Webseite positioniert sind , aber es wird es Eltern unter Positionierung sein , wenn Sie es überschreiben.

Wenn Sie ein Element 10 Pixel vom oberen Rand des Dokumentfensters positionieren möchten, verwenden Sie dort den topVersatz positionmit der absolutePositionierung:

position: absolute;
top: 10px;

Dieses Element wird dann immer 10pxoben auf der Seite angezeigt, unabhängig davon, welcher Inhalt (visuell) durch, unter oder über dem Element verläuft.

Die vier Positionierungseigenschaften sind:

1. top
2. right
3. bottom
4. left

Um sie zu verwenden, müssen Sie sie als Offset-Eigenschaften betrachten. Mit anderen Worten, ein positioniertes Element right: 2pxwird nicht nach rechts verschoben 2px. Die rechte Seite ist gegenüber der rechten Seite des Fensters (oder seiner übergeordneten Position) um versetzt 2px. Gleiches gilt für die anderen drei.

Relative Positionierung

position: relative;

Die relative Positionierung verwendet dieselben vier Positionierungseigenschaften wie die absolutePositionierung. Anstatt die Position des Elements auf den Browser-Ansichtsport zu stützen, beginnt es an der Stelle, an der sich das Element befinden würde, wenn es sich noch im normalen Ablauf befindet .

Wenn Ihre Webseite beispielsweise drei Absätze enthält und auf dem dritten ein position: relativeStil platziert ist, wird seine Position basierend auf der aktuellen Position versetzt - nicht von den ursprünglichen Seiten des Ansichtsfensters.

Absatz 1.

Absatz 2.

Anmerkungen:

• Die Standardeinstellung widtheines Elements , das absolut positioniert ist , ist die Breite des Inhalts innerhalb es, im Gegensatz zu einem Element , das relativ positioniert ist , wo es die Standard widthist 100%der Raum kann es füllen.

• Sie können Elemente haben, die sich mit absolut positionierten Elementen überlappen, während Sie dies nicht mit relativ positionierten Elementen tun können (nativ, dh ohne die Verwendung negativer Ränder / Positionierungen).

Lose gezogen von: dieser Ressource

Sowohl die "relative" als auch die "absolute" Positionierung sind wirklich relativ, nur mit unterschiedlichen Rahmenbedingungen. Die "absolute" Positionierung ist relativ zur Position eines anderen, einschließenden Elements. Die "relative" Positionierung ist relativ zu der Position, die das Element selbst ohne Positionierung hätte.

Es hängt von Ihren Bedürfnissen und Zielen ab, welche Sie verwenden. Die Position "Relativ" ist geeignet, wenn Sie ein Element von der Position verschieben möchten, die es sonst im Elementfluss hätte, z. B. um einige Zeichen an einer hochgestellten Position erscheinen zu lassen. Die "absolute" Positionierung eignet sich zum Platzieren eines Elements in einem Koordinatensystem, das von einem anderen Element festgelegt wurde, z. B. zum "Überdrucken" eines Bildes mit Text.

Verwenden Sie als Sonderfunktion die „relative“ Positionierung ohne Verschiebung (nur Einstellung position: relative), um ein Element zu einem Referenzrahmen zu machen, sodass Sie die „absolute“ Positionierung für Elemente verwenden können, die sich darin befinden (im Markup).

Wenn Sie möchten, dass ein absolutes Element auf ein übergeordnetes Element beschränkt wird, müssen Sie die Position des übergeordneten Elements auf relativ setzen. Dadurch bleibt das untergeordnete Element im übergeordneten Element enthalten und es ist nicht "relativ" zum gesamten Fenster.

Ich habe einen Blog-Beitrag geschrieben , der ein einfaches Beispiel enthält, das den folgenden Effekt erzeugt:

Das hat ein grünes Div, das absolut am unteren Rand des übergeordneten gelben Div positioniert ist.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Positionsrelative:

Wenn Sie position: relative angeben, können Sie das Element mit top oder bottom und left oder right relativ zu der Stelle verschieben, an der es normalerweise im Dokument auftreten würde.

Position Absolut:

Wenn Sie position: absolute angeben, wird das Element aus dem Dokument entfernt und genau dort platziert, wo Sie es anweisen sollen.

Hier ist ein gutes Tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/ mit der Beispielverwendung beider Positionen in Bezug auf die absolute und relative Positionierung.

Relativ: Relativ zur aktuellen Position, kann aber verschoben werden. Oder Ein RELATIV positioniertes Element wird relativ zu SELBST positioniert.

Absolut: Ein ABSOLUT positioniertes Element wird relativ zu ITS NÄCHSTER POSITIONIERTER ELTERN positioniert. Wenn einer vorhanden ist, funktioniert er wie fest ..... relativ zum Fenster.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Hier ist die divPosition des 2. Elternteils relativ, so dass die Mitte divihre Position in Bezug auf den 2. Elternteil ändert div. Wenn die divPosition des ersten Elternteils relativ wäre, würde die Mitte divihre Position in Bezug auf den ersten Elternteil änderndiv . Einzelheiten

Eine Antwort geben, da mein Ruf nicht ausreicht, um einen Kommentar abzugeben. Aber sehen Sie dies nicht als Antwort an, nur eine zusätzliche Information, da ich einige Probleme mit der Fußzeile und der Positionierung hatte.

Beim Einrichten der Seite, sodass meine Fußzeile immer ganz unten bleibt, mit absoluter Position und Hauptcontainer / Wrapper mit relativer Position.

Ich habe dann einige Probleme mit meinem Textinhalt und einem Menü innerhalb desselben Inhalts (weißer Teil der Seite zwischen Kopf- und Fußzeile) festgestellt. Wenn Sie diese auf absolut setzen, bleibt die Fußzeile nicht mehr unten.

Postitionierung ist, wie Sie sagen, ein komplexes Thema.

Meine Lösung für den Inhalt, den ich auf meiner Webseite in "absoluter" Position haben wollte und der beim Öffnen eines Dropdown-Menüs nicht zur Seite geschoben werden sollte, bestand darin, ihm tatsächlich eine relative Position zu geben und ihn 35em unter meinem Dropdown-Menü zu platzieren Speisekarte. (35em ist die Höhe meines Dropdown-Menüs, wenn es vollständig erweitert ist)

Dann Top: -35em für den Inhalt, der zuvor zur Seite geschoben wurde. Und dann Rand-unten hinzufügen: -35em. Auf diese Weise befindet sich der Inhalt "unter" meinem Dropdown-Menü, aber visuell befindet er sich neben meinem Dropdown-Menü! Und der weiße Bereich unten bis zur Fußzeile hat nur 10em Rand, wie es war, bevor man damit herumgespielt hat. Meine Lösung dafür war also wie folgt:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

Ich sehe, dass Ihre Frage gut beantwortet wurde, aber nach vielen Problemen fand ich, dass dies eine sehr gute Lösung ist und eine Möglichkeit, besser zu verstehen, wie die Positionierung funktioniert. Wenn ich meinen Textinhalt unter meinem Dropdown-Menü platziere, funktioniert dies nicht. t schiebe meinen Text zur Seite. Wenn ich den Text in Position absolut geändert habe, blieb die Fußzeile nicht an Ort und Stelle. Da ich glauben kann, dass dies ein Problem für mehr Menschen als mich ist, füge ich dies hier hinzu. Was tatsächlich passiert, ist, dass ich den Text 35ems unter meine Dropdown-Liste setze.

Dann setze ich es visuell direkt nebeneinander mit relativer Position und oben: -35em; und gleicht den riesigen Raum darunter mit Rand aus: -35em;

negative Werte werden manchmal unterschätzt, sehr gute Funktionalität, wenn man diese Positionen besser versteht!

Natürlich schien eine feste Position auch für meine Fußzeile logisch, aber ich möchte wirklich, dass die Fußzeile unter dem Ansichtsfenster angezeigt wird, wenn der Text oder Inhalt länger als das Ansichtsfenster ist. Und um ganz unten zu bleiben, wenn die Seite wenig Inhalt enthält.

Dieses Setupp hat das sehr gut behoben und denken Sie daran, 'em' und nicht 'px' für ein flüssigeres / dynamischeres Seitenlayout zu verwenden! :) :)

(Es gibt vielleicht bessere Lösungen, aber dies funktioniert sowohl für plattformübergreifende als auch für geräteübergreifende Geräte.)

Relativ gegen Absolut:

• Unterschied: relativ zu sich selbst, relativ zum nächsten positionierten Vorfahren.
• Unterschied: Andere Elemente um ihn herum ehren seine alte Existenz, andere Elemente um ihn herum ehren NICHT seine alte Existenz.
• Ähnlichkeit: Andere Elemente um ihn herum ehren NICHT seine neue Existenz, andere Elemente um ihn herum ehren NICHT seine neue Existenz.

Lassen Sie uns ein Szenario diskutieren, um den Unterschied zwischen absolut und relativ zu erklären.

Angenommen, Sie haben innerhalb des Body-Elements ein Header-Element, dessen Höhe 95% der Ansichtshöhe beträgt, dh 95 VH. In diesem Container haben Sie ein Bild platziert und die Deckkraft auf 0,5 verringert. Und jetzt möchten Sie ein Logo in der Nähe der oberen linken Ecke platzieren. Ich hoffe, Sie haben das Szenario verstanden. Sie haben also ein helleres Bild im Kopfbereich mit einem Logo oben an der angegebenen Position.

Aber bevor ich damit anfange, habe ich den Rand und das Auffüllen so auf 0 gesetzt

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

Dadurch wird sichergestellt, dass keine Standardränder vorhanden sind und Elemente aufgefüllt werden.

Sie können Ihre Anforderung also auf zwei Arten erfüllen.

Erster Weg

• Sie geben dem Bild eine Klasse, sagen wir Logo.

• in css schreibst du

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• Dadurch wurde das Logo von oben und links vom umschließenden übergeordneten Element, das die Kopfzeile darstellt, auf 40 Pixel platziert. Das Bild wird so angezeigt, als ob es wie gewünscht platziert wurde.

Aber mein Freund, dies ist ein schlechtes Design, um ein Bild zu platzieren, für das Sie unnötig viel Platz verbraucht haben, indem Sie ihm einen gewissen Spielraum geben, wenn es nicht benötigt wurde. Sie müssen lediglich das Bild an diesem Ort platzieren. Sie haben es geschafft, indem Sie es mit Rändern gepolstert haben. Der Rand nahm Platz ein und schob den Inhalt tiefer, was den Eindruck erweckte, dass er genau dort positioniert ist, wo Sie ihn haben wollten. Ich hoffe, Sie haben das Problem verstanden, indem Sie es so herumgearbeitet haben. Sie benötigen mehr Platz als erforderlich, um nur ein Bild an der gewünschten Stelle zu platzieren.

Versuchen wir nun einen anderen Ansatz.

Zweiter Weg

• Das Bild mit der Logo-Klasse befindet sich innerhalb des Header-Elements mit beispielsweise der Header-Klasse. Die übergeordnete Klasse ist also ein Header und die untergeordnete Klasse ist wie zuvor ein Logo.

• Sie setzen die Positionseigenschaft der Header-Klasse wie folgt auf relativ

  .header{ position: relative; }

• Anschließend haben Sie der Logo-Klasse die folgenden Eigenschaften hinzugefügt

  .logo{ position:absolute; top:40px; left:40px }

Los geht's. Sie haben das Bild genau an der gleichen Stelle platziert. Es wird keinen offensichtlichen Unterschied in der Positionierung mit bloßem Auge zwischen dem ersten Ansatz und dem zweiten Ansatz geben. Wenn Sie das Bildelement jedoch untersuchen, werden Sie feststellen, dass es keinen zusätzlichen Platz beansprucht. Es nimmt genau die gleiche Fläche ein wie seine eigene Breite und Höhe.

Wie ist das möglich? Ich sagte der Bildlogo-Klasse, dass Sie relativ zur Header-Klasse platziert werden, da Sie das Kind dieser Klasse sind, und dass ich ihre Position ausdrücklich als relativ erwähnt habe . Damit jedes Kind davon relativ zu seiner oberen linken Ecke platziert wird. Und dass Ihre Position innerhalb dieses übergeordneten Elements festgelegt werden muss. so bist du gegeben absolut gegeben. Und dass Sie sich ein wenig von oben nach links in die Position bewegen müssen, in der Sie sein sollen. Daher erhalten Sie die Eigenschaft top und left mit 40px als Wert. Auf diese Weise werden Sie nur relativ zu Ihren Eltern platziert. Wenn ich also morgen deine Eltern nach oben oder unten oder irgendwo hin bewege, bist du immer 40 Pixel oben und links von der oberen linken Ecke deines Eltern-Headers. Ihre Position ist also innerhalb Ihres Elternteils festgelegt, unabhängig davon, ob die Position Ihres Elternteils in Zukunft festgelegt ist oder nicht (da sie nicht absolut wie Sie ist).

Verwenden Sie also relativ und absolut für Eltern und Kind. Verwenden Sie es zweitens, wenn Sie das untergeordnete Element nur an einer Stelle innerhalb des übergeordneten Elements platzieren möchten. Verwenden Sie keine Füllstoffe wie Ränder, um sie gewaltsam zu drücken. Geben Sie den relativen Wert der Eltern und das Kind, das Sie verschieben möchten, als absoluten Wert an. Geben Sie der untergeordneten Klasse die Eigenschaft top, left bottom oder right an, um sie an einer beliebigen Stelle im übergeordneten Element zu platzieren.

Vielen Dank.

Marco Pellicciotta: Die Position des Elements innerhalb eines anderen Elements kann relativ oder absolut sein, bezogen auf das Element, in dem es sich befindet.

Wenn Sie das Element aus Sicht des Browserfensters positionieren müssen, verwenden Sie am besten position: fixed