Różnica między stylem = „pozycja: bezwzględna” a stylem = „pozycja: względna”

103

Czy ktoś może mi powiedzieć, jaka jest różnica między style = "position:absolute"i style = "position:relative"i jak się różnią w przypadku dodania go do div/ span/ inputelementów?

Używam absoluteteraz, ale chcę też zbadać relative. Jak to zmieni pozycjonowanie?

css css-position

— Varun
źródło

1

Właściwość „position” w CSS 2.1.

— Josh Lee

@rolfl Hm, czy ta edycja była naprawdę konieczna w przypadku pytania sprzed 3 lat? Nazwałbym to „zbyt małym”.

— Pan Lister

3

@MrLister Pojawił się w kolejce recenzji „sugerowanej edycji”… Nie zauważyłem wieku. Ale gdyby było to 60-sekundowe pytanie, czy zrobiłoby to jakąś różnicę?

— rolfl

@rolfl Niezupełnie; Nadal głosowałbym „za mało”.

— Pan Lister

178

Pozycjonowanie bezwzględne oznacza, że element jest całkowicie wyjęty z normalnego przepływu układu strony. Jeśli chodzi o pozostałe elementy strony, element pozycjonowany absolutnie po prostu nie istnieje. Sam element jest następnie rysowany oddzielnie, jakby „na wierzchu” wszystkiego innego, w pozycji określonej za pomocą left, right, top and bottomatrybutów.

Korzystając z pozycji określonej za pomocą tych atrybutów, element jest następnie umieszczany na tej pozycji w swoim ostatnim elemencie nadrzędnym, który ma atrybut pozycji o wartości innej niż static(elementy strony domyślnie są statyczne, gdy nie określono atrybutu pozycji) lub treść dokumentu (przeglądarka widok), jeśli nie ma takiego przodka.

Na przykład, gdybym miał ten kod:

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

... <div>byłby umieszczony 20 pikseli od góry widoku przeglądarki i 20 pikseli od lewej krawędzi tego samego.

Gdybym jednak zrobił coś takiego:

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

... wtedy element innerdiv byłby umieszczony 20 pikseli od góry elementu outerdiv i 20 pikseli od lewej krawędzi tego samego elementu, ponieważ element outerdiv nie jest umieszczony z, position:staticponieważ wyraźnie ustawiliśmy go na użycie position:relative.

Z drugiej strony pozycjonowanie względne jest podobne do stwierdzenia braku pozycjonowania, ale left, right, top and bottomatrybuty „wypychają” element z normalnego układu. Reszta elementów na stronie nadal jest rozmieszczona tak, jakby element znajdował się na swoim normalnym miejscu.

Na przykład, gdybym miał ten kod:

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

... wtedy wszystkie trzy <span>elementy siedziałyby obok siebie bez nakładania się.

Jeśli ustawię jako drugą <span>opcję pozycjonowania względnego, na przykład:

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

... wtedy Span2 zachodziłby na prawą stronę Span1 o 5 pikseli. Span1 i Span3 znajdowałyby się dokładnie w tym samym miejscu, co w pierwszym przykładzie, pozostawiając 5-pikselową przerwę między prawą stroną Span2 a lewą stroną Span3.

Mam nadzieję, że to trochę wyjaśnia.

— AgentConundrum
źródło

39

Pozycjonowanie względne: element tworzy własne osie współrzędnych w miejscu odsuniętym od osi współrzędnych rzutni. Jest to część przepływu dokumentów, ale przesunięta.

Pozycjonowanie bezwzględne: element wyszukuje najbliższe dostępne osie współrzędnych wśród swoich elementów nadrzędnych. Element jest następnie pozycjonowany przez określenie odsunięć od tej osi współrzędnych. Jest usuwany z normalnego przepływu dokumentu.

Źródło

— Premraj
źródło

15

Na pewno zechcesz przeczytać ten artykuł o pozycjonowaniu z „A List Apart”. Pomogło zdemistyfikować pozycjonowanie CSS (co wydawało mi się szalone przed tym artykułem).

— jbrennan
źródło

8

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

Kiedy zamierzasz korzystać z pozycjonowania CSS, pierwszą rzeczą, którą musisz zrobić, jest użycie pozycji właściwości CSS, aby poinformować przeglądarkę, czy zamierzasz używać pozycjonowania bezwzględnego czy względnego.

Obie pozycje mają różne cechy. W CSS Po ustawieniu pozycji możesz używać atrybutów góra, prawo, dół, lewo.

Absolutna pozycja

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

Względne położenie

Względny pozycjonowany element jest ustawiony względem swojego normalnego położenia.

Aby pozycjonować element względnie, położenie właściwości jest ustawiane jako względne. Różnica między pozycjonowaniem bezwzględnym i względnym polega na sposobie obliczania pozycji.

Więcej: Pozycja względna a bezwzględna

— GowriShankar
źródło

6

OK, bardzo oczywista odpowiedź tutaj ... w zasadzie pozycja względna jest względem poprzedniego elementu lub okna, podczas gdy absolutnie nie przejmuje się innymi elementami, chyba że jest to rodzic, jeśli używasz górnego i lewego ...

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

Możesz również zobaczyć to w akcji, korzystając z css, które dla Ciebie stworzyłem, możesz zobaczyć, jak zachowują się pozycje bezwzględne i względne:

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

Rozwiń fragment

— Alireza
źródło

4

Pozycjonowanie bezwzględne opiera się na współrzędnych wyświetlacza:

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

^ umieszcza element w lewym górnym rogu okna.

Pozycja względna jest zależna od miejsca umieszczenia elementu:

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

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

— Damien-Wright
źródło

3

Krewny:

Element z position: relative;jest ustawiony względem swojego normalnego położenia.
Jeśli nie dodasz atrybutów pozycjonowania (góra, lewo, dół lub prawo) na względnym elemencie, nie będzie to miało żadnego wpływu na jego pozycjonowanie. Będzie zachowywał się dokładnie jak position: staticelement.
Ale jeśli dodasz inny atrybut pozycjonowania, powiedzmy, top: 10px;, przesunie on swoją pozycję o 10 pikseli w dół od normalnego położenia.
Na element z tego typu pozycjonowaniem wpływają inne elementy, a on sam wpływa również na inne.

Absolutny:

Element z position: absolute;umożliwia umieszczenie dowolnego elementu dokładnie tam, gdzie chcesz. Używasz atrybutów pozycjonowania góra, lewo, dół. i prawo do ustawienia lokalizacji.
Umieszczany jest względem najbliższego niestatycznego przodka. Jeśli nie ma takiego kontenera, jest on umieszczany względem samej strony.
Jest usuwany z normalnego przepływu elementów na stronie.
Na element z tego typu pozycjonowaniem nie mają wpływu inne elementy, a także nie wpływa na przepływ innych elementów.

Zobacz ten oczywisty przykład dla większej przejrzystości. https://codepen.io/nyctophiliac/pen/BJMqjX

— Pransh Tiwari
źródło

0

Absolute umieszcza obiekt (div, span itp.) W absolutnie wymuszonej lokalizacji (zwykle określanej w pikselach), a relatywna umieszcza go w pewnej odległości od miejsca, w którym normalnie by się znajdował. Na przykład:

pozycja: względna; po lewej: -20px;

Może spowodować zniknięcie lewej strony tekstu, jeśli znajdował się w odległości 20 pikseli od lewej krawędzi ekranu.

— Charles Zink
źródło

0

position: absolute można umieścić w dowolnym miejscu i tam pozostać, np. 0,0.

position: relative jest umieszczony z odsunięciem od lokalizacji, w której został pierwotnie umieszczony w przeglądarce.

— Vil Ignoble
źródło

0

pozycja: względne działanie jako element nadrzędny position: bezwzględne działanie dziecko względnej pozycji. możesz zobaczyć poniższy przykład

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

— Imran Khan
źródło