Pozicionimi në lidhje me prindin në CSS

Nëse një elementi ka relative, dhe pasardhësi i tij - absolute, atëherë ky pasardhës do të pozicionohet në lidhje me prindin e tij, dhe jo në lidhje me dritaren e shfletuesit.

Zakonisht, në këtë rast prindit i caktohet relative pa zhvendosje. Në këtë rast me këtë prind nuk ndodh asgjë, por të gjithë pasardhësit e tij tani do të pozicionohen në lidhje me të.

Le të shohim me shembuj.

Shembull

Për fillim, le të krijojmë një bllok-prind dhe një bllok-pasardhës pa pozicionim:

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

Результат:

Shembull

Tani le ta pozicionojmë absolutisht bllokun e gjelbër. Meqë prindit nuk i është caktuar relative, pasardhësi do të pozicionohet në lidhje me dritaren e shfletuesit:

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

Результат:

Shembull

Tani le t'i caktojmë prindit relative. Në këtë rast pasardhësi do të pozicionohet në lidhje me prindin e tij:

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

Результат:

Detyra praktike

Në detyrat e mëposhtme, blloku kryesor është në qendër me anë të margin me vlerë auto, ndërsa të tjerët pozicionohen në lidhje me të me anë të vetisë position.