Положај ХТМЛ елемената игра виталну улогу у организовању компоненти веб странице. Тачније, позиција елемената се може подесити коришћењем ЦСС-а “ положај ' имовина. Ово својство може бити повезано са својствима помака, као што су својства врха, лева, десна и доња, пружајући специфичне вредности за подешавање елемента на страници. Међутим ' апсолутни ” позиционирани елементи се могу подесити у односу на најближи позиционирани елемент.
Овај пост ће објаснити апсолутно позиционирање ЦСС-а.
ЦСС својство „позиције“.
„ положај ” својство у ЦСС-у се може користити за подешавање положаја елемента. Различите вредности својства позиције су фиксне, апсолутне, релативне, статичне и лепљиве. Ове вредности су подешене са својствима помака, као што су горњи, десни, леви и доњи, за подешавање положаја елемента.
Како применити ЦСС апсолутно позиционирање?
Апсолутно позиционирање елемента може се применити помоћу ЦСС-а „ положај ” својство са вредношћу “ апсолутни ”. Елемент са апсолутном позицијом се подешава у складу са најближим позиционираним родитељским елементом. Али ако предак није позициониран, он ће се прилагодити у односу на део тела документа.
Пример
Хајде да разумемо концепт са практичним примером.
Корак 1: Креирајте ХТМЛ датотеку
У ХТМЛ датотеци, унутар елемента тела, додајте див са именом класе „ главни ”. Затим, унутар креираног дива, додајте ХТМЛ <имг> ознаку повезану са следећим атрибутима:
-
- “ срц ” пружа везу до слике.
- “ класа ” се користи у ЦСС-у за стилизовање елемената.
- “ све ” атрибут специфицира текст који се приказује уместо слике ако се слика не учита на страници.
- “ све ” атрибут одређује текст који се приказује на страници уместо слике ако се слика не учита на страници.
Затим додајте још један див који садржи заглавље и х1 и п елементе пасуса:
< див класа = 'главни' >< див класа = 'садржај' >
< имг срц = 'имагес/линуклого.пнг' класа = 'кућа' све = 'линукс лого' ширина = '80пк' >
< х1 > ЦСС апсолутно позиционирање х1 >
< стр > Здраво Линукхинт тиму ! стр >
див >
див >
У ЦСС-у се неколико својстава стила користи за украшавање ХТМЛ елемената.
Корак 2: Стилизирајте 'све' елементе
* {фонт-фамили: Вердана, Генева, Тахома, санс-сериф;
}
ХТМЛ елементи су стилизовани помоћу „ породица фонтова ” својство са вредношћу “ Вердана, Женева, Тахома, санс-сериф ”. Ова листа вредности обезбеђује да ако претраживач не подржава први стил, други ће бити примењен.
Корак 3: Стилизирајте див
.кућа {позиција: апсолутна;
врх: 50пк;
лево: 45пк;
}
Испод су својства примењена на „ кућа ” див:
-
- “ положај ” својство поставља позицију елемента. Овде је додато „ апсолутни ” ће поставити елемент у односу на део тела ХТМЛ-а.
- “ топ ” својство се користи за вертикално подешавање елемента.
- “ лево ” својство се користи за хоризонтално подешавање елемента.
Корак 4: Стил „садржај“ див
.садржај {боја позадине: цадетблуе;
ширина: 300пк;
висина: 250пк;
паддинг-лефт: 40пк;
маргин-лефт: 80пк;
}
Испод су ЦСС својства која се примењују на „ садржаја ” див:
-
- “ боја позадине ” својство поставља боју позадине елемента.
- “ ширина ” својство поставља ширину елемента.
- “ висина ” својство поставља висину елемента.
- “ паддинг-лево ” својство је подешено да додаје простор на левој страни садржаја елемента.
- “ маргин-лево ” својство специфицира простор на левој страни елемента.
У овом тренутку, наша веб страница ће изгледати овако:
Из горњег резултата се може видети да је слика див хоме постављена на 50пк од врха и 45пк од леве стране тела документа. Штавише, позиција хоме див је постављена у односу на део тела ХТМЛ-а.
Како подесити позицију елемента „у односу на позиционирани родитељски елемент“?
Овај одељак ће вас водити о подешавању положаја елемента у односу на најближи родитељски елемент позиције.
Подесите „позицију“ Својство „садржаја“ див
положај: релативан;
Да бисте подесили положај елемента у односу на родитељски елемент, поставите „ положај ” својство родитељског елемента на “ релативан ” вредност.
Подесите својство „позиције“ елемента „имг“.
.кућа {позиција: апсолутна;
врх: 100пк;
лево: 220пк;
}
овде:
-
- “ положај ” својство са вредношћу постављеном као „ апсолутни ” ће бити позициониран у односу на родитељски елемент (то јест, позиција див садржаја је постављена са релативном вредношћу).
- “ топ ” својство се користи за постављање позиције елемента одозго.
- “ лево ” својство се користи за подешавање позиције елемента са леве стране.
Излаз
Из резултата се може видети да је слика позиционирана у односу на родитељски див и изгледа прикладно.
Закључак
ЦСС “ положај ” својство се користи за постављање положаја ХТМЛ елемената. Ово својство се може вредновати као фиксно, релативно, апсолутно, лепљиво и статичко. „ апсолутни ” ће позиционирати елемент који одговара његовом оближњем позиционираном родитељском елементу. Овај пост је објаснио апсолутно позиционирање ЦСС-а са практичним примером.