Czy ktoś może mi powiedzieć różnicę między style = "position:absolute" i style = "position:relative" i jak się różnią w przypadku dodania go div/span/input elementy?
ja używam absolute teraz, ale chcę zbadać relative także. Jak zmieni to pozycjonowanie?
Odpowiedzi:
132 dla odpowiedzi nr 1Pozycjonowanie bezwzględne oznacza, że element jestcałkowicie usunięty z normalnego przepływu układu strony. Jeśli chodzi o pozostałe elementy na stronie, element pozycjonowany absolutnie po prostu nie istnieje. Sam element jest następnie rysowany osobno, rodzaj „na wierzchu” wszystkiego innego, na pozycji określonej za pomocą left, right, top and bottom atrybuty.
Używając pozycji, którą określiłeś za pomocą tych atrybutów, element jest następnie umieszczany w tej pozycji w swoim ostatnim elemencie przodka, który ma atrybut pozycji czegoś innego niż static (elementy strony domyślnie statyczne, gdy nie określono atrybutu pozycji) lub treść dokumentu (rzutnia przeglądarki), jeśli taki przodek nie istnieje.
Na przykład, jeśli mam ten kod:
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
... the <div> byłby umieszczony 20px od góry okna przeglądarki i 20px od lewej krawędzi tego samego.
Jeśli jednak zrobię coś takiego:
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
...a później inner div byłby umieszczony 20px od góry outer div i 20px od lewej krawędzi tego samego, ponieważ outer div nie jest ustawiony z position:static ponieważ wyraźnie ustawiliśmy go na użycie position:relative.
Z drugiej strony, pozycjonowanie względne jest podobne do stwierdzania braku pozycjonowania, ale left, right, top and bottom atrybuty „podsuwają” element poza ich normalny układ. Reszta elementów na stronie nadal jest ułożona tak, jakby element był w normalnym miejscu.
Na przykład, jeśli mam ten kod:
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
... a potem wszystkie trzy <span> elementy będą siedzieć obok siebie bez nakładania się.
Jeśli ustawię drugi <span> użyć pozycjonowania względnego, jak poniżej:
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>
...następnie Span2 nakładałby się na prawą stronę Span1 o 5 pikseli. Span1 i Span3 będą siedzieć dokładnie w tym samym miejscu, co w pierwszym przykładzie, pozostawiając lukę 5px między prawą stroną Span2 a lewą stroną Span3.
Mam nadzieję, że trochę się wyjaśni.
13 dla odpowiedzi nr 2
Z pewnością chcesz się wymeldować ten artykuł pozycjonujący z listy A. Pomógł w demistyfikacji pozycjonowania CSS (co wydawało mi się szalone przed tym artykułem).
13 dla odpowiedzi nr 3
Względne pozycjonowanie: Element tworzy własne osie współrzędnych w miejscu przesunięcia względem osi współrzędnych rzutni. Jest to część przepływu dokumentów, ale przesunięta.
Bezwzględne pozycjonowanie: Element wyszukuje najbliższy dostępnykoordynować osie pomiędzy elementami macierzystymi. Element jest następnie pozycjonowany przez określenie przesunięć z tej osi współrzędnych. Usunął normalny przepływ dokumentu.
4 dla odpowiedzi № 4
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ć, jest użycie pozycji właściwości CSS, aby poinformować przeglądarkę, czy zamierzasz używać pozycjonowania bezwzględnego czy względnego.
Obie postawy mają różne funkcje. W Css Po ustawieniu pozycji możesz użyć atrybutów górny, prawy, dolny, lewy.
Bezwzględna pozycja
Element pozycji bezwzględnej jest ustawiony względem pierwszego elementu nadrzędnego, który ma pozycję inną niż statyczna.
Względne położenie
Względny element pozycjonowany jest ustawiony względem jego normalnej pozycji.
Aby względnie umieścić element, pozycja właściwości jest ustawiona jako względna. Różnica między pozycjonowaniem bezwzględnym i względnym polega na obliczaniu pozycji.
Więcej :Stanowisko względne wobec bezwzględności
2 dla odpowiedzi № 5
Pozycjonowanie bezwzględne opiera się na koordynatach wyświetlacza:
position:absolute;
top:0px;
left:0px;
^ umieszcza element w lewym górnym rogu okna.
Pozycja względna jest względna w stosunku do miejsca, w którym umieszczony jest element:
position:relative;
top:1px;
left:1px;
^ umieszcza element 1px w dół i 1px od lewej strony, gdzie pierwotnie siedział :)
2 dla odpowiedzi № 6
OK, bardzo oczywista odpowiedź tutaj ... w zasadzie krewny pozycja jest względem poprzedniego elementu lub okna, podczas gdy absolutny nie przejmuj się innymi elementami, chyba że jesteś rodzicem, jeśli używasz góry i lewej ...
Spójrz na przykład, który tworzę, aby pokazać różnice ...
Możesz także zobaczyć to w akcji, używając css, który tworzę dla ciebie, 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>1 dla odpowiedzi № 7
Kiedy zamierzasz używać 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 postawy mają różne funkcje. W Css Po ustawieniu pozycji możesz użyć atrybutów górny, prawy, dolny, lewy.
Bezwzględna pozycja
Element pozycji bezwzględnej jest ustawiony względem pierwszego elementu nadrzędnego, który ma pozycję inną niż statyczna.
Względne położenie
Względny element pozycjonowany jest ustawiony względem jego normalnej pozycji.
Aby względnie umieścić element, pozycja właściwości jest ustawiona jako względna. Różnica między pozycjonowaniem bezwzględnym i względnym polega na obliczaniu pozycji.
1 dla odpowiedzi № 8
Krewny:
Element z
position: relative;jest ustawiony względem swojej normalnej pozycji.Jeśli nie dodasz żadnych atrybutów pozycjonowania (górny, lewy, dolny lub prawy) na względnym elemencie, nie będzie to miało żadnego wpływu na jego pozycjonowanie.
position: staticelement.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ł.
Na element z tego typu pozycjonowaniem wpływają inne elementy, a on sam także wpływa na inne.
Absolutny:
Element z
position: absolute;pozwala umieścić dowolny element dokładnie tam, gdzie chcesz. Używasz atrybutów pozycjonowania góra, lewo, dół. i prawo, aby ustawić lokalizację.Jest on umieszczony względem najbliższego niestatycznego przodka. Jeśli nie ma takiego kontenera, jest on umieszczony względem samej strony.
Zostaje usunięty 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 on na przepływ innych elementów.
Zobacz ten oczywisty przykład dla lepszej przejrzystości. https://codepen.io/nyctophiliac/pen/BJMqjX
0 dla odpowiedzi № 9
Absolute umieszcza obiekt (div, span itp.) w absolutnej wymuszonej lokalizacji (zwykle określanej w pikselach) i względna umieści ją w pewnej odległości od miejsca, w którym normalnie by się znajdowała. Na przykład:
pozycja: względna; lewo: -20px;
Może to spowodować, że lewa strona tekstu zniknie, jeśli znajduje się w odległości 20 pikseli od lewej krawędzi ekranu.
0 dla odpowiedzi № 10
position: absolute można umieścić w dowolnym miejscu i pozostać tam, np. 0,0.
position: relative jest umieszczony z przesunięciem od miejsca, w którym jest pierwotnie umieszczony w przeglądarce.