Աբսոլյուտ դիրքավորում առանց կոորդինատների CSS-ում

Իրականում կոորդինատներ նշելը աբսոլյուտ դիրքավորման դեպքում պարտադիր չէ։ Եթե տարրին պարզապես գրենք position absolute արժեքով, ապա այն կդառնա աբսոլյուտ դիրքավորված, բայց կմնա նույն տեղում, որտեղ և կանգնած էր։ Այդ դեպքում մնացած բոլոր տարրերը կվարվեն այնպես, կարծես մեր տարր չկա և կարող են բարձրանալ դրա վրա։

Դիտարկենք օրինակներով։

Օրինակ

Սկսելու համար եկեք պարզապես ստեղծենք երեք բլոկ առանց դիրքավորման և դրանց միջև որոշ տեքստ.

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#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;
}

Результат:

Օրինակ

Իսկ այժմ եկեք կանաչ բլոկին ավելացնենք absolute։ Արդյունքում այս բլոկը կմնա տեղում, իսկ ներքևի բոլոր տարրերը կվարվեն այնպես, կարծես մեր տարր չկա և կբարձրանան դրա վրա.

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#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;
}

Результат:

Օրինակ

Իսկ այժմ եկեք ավելացնենք left հատկությունը, առանց ուղղահայաց դիրքավորում ավելացնելու։ Արդյունքում հորիզոնական ուղղությամբ մեր բլոկը կկանգնի նշված արժեքով, իսկ ուղղահայաց ուղղությամբ՝ կմնա նույն տեղում, որտեղ և կանգնած էր.

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  left: 40px; /* ավելացնում ենք հորիզոնական դիրքավորում */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

Օրինակ

Հիմա եկեք, հակառակը, ավելացնենք top հատկությունը, առանց հորիզոնական դիրքավորում ավելացնելու։ Արդյունքում ուղղահայաց ուղղությամբ մեր բլոկը կկանգնի նշված արժեքով, իսկ հորիզոնական ուղղությամբ՝ կմնա նույն տեղում, որտեղ և կանգնած էր.

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 100px; /* ավելացնում ենք ուղղահայաց դիրքավորում */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат: