Абсалютнае пазіцыянаванне без каардынат у CSS
На самой справе ўказання каардынат пры абсалютным
пазіцыянаванні не абавязкова. Калі элементу
проста напісаць position у значэнні
absolute, то ён стане абсалютна спазіцыянаваным,
але застанецца стаяць у тым самым месцы, дзе і
стаяў. Пры гэтым усе астатнія элементы будуць
сябе весці так, быццам нашага элемента няма
і могуць напаўзці на яго.
Давайце паглядзім на прыкладах.
Прыклад
Для пачатку давайце проста зробім тры блока без пазіцыянавання і паміж імі нейкі тэкст:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Прыклад
А цяпер давайце дадамо зялёнаму блоку absolute.
У выніку гэты блок застанецца на месцы,
а ўсе элементы знізу будуць сябе весці так,
быццам нашага элемента няма і напаўзуць на яго:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Прыклад
А цяпер давайце дадамо ўласцівасць left,
не дадаючы пазіцыю па вертыкалі. У выніку
па гарызанталі наш блок стане на паказанае
значэнне, а па вертыкалі - застанецца стаяць
там, дзе і стаяў:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* дадаем пазіцыю па гарызанталі */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Прыклад
Цяпер давайце, наадварот, дадамо ўласцівасць
top, не дадаючы пазіцыю па гарызанталі.
У выніку па вертыкалі наш блок стане
на паказанае значэнне, а па гарызанталі -
застанецца стаяць там, дзе і стаяў:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* дадаем пазіцыю па вертыкалі */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
