CSS-de koordinatasiz absolýut pozisionirleme
Aslynda absolýut pozisionirlemede koordinatalary görkezmek hökmany däl. Eger elemente diňe position aýratynlygyny absolute⁅/v ⁆ bahasy bilen ýazsaňyz, ol absolýut pozisionirlener, ýöne öz ýerinde galar. Şol ýagdaýda beýleki elementleriň hemmesi biziň elementiňiz ýok ýaly hereket eder we oňa çykyşyp biler.
Geliň mysallar bilen göreliň.
Mysal
Ilki bilen, geliň diňe üç blog döreteliň we olaryň arasynda käbir tekst goýalyň:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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;
}
:
Mysal
Indi bolsa, ýaşyl bloga absolute⁅/v ⁆ goşalyň. Netijede bu blog öz ýerinde galar, aşakdaky elementleriň hemmesi biziň elementiňiz ýok ýaly hereket eder we oňa çykyşar:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<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;
}
:
Mysal
Indi bolsa, geliň left⁅/c ⁆ aýratynlygyny goşalyň, göni bahany bermän. Netijede biziň blogymyz gorizontalda görkezilen baha boýunça ýerleşer, göni bolsa bardyr ýerinde galar:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* gorizontal ýere goýuş goşulýar */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Mysal
Indi bolsa, tersine, top⁅/c ⁆ aýratynlygyny goşalyň, gorizontal ýere goýuşy bermän. Netijede biziň blogymyz göni görkezilen baha boýunça ýerleşer, gorizontal bolsa bardyr ýerinde galar:
<div id="elem1"></div>
<div id="elem2"></div>
tekst tekst tekst tekst tekst tekst
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* göni ýere goýuş goşulýar */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
