Różnica między style = "position:absolute" i style = " position: relative"

Pozycjonowanie względne: element tworzy własne osie współrzędnych, w miejscu oddalonym od osi współrzędnych widoku. Jest częścią obiegu dokumentów, ale przesunięty.

Pozycjonowanie bezwzględne: element wyszukuje najbliższe dostępne osie współrzędnych między jego elementami nadrzędnymi. Element jest następnie pozycjonowany przez określenie przesunięć od tej osi współrzędnych. Usunięto z dokumentu normalny przepływ.

Źródło

Na pewno będziesz chciał sprawdzić Ten artykuł pozycjonowania z listy osobno. Pomógł demystify CSS pozycjonowanie (co wydawało mi się szalone, przed tym artykule).

Dzięki pozycjonowaniu CSS możesz umieścić element dokładnie tam, gdzie chcesz na swojej stronie.

Kiedy zamierzasz używać pozycjonowania CSS, pierwszą rzeczą, którą musisz zrobić, to użyć właściwości CSS position, aby powiedzieć przeglądarce, czy masz zamiar użyć pozycjonowania bezwzględnego lub względnego.

Obie pozycje mają różne features.In Css Po ustawieniu pozycji możesz używać atrybutów top, right,bottom, left.

Pozycja Absolutna

An absolute element position jest umieszczony względem pierwszego elementu nadrzędnego, który ma pozycję inną niż statyczna.

Pozycja Względna

Element pozycjonowany względnie jest pozycjonowany względem jego normalnego położenia.

Aby pozycjonować element relatywnie, właściwość position jest ustawiona jako relatywna. Różnica między pozycjonowaniem bezwzględnym i względnym polega na tym, jak pozycja jest obliczana.

Więcej: pozycja względna vs absolutna

Absolutne pozycjonowanie opiera się na Ko-ordiantach wyświetlacza:

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

^ umieszcza element w lewym górnym rogu okna.

Pozycja względna jest względna do miejsca, w którym element jest umieszczony:

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

^ umieszcza element 1px w dół i 1px z lewej strony miejsca, w którym pierwotnie siedział :)

OK, bardzo oczywista odpowiedź... zasadniczo relative pozycja jest względna względem poprzedniego elementu lub okna, podczas gdy absolute nie obchodzi innych elementów, chyba że jest rodzicem, jeśli używasz top I left...

Spójrz na przykład, który tworzę, aby pokazać różnice...

Możesz również zobaczyć go w akcji, używając css, który dla Ciebie tworzę, możesz zobaczyć jak pozycje absolutne i względne zachowanie:

.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>

Kiedy zamierzasz używać pozycjonowania CSS, pierwszą rzeczą, którą musisz zrobić, to użyć właściwości CSS position, aby powiedzieć przeglądarce, czy masz zamiar użyć pozycjonowania bezwzględnego lub względnego.

Obie pozycje mają różne features.In Css Po ustawieniu pozycji możesz używać atrybutów top, right,bottom, left.

Pozycja Absolutna

Element pozycji bezwzględnej jest pozycjonowany względem pierwszego elementu nadrzędnego, który ma pozycję inną niż statyczne.

Pozycja Względna

Element pozycjonowany względnie jest pozycjonowany względem jego normalnego położenia.

Aby pozycjonować element relatywnie, właściwość position jest ustawiona jako relatywna. Różnica między pozycjonowaniem bezwzględnym i względnym polega na tym, jak pozycja jest obliczana.

Względny:

1. Element z position: relative; jest umieszczony względem jego normalnego położenia.

2. Jeśli nie dodasz atrybutów pozycjonowania (górny, lewy, dolny lub prawy) do elementu względnego, nie będzie to miało żadnego wpływu na jego pozycjonowanie. Będzie zachowywał się dokładnie jak element position: static.

3. Ale jeśli dodasz jakiś inny atrybut pozycjonowania, powiedzmy top: 10px;, przesunie on swoją pozycję o 10 pikseli w dół od miejsca, w którym normalnie by się znajdował.

4. Element z tego typu pozycjonowaniem wpływa na inne elementy, a sam wpływa również na inne.

Absolute:

1. Element z position: absolute; pozwala umieścić dowolny element dokładnie tam, gdzie ma być. Używasz atrybutów pozycjonowania Góra, Lewo, Dół. i prawo do ustalenia lokalizacji.

2. Jest on umieszczony względem najbliższego antystatycznego przodka. Jeśli nie ma takiego pojemnika, jest on umieszczony względem strona sama.

3. Jest usuwany z normalnego przepływu elementów na stronie.

4. Element z tego typu pozycjonowaniem nie ma wpływu na inne elementy, a także nie wpływa na przepływ innych elementów.

Zobacz ten sam wyjaśniający przykład dla lepszej jasności. https://codepen.io/nyctophiliac/pen/BJMqjX

Absolute umieszcza obiekt (div, span, itd.) w bezwzględnej wymuszonej lokalizacji (Zwykle określanej w pikselach) i względnej umieści ją w pewnej odległości od miejsca, w którym normalnie się znajduje. Na przykład:

Position: relative; left:-20px;

Może spowodować zniknięcie lewej strony tekstu, jeśli znajdował się w granicach 20px do lewej krawędzi ekranu.

position: absolute mogą być umieszczone w dowolnym miejscu i pozostają tam takie jak 0,0.

position: relative jest umieszczony z przesunięciem od miejsca, w którym jest pierwotnie umieszczony w przeglądarce.