CSS Байрлал /Position/

position шинж чанарт элементийн байрлалыг тодорхойлдог хэдэн арга байдаг. Үүнд: static, relative, fixed, absolute болон sticky гэсэн утгууд багтана.

Байрлалын шинж чанар

Баруун, зүүн, дээд, доод шинж чанаруудыг ашиглан элементүүдийг байрлуулдаг. position шинж чанарыг хамгийн эхэнд тодорхойлохгүй бол зарим тохиолдолд ажиллахгүй байх талтай байдаг. position нь утгаас хамаарч өөр өөрөөр ажиллах болно.

position-н өөр өөр утгууд

• static,
• relative,
• fixed,
• absolute
• sticky

Position:static

Static нь Position буюу байрлалын анхдагч утга юм.

position: static; нь баруун, зүүн, дээд, доод шинж чанарт нөлөөлдөггүй.
Өөрөөр хэлбэл position: static; шинж чанартай элемент нь ямар нэгэн онцгой байдлаар байрладаггүй бөгөөд хуудасны хэвийн урсгалын дагуу байрлах болно.

<style>
div.static {
  position: static;
  border: 3px solid #3f9ce8;
}
</style>

Position:relative

харицангуй буюу relative шинж чанарыг элементэд position: relative; гэж тодорхойлно.
Харицангүй буюу relative байрлалтай элементэд баруун, зүүн, дээд, доод шинж чанарыг зааж өгсөнөөр элемент нь хэвийн байрлалаас салах болно.

<style>
div.relative {
  position: relative;
  left: 30px;
  top: -30px;
  border: 3px solid #3f9ce8;
}
</style>

Position fixed

Тогтмол буюу fixed шинж чанарыг элементэд position: fixed; гэж тодорхойлно.
Ингэснээр хуудсыг дээш доош гүйлгэж байсан ч тухайн элемент нэг газраа байрласаар байх болно. Баруун, зүүн, дээд, доод шинж чанарыг ашиглан элементийн байрлалыг зааж өгнө.

<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0px;
  width: 300px;
  border: 3px solid #3f9ce8; 
  padding: 40px;
}
</style>

Position absolute

Үнэмлэхүй буюу absolute шинж чанарыг элементэд position: absolute; гэж тодорхойлдог.

Ингэснээр тухайн элемент хамгийн эхний эцэг элемент дотор заасан байрлалд байрлах болно. Хэрэв эцэг элемент байхгүй бол хуудасны body-г ашиглах болно. Хуудсыг дээш доош гүйлгэхэд дагаж хөдөлнө. /Эцэг элементийн харагдах байрлал position: relative-н оронд position: fixed байж болно/.

<style>
div.relative {
  position: relative;
  width: 450px;
  height: 250px;
  border: 2px solid #3f9ce8;
} 

div.absolute {
  position: absolute;
  
  top: 100px;
  right: 0;
  width: 250px;
  height: 150px;
  border: 2px solid #3f9ce8;
}
</style>

Position sticky

Наалдамхай буюу sticky шинж чанарыг элементэд position: sticky; гэж тодорхойлдог.

sticky элемент нь fixed болон relative-н хооронд сэлгэж ажилладаг.
Хуудсыг гүйлгэж харьцангуй байрлалаас өгөгдсөн офсет байрлалд очиход элемент нь наалдамхай шинж чанарт шилжих болно. /үүнийг position:fixed ч гэж ойлгож болно/

<style>
div.sticky {
  position: -webkit-sticky; /* Safari хөтөч дээр ажиллах болно */
  position: sticky;
  top: 10px;
  padding: 5px;
  border: 2px solid #3f9ce8;
}
</style>

Давхардсан элемент /Overlapping Elements/

Элементийг байрлуулахад өөр элементүүдтэй давхцаж болно.

Тэгвэл z-index элемент нь давхардсан элементийн дарааллыг тодорхойлно. элемент нь сөрөг эсвэл эерэг дараалалтай байж болно.

<style>
img {
  position: absolute;
  left: 10px;
  top: 0px;
  z-index: -1;
  opacity: 0.3;
}
</style>

Сэтгэгдэлүүд

нацагдорж

bayrlalaa

April 11, 2020, 2:10 a.m.