CSS'теги позициялоодо терс маанилер
Биз үйрөнгөн top, right,
bottom жана left касиеттери
оң гана эмес, терс маанилерди да кабыл ала алышат.
Келгиле, мисалдар аркылуу карап көрөлү.
Мисал
Төмөнкү мисалда элемент ата-энесине карата абсолюттук позицияланып,
жогорудан 0, солдон 0 абалда турат:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Мисал
Эми болсо, элементти жогорудан -20px,
солдон -30px абалга жылдыралы:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Төмөнкү үлгүдө жашыл блок margin аркылуу
экрандын борборунда турат, ал эми кызыл блокдор
ага салыштырмалуу позицияланат. Берилген үлгүгө
ылайык бетти кайталаңыз:
