CSS-те координатсыз абсолюттік позициялау
Шындығында, абсолюттік позициялау кезінде координаттарды көрсету міндетті емес. Егер элементке
жай ғана position қасиетін absolute мәнінде жазсақ, онда ол абсолютті түрде позицияланады,
бірақ тұрған орнында қала береді. Бұл ретте қалған барлық элементтер біздің элемент жоқ сияқты
әрекет етеді және оның үстіне шығуы мүмкін.
Мысалдармен қарастырайық.
Мысал
Алдымен үш блокты позициялаусыз жасап, олардың арасына бірнеше мәтін қояйық:
<div id="elem1"></div>
<div id="elem2"></div>
мәтін мәтін мәтін мәтін мәтін мәтін
<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>
мәтін мәтін мәтін мәтін мәтін мәтін
<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>
мәтін мәтін мәтін мәтін мәтін мәтін
<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>
мәтін мәтін мәтін мәтін мәтін мәтін
<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;
}
:
