CSSтегиндеги элементтердин салыштырмалуу позицияланышы
Салыштырмалуу позицияланыш position касиети үчүн
relative мааниси менен белгиленет.
Бул позицияланыш элементтерди өздөрүнүн учурдагы
ордунан белгиленен чоңдукка жылдырууга мүмкүндүк берет.
Бул учурда беттин калган бардык элементтери
элемент баштапкы абалында тургандай эле болот.
Башкача айтканда, мындай позициялоо түрүндө элемент
кадимки агымдан чыкпайт.
Учурдагы ордунан жылуулар top, right,
bottom жана left касиеттери
менен белгиленет.
Мисал
Башында эки блокту позицияланышсыз жасайлы:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Мисал
Эми биринчи блогко relative кошобуз.
Бул жерде биз блоктун жылуусун көрсөтпөгөндүктөн,
эч нерсе өзгөрбөйт:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Мисал
Эми биздин блокту top касиетин көрсөтүп,
жогору жагынан 30px алыстыкка жылдыралы.
Бул учурда калган бардык элементтер биздин блок
баштапкы жерinde тургандай кылып аракет кылат:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Мисал
Ошондой эле блокту сол жагынан 40px
алыстыкка left касиетин көрсөтүп жылдыралы:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
left: 40px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Мисал
top, right, bottom жана
left касиеттеринин терс маанилери
карама-каршы багытка жылат. Мисалы, top
касиетинин оң мааниси ылдый жылдырат, ал эми
терс мааниси жогору жылдырат.
Экинчи блокту жогору жагынан 40px
алыстыкка top касиетинин терс маанисин
көрсөтүп жылдыралы:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
position: relative;
top: -40px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Практикалык тапшырмалар
Төмөнкү блоктор берилген:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
текст текст текст
#elem1 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #FF8888;
}
#elem2 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #7E89EB;
}
#elem3 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #4DEE99;
}
:
Бул блокторду салыштырмалуу позицияланыш жардамы менен төмөнкүдөй жылдырыңыз:
