Адноснае пазіцыянаванне элементаў у CSS

Адноснае пазіцыянаванне задаецца з дапамогай значэння relative для ўласцівасці position. Такога кшталту пазіцыянаванне дазваляе зрушваць элементы адносна свайго бягучага становішча на зададзеную велічыню. Пры гэтым усе астатнія элементы старонкі будуць думаць, што элемент стаіць там, ды і стаяў першапачаткова. Гэта значыць пры такім тыпе пазіцыянавання элемент не выпадае з нармальнага патоку.

Зрухі ад бягучага становішча задаюцца ўласцівасцямі top, right, bottom і left.

Прыклад

Для пачатку давайце проста зробім два блока без пазіцыянавання:

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;
}

Результат:

Прыклад

Дадамо цяпер першаму блоку relative. Ад гэтага пакуль нічога не зменіцца, так як мы не паказалі зрух блока:

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;
}

Результат:

Прыклад

Давайце цяпер адсунем наш блок на 30px зверху, указаўшы яму ўласцівасць top. Пры гэтым усе астатнія элементы будуць весці сябе так, быццам наш блок застаўся тым месцы, дзе быў першапачаткова:

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;
}

Результат:

Прыклад

Давайце таксама адсунем наш блок на 40px злева, указаўшы яму ўласцівасць 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;
}

Результат:

Прыклад

Адмоўныя значэнні ўласцівасцяў top, right, bottom і left зрухваюць у процілеглым кірунку. Напрыклад, дадатнае значэнне top зрухвае ўніз, а адмоўнае - уверх.

Давайце адсунем наш другі блок на 40px уверх, указаўшы яму адмоўнае значэнне ўласцівасці 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;
}

Результат:

Практычныя задачы

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;
}