HTML padėties nustatymas. HTML elementų išdėstymas

HTML bloko elementas yra elementas, kuris pagal numatytuosius nustatymus užima visą pirminio elemento plotį. Pirminis elementas gali būti kitas bloko elementas arba naršyklės langas. Galite nustatyti bloko elemento plotį ir aukštį naudodami CSS ypatybes. Bloko elementų padėties nustatymas yra procesas, kuriame jie nustatomi naršyklės lange ir jų atžvilgiu naudojant CSS ypatybių padėtį kairėje, viršuje, dešinėje ir apačioje. CSS padėties ypatybė skirta nustatyti vieną iš keturių galimų padėties nustatymo tipų: statinį (numatytąjį), absoliutų, fiksuotą ir santykinį. Likusios CSS ypatybės, būtent kairysis , viršutinis , dešinysis ir apatinis , yra naudojamos atstumams nuo pirminio elemento kairiojo, viršutinio, dešiniojo ir apatinio kraštų nustatyti. Taip pat, nustatant tam tikras savybes, blokų elementai gali persidengti vienas su kitu, o šią funkciją galima naudoti ir svetainėse.

Numatytoji padėties nustatymas (statinis)

Jei nenurodėte bloko elemento padėties arba nurodėte statinį , tai yra tas pats dalykas, tada bloko elementai išdėstomi eilės tvarka. Be to, kitas blokas (pavyzdžiui, raudonas) yra naujoje eilutėje. Be to, šiai padėties nustatymui įtakos neturi atstumų nustatymas kairėje, viršuje, dešinėje ir apačioje.

Absoliutus padėties nustatymas (absoliutus)

Naudojant absoliučią padėties nustatymą, elemento padėtis nurodoma naršyklės lango kraštų atžvilgiu, naudojant atstumus, nurodytus kairėje , viršuje , dešinėje ir apačioje. Jei vienu metu nurodote atstumus į kairę ir į dešinę ir jie prieštarauja vienas kitam, tada pirmenybė teikiama kairėje , tas pats pasakytina apie viršų ir apačią , kuriose viršenybė teikiama atstumui viršuje. Absoliutus pozicionavimas labai dažnai naudojamas kartu su santykiniu pozicionavimu projektavimo tikslais, kai reikia išdėstyti įvairius elementus vienas kito atžvilgiu, taip pat galima sukurti išskleidžiamuosius meniu, svetainės išdėstymą ir pan.

Fiksuotas padėties nustatymas

Fiksuotas padėties nustatymas skiriasi nuo kitų pozicionavimo tipų ir nejuda kartu su turiniu, kai slenkate puslapiu. Fiksuotos padėties bloko elementai yra pritvirtinami prie naršyklės lango kraštų naudojant kairę , viršutinę , dešinę ir apatinę ypatybes. Fiksuotas padėties nustatymas naudojamas kuriant rėmelių sąsajas (naršyklės langas padalintas į kelias sritis), fiksuotam meniu, fiksuotai svetainės poraštei ir „nuolatiniams“ blokams (nuorodų sąrašas, socialiniai mygtukai ir kt.).

Santykinis padėties nustatymas

Santykinė padėtis nurodoma nurodant atstumus kairėje , viršuje , dešinėje ir apačioje, palyginti su dabartine padėtimi.

Tačiau šią bloko poziciją taip pat galima sukurti naudojant paraštės ypatybę.

Santykinį padėties nustatymą nėra smagu naudoti atskirai, jis dažniausiai naudojamas kartu su absoliučia padėties nustatymu.

Apsvarstykime variantus:

Naudodami CSS padėties nustatymą, galite įdėti elementą tiksliai ten, kur norite. Kartu su plūdėmis (žr. 13 pamoką) padėties nustatymas suteikia puikių galimybių sukurti tikslius ir sudėtingus dizainus.

Šioje pamokoje aptarsime šiuos dalykus:

CSS padėties nustatymo principai

Įsivaizduokime naršyklės langą kaip koordinačių sistemą:

CSS padėties nustatymo principai yra tokie, kad langelį galite išdėstyti bet kurioje koordinačių sistemos vietoje.

Tarkime, kad norime paskelbti titulą. Naudojant dėžutės modelį (žr. 9 pamoką), antraštė atrodo taip:

Jei norime jį išdėstyti 100 pikselių nuo dokumento viršaus ir 200 pikselių iš kairės, turime įvesti šį CSS kodą:

H1 (padėtis:absoliutus; viršuje: 100 taškų; kairėje: 200 taškų; }

Štai rezultatas:

Kaip matote, CSS padėties nustatymas yra labai tiksli elementų išdėstymo technika. Tai daug lengviau nei naudoti lenteles, skaidrius vaizdus ar panašius dalykus.

Absoliutus pozicionavimas

Elementas, esantis visiškai, negauna vietos dokumente. Tai reiškia, kad po padėties jis nepalieka tuščios vietos.

Norint absoliučiai išdėstyti elementą, pozicijos ypatybė turi turėti reikšmę absoliutus. Galite naudoti vertes paliko, teisingai, viršuje Ir apačiojeįdėti dėžutę.

Kaip absoliutaus padėties nustatymo pavyzdį, dokumento kampuose įdėsime 4 langelius:

#box1 ( padėtis: absoliutus; viršuje: 50 pikselių; kairėje: 50 pikselių; ) #box2 ( padėtis: absoliutus; viršuje: 50 pikselių; dešinėje: 50 pikselių; ) #box3 ( padėtis: absoliutus; apačioje: 50 pikselių; dešinėje: 50 pikselių; ) #box4 ( padėtis: absoliutus; apačioje: 50 pikselių; kairėje: 50 pikselių; )

Santykinis padėties nustatymas

Norėdami palyginti elemento padėtį, nustatykite pozicijos ypatybę į giminaitis. Skirtumas tarp santykinio absoliutaus padėties nustatymo yra tai, kaip apskaičiuojama padėties nustatymas.

Elemento padėtis, palyginti su apskaičiuojamas pagal pradinę padėtį dokumente. Tai reiškia, kad elementą perkeliate į dešinę, kairę, aukštyn arba žemyn. Taigi elementas po pozicionavimo vis tiek užima vietą dokumente.

Kaip santykinės padėties nustatymo pavyzdį, pabandykime įdėti tris paveikslėlius, palyginti su jų pradine vieta puslapyje. Atkreipkite dėmesį, kad po perkėlimo brėžiniai paliko tuščios vietos pradinėse dokumento vietose.

Ar vis dar nesuprantate, kaip CSS veikia absoliutus padėties nustatymas, ir prarandate elementus ekrane? Supraskime šią magiją.

Įvadas į pozicionavimą

Kai nustatote poziciją: absoliutus , į priekį iškyla ne pats elementas, o jo pirminis konteineris, nes padėties nustatymas CSS yra santykinis su juo. Sunkumas yra tas, kad tai ne visada yra tiesioginis elemento tėvas.

Pažiūrėkime į kodą su keturiais „div“, įtaisytais vienas kito viduje, kaip lizdinėje lėlėje.

< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body >

Langeliai 1 , 2 dėžė ir 3 dėžutės yra sucentruoti grožiui naudojant paraštę: auto ir flex CSS ypatybes. 4 dėžutės blokas lieka numatytoje padėtyje dokumentų sraute.

korpusas ( ekranas: lankstus; ) .box-1, .box-2, .box-3 ( ekranas: lankstus; paraštė: automatinis; )

kūnas ( ekranas: lankstus; 1 langelis, 2 langelis, 3 langelis ( ekranas: lankstus; Marža: auto;

Visi 4 elementai turi numatytąją padėtį. Šiuo metu išdėstymas atrodo taip:

.dėžutė-4 be padėties nustatymo

Prieš ką mes pozicionuojame?

Kad elementas galėtų išsidėstyti, jis turi žinoti du dalykus:

• kuris iš tėvų taps atskaitos tašku;
• poslinkio dydis atskaitos taško atžvilgiu (viršuje, apačioje, dešinėje arba kairėje).

Jei langelyje-4 apibrėžiate poziciją: absoliutus, tas elementas paliks įprastą dokumento eigą. Bet dabar jis lieka savo vietoje, nes poslinkio koordinatės nenurodytos. Jei elemento plotis CSS neapibrėžtas, jis bus lygus jo turinio pločiui (be užpildymo ir kraštinės).

.box-4 su absoliučia padėtimi be poslinkio

Dabar pridėkime ypatybes viršuje: 0 ir kairėje: 0 . Elementas turi nustatyti, kuris pirminis konteineris taps šių koordinačių atskaitos tašku. Artimiausias elementas, turintis nestatinę padėtį (dažniausiai padėtis: santykinis), tampa juo. langelis-4 vienas po kito pradeda tardyti savo protėvius. Netinka nei 3 laukelis, nei 2 laukelis, nei 1 langelis, nes jie turi numatytąją CSS padėties vietą (nustatyta).

Jei išdėstytas protėvis nerandamas, elementas dedamas dokumento korpuso atžvilgiu:

.box-4 su absoliučia padėtimi. Pirminiai elementai be padėties nustatymo

Jei nustatote padėtį: langelio-1 elemento atžvilgiu, jis tampa atskaitos tašku:

.box-4 su absoliučia padėtimi. .box-1 su santykine padėtimi

Absoliučiai išdėstytas elementas yra išdėstytas artimiausio jo protėvio atžvilgiu.

Suradus atskaitos tašką, viskas, kas yra virš jo DOM medyje, nustoja reikšmės.

Jei nustatysite poziciją: santykinis ir langeliui-2 , tada langelis-4 bus išdėstytas jo atžvilgiu, nes šis protėvis yra arčiau.

.box-4 su absoliučia padėtimi. .box-2 su santykine padėtimi

Panašiai ir dėžės-3 konteineriui:

Kaip tikriausiai jau žinote, svetainę galite maketuoti naudodami lenteles, tokiu atveju puslapis yra padalintas į langelius. Šiems tikslams taip pat galite naudoti blokus, kai svetainės puslapis susideda iš atskirų elementų.

Tikriausiai nesuklysiu, jei pasakysiu, kad rimta problema daugeliui pradedančiųjų žiniatinklio valdytojų yra užduotis dėti blokus tam tikroje tinklalapio vietoje.

Vienas iš pagrindinių sunkumų maketuojant naudojant blokus yra tų pačių blokų išdėstymas (išlygiavimas).

Šiek tiek apie sluoksnius

Manau, kad daugelis iš jūsų esate girdėję apie tokį dalyką kaip sluoksnis. Ir, kaip taisyklė, sluoksnis suprantamas kaip blokas, nurodytas žymos