Pozycjonowanie CSS

Question

Jak działa position:absolute,fixed,realtive

Nie chce linków do stron czytałem je i średnio dalej to ogarniam.

Mógłby ktoś to jak najprościej wytłumaczyć?

Answer 1

https://jsfiddle.net/23sdttuk/5/ Wszystko widać jak na dłoni. 

<div>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
</div>

#one {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 150px;
}
#two {
  position: relative;
  background-color: green;
  width: 100px;
  height: 100px;
}
#three {
  position: relative;
  background-color: blue;
  width: 100px;
  height: 100px;
}
#four {
  position: relative;
  background-color: pink;
  width: 100px;
  height: 600px;
}
#five {
  position: fixed;
  background-color: yellow;
  width: 100px;
  height: 100px;
  left: 150px;
  top: 100px;
}

 

Comments

Wielkie Dzięki.

Podziwiam ze chęć zrobienie tego.

Jeszcze raz dzięki pomogłeś mi.

Answer 2

position:absolute

Element jest pozycjonowany absolutnie czyli nie wpływa na przemieszczanie się innych elementów. Jest pozycjonowany względem okna przeglądarki. Możesz tym elementem manewrować przez top, left, right, bottom. Jezeli dasz top: 0px; to element będzie w lewym górnym rogu.

position: fixed

Element bedzie znajdował się cały czas w ustalonym miejscu na stronie i nie bedzie wpływał na inne elementy. Możesz tym elementem manewrować przez top, left, right, bottom. Jezeli dasz top: 0px; to element będzie w lewym górnym rogu. Mimo przewijania strony ten element tak jakby tez bedzie się przewiłał i będzie umieszczony w lewym górnym rogu. Główne zastosowanie to np. do menu żeby było cały czas u góry ekranu. Tak samo jak informacja o ciasteczkach jezeli wchodzisz na strone przewaznie u dolu ekranu jak przewijasz jest w tym samym miejscu

position: relative

Ustawiasz element przez top, left, right, bottom od miejsca w którym sie znajduje. Wpływa on na rozmieszczenie innych elementów na stronie. Jesli przesuniesz element o iles pixeli w którąś stronę to tam gdzie element znajdywał się pierwotnie pozostanie jakby niewidzialny element wielkości tego elementu który przesunołeś.

Myśle że pomogłem. Prościej się chba  nie da :)

Comments

Dzięki, pomogłeś.