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 арқылы
экранның ортасында тұр, ал
қызыл блоктар оған қатысты орналасады.
Берілген үлгі бойынша бетті қайталаңыз:
