CSS-ում ծնողի նկատմամբ դիրքավորում

Եթե տարրին տրված է relative, իսկ դրա ժառանգին՝ absolute, ապա այս ժառանգը կդիրքավորվի իր ծնողի նկատմամբ, և ոչ թե դիտարկիչի պատուհանի նկատմամբ:

Որպես կանոն, այս դեպքում ծնողին նշում են relative առանց տեղաշարժերի: Այս դեպքում այս ծնողի հետ ոչինչ չի պատահում, բայց նրա բոլոր ժառանգները այժմ կդիրքավորվեն նրա նկատմամբ:

Եկեք նայենք օրինակներով:

Օրինակ

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

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Օրինակ

Եկեք այժմ բացարձակ դիրքավորենք կանաչ բլոկը: Քանի որ ծնողին չի տրվել relative, ապա ժառանգը կդիրքավորվի դիտարկիչի պատուհանի նկատմամբ.

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Օրինակ

Եկեք այժմ ծնողին տանք relative: Այս դեպքում ժառանգը կդիրքավորվի իր ծնողի նկատմամբ.

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Գործնական առաջադրանքներ

Հաջորդ առաջադրանքներում հիմնական բլոկը գտնվում է կենտրոնում՝ օգտագործելով margin auto արժեքով, իսկ մնացածները դիրքավորվում են նրա նկատմամբ՝ օգտագործելով position հատկությունը: