CSS-ում ծնողի նկատմամբ դիրքավորում
Եթե տարրին տրված է relative, իսկ դրա
ժառանգին՝ absolute, ապա այս ժառանգը
կդիրքավորվի իր ծնողի նկատմամբ, և ոչ թե դիտարկիչի
պատուհանի նկատմամբ:
Որպես կանոն, այս դեպքում ծնողին նշում են relative առանց տեղաշարժերի: Այս դեպքում այս ծնողի հետ ոչինչ չի պատահում, բայց նրա բոլոր ժառանգները այժմ կդիրքավորվեն նրա նկատմամբ:
Եկեք նայենք օրինակներով:
Օրինակ
Սկսելու համար եկեք պարզապես ստեղծենք ծնող-բլոկ և ժառանգ-բլոկ առանց դիրքավորման.
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
#child {
width: 200px;
height: 200px;
border: 1px solid green;
}
:
Օրինակ
Եկեք այժմ բացարձակ դիրքավորենք կանաչ բլոկը: Քանի որ ծնողին չի տրվել relative,
ապա ժառանգը կդիրքավորվի դիտարկիչի պատուհանի նկատմամբ.
<div id="parent">
<div id="child"></div>
</div>
#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: Այս
դեպքում ժառանգը կդիրքավորվի իր ծնողի նկատմամբ.
<div id="parent">
<div id="child"></div>
</div>
#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 հատկությունը:
