Unterschied zwischen style = "position: absolute" und style = "position: relative"

103

Kann mir jemand den Unterschied zwischen style = "position:absolute"und style = "position:relative" und wie sie sich unterscheiden, wenn ich sie zu div/ span/ inputElementen hinzufüge ?

Ich benutze absolutegerade, aber ich möchte auch erforschen relative. Wie wird dies die Positionierung verändern?

css css-position Varun
quelle

1

Die Eigenschaft 'position' in CSS 2.1.

Josh Lee

@rolfl Hm, war diese Bearbeitung bei einer 3 Jahre alten Frage wirklich notwendig? Ich hätte es "zu klein" genannt.

Herr Lister

3

@ MrLister Es wurde in einer Überprüfungswarteschlange "Vorgeschlagene Bearbeitung" angezeigt. Ich habe das Alter nicht bemerkt. Aber wenn es eine 60 Sekunden alte Frage wäre, hätte es einen Unterschied gemacht?

Rolfl

@rolfl Nicht wirklich; Ich hätte immer noch "zu gering" gestimmt.

Herr Lister

178

Absolute Positionierung bedeutet, dass das Element vollständig aus dem normalen Fluss des Seitenlayouts herausgenommen wird. Für die restlichen Elemente auf der Seite existiert das absolut positionierte Element einfach nicht. Das Element selbst wird dann separat gezeichnet, sozusagen "über allem" an der Position, die Sie mithilfe der left, right, top and bottomAttribute angeben .

Unter Verwendung der Position, die Sie mit diesen Attributen angeben, wird das Element dann an der Position innerhalb seines letzten Vorfahrenelements platziert, das ein anderes Positionsattribut als static(Seitenelemente sind standardmäßig statisch, wenn kein Positionsattribut angegeben ist) oder des Dokumentkörpers (Browser) aufweist Ansichtsfenster), wenn kein solcher Vorfahr existiert.

Wenn ich zum Beispiel diesen Code hätte:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

...das <div> wäre 20px vom oberen Rand des Browser-Ansichtsfensters und 20px vom linken Rand desselben positioniert.

Wenn ich jedoch so etwas gemacht hätte:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... dann würde das innerdiv 20px vom oberen outerRand des div und 20px vom linken Rand desselben outerpositioniert sein , da das div nicht mit positioniert ist, position:staticweil wir es explizit für die Verwendung festgelegt haben position:relative.

Relative Positionierung ist dagegen so, als würde man überhaupt keine Positionierung angeben, aber die left, right, top and bottomAttribute "schubsen" das Element aus ihrem normalen Layout heraus. Der Rest der Elemente auf der Seite wird immer noch so angeordnet, als ob sich das Element an seiner normalen Stelle befindet.

Wenn ich zum Beispiel diesen Code hätte:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... dann würden alle drei <span>Elemente ohne Überlappung nebeneinander sitzen.

Wenn ich die zweite Einstellung <span>für die relative Positionierung wie folgt einstelle :

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... dann würde Span2 die rechte Seite von Span1 um 5px überlappen. Span1 und Span3 würden genau an der gleichen Stelle sitzen wie im ersten Beispiel und einen Abstand von 5 Pixel zwischen der rechten Seite von Span2 und der linken Seite von Span3 lassen.

Hoffe das klärt die Dinge ein bisschen.

AgentConundrum
quelle

39

Relative Positionierung: Das Element erstellt seine eigenen Koordinatenachsen an einem von der Koordinatenachse des Ansichtsfensters versetzten Ort. Es ist Teil des Dokumentenflusses, aber verschoben.

Absolute Positionierung: Ein Element sucht unter seinen übergeordneten Elementen nach den nächsten verfügbaren Koordinatenachsen. Das Element wird dann positioniert, indem Offsets von dieser Koordinatenachse angegeben werden. Es wird aus dem normalen Dokumentenfluss entfernt.

Quelle

Premraj
quelle

15

Sie werden diesen Positionierungsartikel auf jeden Fall aus 'A List Apart' lesen wollen . Hat geholfen, die CSS-Positionierung zu entmystifizieren (was mir vor diesem Artikel verrückt vorkam).

jbrennan
quelle

7

Mit der CSS-Positionierung können Sie ein Element genau dort platzieren, wo Sie es auf Ihrer Seite haben möchten.

Wenn Sie die CSS-Positionierung verwenden möchten, müssen Sie zunächst die Position der CSS-Eigenschaft verwenden, um dem Browser mitzuteilen, ob Sie die absolute oder relative Positionierung verwenden möchten.

Beide Positionen haben unterschiedliche Funktionen. In CSS Wenn Sie die Position festgelegt haben, können Sie die Attribute oben, rechts, unten und links verwenden.

Absolute Position

Ein absolutes Positionselement wird relativ zum ersten übergeordneten Element positioniert, dessen Position nicht statisch ist.

Relative Position

Ein relativ positioniertes Element wird relativ zu seiner normalen Position positioniert.

Um ein Element relativ zu positionieren, wird die Eigenschaftsposition als relativ festgelegt. Der Unterschied zwischen absoluter und relativer Positionierung besteht darin, wie die Position berechnet wird.

Mehr: Postion Relative vs Absolute

GowriShankar
quelle

6

OK, sehr offensichtliche Antwort hier ... im Grunde ist die relative Position relativ zum vorherigen Element oder Fenster, während sich die anderen Elemente absolut nicht interessieren, es sei denn, es ist ein Elternteil, wenn Sie oben und links verwenden ...

Schauen Sie sich das Beispiel an, das ich für Sie erstellt habe, um die Unterschiede zu zeigen ...

Sie können es auch in Aktion sehen, indem Sie das CSS verwenden, das ich für Sie erstellt habe. Sie können sehen, wie sich absolute und relative Positionen verhalten:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

Erweitern Sie das Snippet

Alireza
quelle

4

Die absolute Positionierung basiert auf den Koordinaten der Anzeige:

position:absolute;
top:0px;
left:0px;

^ Platziert das Element oben links im Fenster.

Die relative Position ist relativ zu der Position des Elements:

position:relative;
top:1px;
left:1px;

^ Platziert das Element 1px nach unten und 1px von links von der Stelle, an der es ursprünglich stand :)

Damien-Wright
quelle

3

Relativ:

Ein Element mit position: relative;wird relativ zu seiner normalen Position positioniert.
Wenn Sie einem relativen Element keine Positionierungsattribute (oben, links, unten oder rechts) hinzufügen, hat dies keinerlei Auswirkungen auf die Positionierung. Es wird sich genau wie ein position: staticElement verhalten .
Wenn Sie jedoch ein anderes Positionierungsattribut hinzufügen, z. B. top: 10px;, wird die Position um 10 Pixel von der normalen Position nach unten verschoben.
Ein Element mit dieser Art der Positionierung wird von anderen Elementen beeinflusst und wirkt sich auch auf andere aus.

Absolut:

Mit einem Element mit position: absolute;können Sie jedes Element genau dort platzieren, wo Sie es haben möchten. Sie verwenden die Positionierungsattribute oben, links, unten. und rechts, um den Ort einzustellen.
Es wird relativ zum nächsten nicht statischen Vorfahren platziert. Wenn es keinen solchen Container gibt, wird er relativ zur Seite selbst platziert.
Es wird aus dem normalen Elementfluss auf der Seite entfernt.
Ein Element mit dieser Art der Positionierung wird von anderen Elementen nicht beeinflusst und beeinflusst auch nicht den Fluss anderer Elemente.

Weitere Informationen finden Sie in diesem selbsterklärenden Beispiel. https://codepen.io/nyctophiliac/pen/BJMqjX

Pransh Tiwari
quelle

0

Absolute platziert das Objekt (div, span usw.) an einem absolut erzwungenen Ort (normalerweise in Pixel bestimmt) und relativ platziert es einen bestimmten Betrag von dem Ort entfernt, an dem es sich normalerweise befindet. Beispielsweise:

Position: relativ; links: -20px;

Möglicherweise wird die linke Seite des Texts ausgeblendet, wenn sie sich innerhalb von 20 Pixel am linken Bildschirmrand befindet.

Charles Zink
quelle

0

position: absolute kann überall platziert werden und dort bleiben, z. B. 0,0.

position: relative wird mit Versatz von der Position platziert, an der es ursprünglich im Browser platziert wurde.

Vil unedel
quelle

0

Position: Relativer Akt als übergeordnetes Element Position: Absoluter Akt als Kind der relativen Position. Sie können das folgende Beispiel sehen

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

Imran Khan
quelle

Unterschied zwischen style = "position: absolute" und style = "position: relative"

Antworten: