Позиционирониши мутлақ дар 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;
}
:
