Względne pozycjonowanie elementów w CSS

Względne pozycjonowanie jest ustawiane za pomocą wartości relative dla właściwości position. Takie pozycjonowanie pozwala przesuwać elementy względem ich aktualnego położenia o zadaną wielkość. Jednocześnie wszystkie pozostałe elementy strony będą "myśleć", że element znajduje się tam, gdzie był początkowo. Oznacza to, że przy tym typie pozycjonowania element nie wypada z normalnego przepływu.

Przesunięcia od aktualnego położenia są zadawane właściwościami top, right, bottom i left.

Przykład

Na początek zróbmy po prostu dwa bloki bez pozycjonowania:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Przykład

Dodajmy teraz pierwszemu blokowi relative. Na razie nic się nie zmieni, ponieważ nie określiliśmy przesunięcia bloku:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Przykład

Odsuńmy teraz nasz bloczek o 30px od góry, podając mu właściwość top. Przy tym wszystkie pozostałe elementy będą zachowywać się tak, jakby nasz bloczek pozostał w miejscu, gdzie był początkowo:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Przykład

Odsuńmy również nasz bloczek o 40px z lewej strony, podając mu właściwość left:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Przykład

Ujemne wartości właściwości top, right, bottom i left przesuwają w przeciwnym kierunku. Na przykład, dodatnia wartość top przesuwa w dół, a ujemna - w górę.

Odsuńmy nasz drugi bloczek o 40px w górę, podając mu ujemną wartość właściwości top:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Zadania praktyczne

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}