CSS-de elementleriň nisbi pozisionirlenmesi
Nisbi pozisionirleme
position hassaýeti üçin
relative bahasy bilen berilýär.
Şeýle pozisionirleme elementleri öz häzirki
ýerinden bellenen ululyga göçürmäge mümkinçilik berýär.
Şol wagtyň özünde
sahypanyň beýleki ähli elementleri
elementiň başlangyçda duran ýerinde durýandygyna
ýygyn bolar. Ýagny, bu görnüşli pozisionirlemede
element normal akyşdan çykmaýar.
Häzirki ýerinden göçürmeler
top, right, bottom we
left hassaýetleri bilen bellenýär.
Mysal
Başlangyçda diňe iki blogy pozisionirlemesiz ýasaýaly:
<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;
}
:
Mysal
Indi birinji bloga relative goşalyň.
Şu wagt heniz hiç zat üýtgemez, sebäbi
biz blogyň göçürmesini görkezmedik:
<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;
}
:
Mysal
Indi biziň blogymyzy ýokardan 30px
göçürip, oňa top hassaýetini belleneli.
Şol wagtyň özünde beýleki ähli elementler
biziň blogymyzyň başlangyçdaky ýerinde galandygyna meňzer hereket eder:
<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;
}
:
Mysal
Şeýle hem biziň blogymyzy çepden 40px
göçürip, oňa left hassaýetini belleneli:
<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;
}
:
Mysal
top, right,
bottom we left hassaýetleriniň
salamat bahalary tersine ugurda göçürýär.
Mysal üçin, top hassaýetiniň süýüm bahasy
aşak göçürýär, ýöne salamaty bolsa ýokary.
Biziň ikinji blogymyzy ýokary 40px
göçürip, oňa top hassaýetiniň salamaty bahasyny belleneli:
<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;
}
:
Amaly meseleler
Aşakdaky bloglar berlen:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#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;
}
:
Nisbi pozisionirleme ýardamynda bu bloglary aşakdaky ýaly göçüriň:
