CSS-ում ֆիքսված դիրքավորումը

Այժմ կծանոթանանք ֆիքսված դիրքավորման հետ: Այն նման է բացարձակ դիրքավորմանը, տարբերությունն ի հայտ է գալիս այն բանում, թե ինչպես են այդ դիրքավորման տեսակները իրենց պահում ուրթագիծ ունենալու դեպքում:

Էջը ոլորելու դեպքում բացարձակ դիրքավորված էլեմենտները կոլորվեն էջի հետ միասին: Նայեք օրինակը:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат:

Կարելի է անել այնպես, որ ոլորելու դեպքում էջը դիրքավորված էլեմենտը մնա տեղում: Դրա համար նրան պետք է տալ ֆիքսված դիրքավորում position հատկության միջոցով fixed արժեքով:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: fixed; /* տալիս ենք ֆիքսված դիրքավորում */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат: