bogstav-mellemrum linje-højde liste-stil margen maks-højde maks-bredde min-højde min-bredde kontur overløb udfyldning position højre tekst-justering tekst-dekoration tekst-indrykning tekst-transformer top lodret-juster hvid-mellemrum bredde ord-mellemrum

HTML-reference HTML-lektioner Videokurser om oprettelse af hjemmeside

Med egenskaben POSITION

Ejendom	Værdier	Etc*	Hc*
position	statisk, relativ, absolut, fast, arve	+	-

Ejendom definerer elementpositioneringsskema om hans forælder. Elementer med absolut og fast positionering behandles som blokelementer.

Værdier:

statisk— statisk positionering, som den er.
arve— arv af ejendomme fra forælderen.

Lad os se på de resterende værdier mere detaljeret.

relativ værdi: relativ positionering

Elementet forskydes i forhold til dets position med de mængder, der er angivet af værdierne for egenskaberne nederst, venstre, højre, øverst. Dette påvirker ikke arrangementet af elementer i det normale flow efter det, som om det ikke havde bevæget sig.

Element (position: relativ; top: 25px; venstre: 50px; højde: 100px; bredde: 100px; kant: 2px fast #000;)
— positionering er indstillet for blokken med billedet i forhold og forskudt fra toppen med 25px og fra venstre med 50px. Elementet har bevæget sig i forhold til det normale flow, i praksis en fordobling af disse værdier:

absolut værdi: absolut positionering

Et absolut positioneret element indtager positionen bestemt af dets egenskabsværdier Nederst, Venstre, Højre, Top, som angiver dens forskydning i forhold til grænserne for moderselskabet.

Desuden ejendomsværdien Position det overordnede element påvirker størrelsen og placeringen af ​​det placerede. Hvis det har en mening statisk eller der ikke er nogen forælder, så sker forskydningen i forhold til browservinduets grænser. Absolut placerede blokke udelukkes fra det normale flow uden at påvirke placeringen af ​​andre elementer.

Element (position: absolut; top: 25px; venstre: 50px; højde: 100px; bredde: 100px; kant: 2px fast #000;)

— i lighed med det foregående eksempel tages kun absolut positionering for elementet. Det overlappede det forrige element, forskydningen blev målt fra grænserne for forælderen:

Betydning fast: fast positionering

Placeringen af ​​elementer med fast positionering bestemmes på samme måde som for absolut placerede. Den eneste forskel er, at de er strengt bundet til visningsområdets grænser og ikke ændrer deres position i browservinduet, når de ruller på siden.

Brug værdi fast sjældent. Typisk er dette vandret menuøverst eller nederst på siden, som i Yandex-mail.

Z-INDEX ejendom

Ejendom	Værdier	Etc*	Hc*
HELTAL, auto, arv	+	-

Egenskaben angiver placeringen af ​​det positionerede element i forhold til Z-aksen. Det betyder, at elementer er stablet oven på hinanden i stigende rækkefølge - jo højere z-indeks egenskabsværdien er, jo højere er elementet placeret. Kun gyldig for elementer, der har en egenskabsværdisæt Position og forskellig fra statisk.

Værdier:

auto— elementer placeres i rækkefølgen efter deres placering i sidekoden.
arve- arv fra en forælder.

Element-1, .element-2, .element-3 (position:relativ;)
.element-1 ( z-index:3; venstre:40px; top:50px; font-size:46px;)
.element-2 ( z-index:2; venstre:50px;)
.element-3 ( z-index:1; top:-50px; font-size:76px; color:#999;)

— vi har et billede som det andet element. Placeringsrækkefølgen af ​​det første og tredje element er ændret. Det nederste element-1 blev placeret ovenpå, og det tredje element viste sig at være det nederste "lag":

Et blokelement i HTML er et element, der som standard optager hele bredden af ​​dets overordnede element. Det overordnede element kan være et andet blokelement eller et browservindue. Du kan indstille bredden og højden af ​​et blokelement ved hjælp af CSS-egenskaber. Positionering blokelementer er processen med at placere dem inde i browservinduet og relativere dem ved hjælp af CSS-egenskabernes position, venstre, top, højre og bund. CSS-positionsegenskaben er designet til at indstille en af ​​fire tilgængelige typer positionering: statisk (standard), absolut, fast og relativ. De resterende CSS-egenskaber, nemlig venstre , top , højre og bund , bruges til at indstille afstande i forhold til venstre, øverste, højre og nederste kanter af det overordnede element. Blokelementer kan også overlappe hinanden ved indstilling af bestemte egenskaber, og denne mulighed det samme kan bruges på hjemmesider.

Standardpositionering (statisk)

Hvis du ikke har angivet en position for et blokelement eller specificeret static , hvilket er det samme, så er blokelementerne arrangeret i rækkefølge. Desuden er den næste blok (for eksempel: rød) placeret med ny linje. Denne positionering påvirkes heller ikke af indstilling af afstandene venstre , top , højre og bund .

Absolut positionering (absolut)

Med absolut positionering angives et elements position i forhold til kanterne af browservinduet ved hjælp af afstande angivet af egenskaberne venstre , top , højre og nederst. Hvis du angiver afstandene til venstre og højre på samme tid, og de er i konflikt med hinanden, så foretrækkes venstre , det samme gælder for top og bund , hvor afstanden top har forrang. Absolut positionering bruges ofte i forbindelse med relativ positionering til designformål, når det er nødvendigt at placere forskellige elementer i forhold til hinanden, kan også bruges til at lave rullemenuer, sitelayout mv.

Fast positionering

Fast positionering adskiller sig fra andre typer positionering og flytter sig ikke med indholdet, mens du ruller rundt på siden. Blokelementer med fast position forankres ved hjælp af egenskaberne venstre , top , højre og nederst til kanterne af browservinduet. Fast positionering bruges til at skabe rammegrænseflader (browservinduet er opdelt i flere områder), fast menu, en fast sidefod og "permanente" blokke (liste over links, sociale knapper etc.).

Relativ positionering

Relativ positionering specificeres ved at angive afstandene venstre , top , højre og bund i forhold til den nuværende situation.

Denne blokposition kan dog også oprettes vha margin egenskaber(indrykninger).

Relativ positionering er ikke sjov at bruge alene, den bruges mest i forbindelse med absolut positionering.

Lad os overveje mulighederne:

Hej kære læsere af bloggen. I dag vil vi tale om principper Html positionering elementer ved hjælp af CSS Positionsregler (med værdier absolut, relativ og fast) og egenskaber, der specificerer venstre, højre, top og bund offset. Ser du stjernen i nederste venstre hjørne? Når du har læst artiklen til slutningen, vil du finde ud af, hvordan den kom dertil.

I den sidste artikel talte vi om en af ​​de grundlæggende, som hjælper med at bryde den normale strøm af successive HTML-kode tags. Det giver dig mulighed for at implementere, som byggepladsen nu hovedsageligt er baseret på. Men ikke Float alene...

Position relativ - relativ positionering

Der er også Position, som er ansvarlig for at placere tags ved hjælp af cascading style sheets og også tillader bryde det normale flow. I forståelsen vil denne regel være lidt mere kompliceret end den tidligere diskuterede float, men jeg tror, ​​vi kan klare det.

Den har fire mulige værdier (statisk | relativ | absolut | fast). Hvordan kan vi vide dette? Nå, selvfølgelig, fra specifikationen, som er offentliggjort på den officielle hjemmeside:

Standardværdien er position: statisk. De der. i et normalt flow har de to CSS-regler, der kan bryde det, standardværdier på static og float:none. Så snart en af ​​disse værdier ændres, vil det normale flow af HTML-kode på dette sted blive forstyrret, for nu kan dette tag interagere med sine naboer på en helt anden måde eller endda slet ikke interagere.

Lad os starte med relativ positionering, som vil svare til værdien stilling: relativ. Når vi har registreret det for et tag, vil vi være i stand til at indstille offset (position) for dette element ved hjælp af yderligere regler Venstre, højre, top og bund(henholdsvis venstre, højre, op og ned):

Standarden for alle fire er Auto. Når vi angiver positionen: relativ regel for et tag, nulstilles indrykningsværdierne på alle sider til nul, og du får mulighed for selv at indstille dem.

Har brug for at forstå hvordan indrykninger sættes. For eksempel betyder venstre: 400px indrykning fra venstre side til højre med den tilsvarende mængde, og top: 100px betyder fra oversiden og ned. Hvis du angiver negative værdier for venstre, højre, top og bund, vil elementet bevæge sig i den modsatte retning (for eksempel er toppen til toppen og venstre er til venstre).

Lad os se på at bruge relativ på et flydende element. Lad os have to Div-beholdere, som vi toner med forskellige baggrundsfarver for klarhed ved hjælp af .

Vi vil i første omgang få den første container til at flyde til venstre ved hjælp af den tilsvarende egenskab, og siden den vil være tom, så giver vi den (og indrykning med margen):

Som et resultat vil vi få noget som dette oliemaleri:

Den første container flyder som forventet til venstre. Samtidig ser den anden blok ikke selv ud til at bemærke dette (fordi den), men den bemærker det inline-tekstelement, der flyder rundt om vores flydende blok.

Lad os nu tilføje til CSS regler for den første containerposition: relativ og indstil venstre og topmargen ved hjælp af Venstre og top:

Som et resultat vil vi se, at vores flydende element har bevæget sig i henhold til de angivne marginer:

Bemærk, at teksten stadig fortsætter med at flyde rundt om den, som om den stadig stod på plads. De der. Mange HTML-tags, når de er konstrueret, mener, at de er på deres rette plads (uden at tage højde for de venstre og øverste skift, vi specificerede i reglerne).

Men ikke alle tags vil gøre dette, ellers ville vi ikke se nogen ændringer. Nærmeste forfader med rulle(i vores tilfælde vil dette være HTML-tagget, dvs. faktisk visningsområdet) vil disse ændringer blive bemærket.

Princippet om drift af pårørende er ikke kompliceret, men det er ikke helt klart, hvorfor det kan bruges i praksis. Faktisk bruges denne regel i forbindelse med position absolut, og i denne form finder den meget bred anvendelse. Men først ting først.

Position absolut - absolut positionering i CSS

Lad os gå videre til at se på absolut positionering. Den nemmeste måde at begynde at se på denne CSS-regel er med et illustrativt eksempel. Lad os sige, at inde i Div-beholderen har vi et inline Span-tag, som vi vil indstille absolut positionering for.

Men lad os først se på denne konstruktion uden at tilføje "position: absolut". På samme tid, for at understrege spændvidden, tilføjer vi en højde til den, som alligevel ikke vil blive anvendt, og denne gang tilføjer vi CSS-koden, for en ændring, ikke gennem Head-konstruktionen:

<stiltype="text/css"> #abs( baggrund:#FFC0C0; margin-venstre: 100px; ) #abs span(baggrund:#C0FFC0; højde:100px; )

For Div sætter vi også venstre margen til 100px. Nå, lad os nu se, hvad der ændrer sig, hvis vi giver vores Span-linjetag en absolut positionering ved at tilføje CSS position absolutte regler:

#abs span(baggrund:#C0FFC0; højde:100px; position:absolut; )>

Der skete noget mærkeligt. At dømme efter det faktum, at egenskaben height:100px blev anvendt på Span, er den ophørt med at være et indlejret tag. Så sluttede fragmenterne "først" og "tredje" sig åbenbart sammen, som om elementet med ordet "anden" ikke længere eksisterede mellem dem. Det er præcis sådan, absolut positionering fungerer i CSS.

Men lad os se på alt punkt for punkt, når du sætter en egenskab til et element "position: absolut":

1. Det tag, som denne regel er specificeret for, bliver et blokmærke
2. Dimensionerne af denne blok vil blive bestemt af det indhold, den indeholder (medmindre du udtrykkeligt angiver dem ved hjælp af bredde og højde).

Ligesom for flydende elementer (med Float specificeret), hvis "position: absolut" anvendes på tagget, vil Margin-colloapse-effekten for sådanne tags ikke blive vist. De der. Ingen vil være i stand til at overføre deres lodrette indrykninger til ham, og han vil heller ikke være i stand til at overføre dem til nogen (han deler ikke lodrette indrykninger med nogen).

Hvis du husker den forrige artikel fra afsnittet "", vil du se, at alle tre af disse punkter blev observeret, når du oprettede flydende elementer ved hjælp af Float.

Derfor, hvis Float allerede var indstillet til et tag, men så blev "position: absolut" angivet for det, så nulstilles den første af browseren (den er ansvarlig for at parse koden) til Ingen (standardværdien), fordi der er ingen mening i at implementere to identiske modeller.

3. Et tag med angivet "position: absolut" interagerer ikke med andre HTML-kodeelementer undtagen dets nærmeste rullende forælder. Alle andre tags i koden bemærker simpelthen ikke et element med absolut positionering (og det kan ses fra vores eksempel)

Det er alt sammen godt, men ved hjælp af "absolut" skal vi udføre absolut positionering. Nå, faktisk, det er faktisk sandt. I kombination med det kan vi bruge de samme fire CSS-regler: Venstre, højre, top og bund. Hvordan vil de arbejde med absolut positionering?

De vil stadig sætte en forskydning, men forskydningen er ikke længere i forhold til den aktuelle position af elementet, men i forhold til grænserne for dets beholder.

Og selve konceptet beholder til absolut placerede elementer vil afvige fra den almindeligt accepterede. Fra tidligere artikler husker du sikkert, at en beholder til Html tag er viewporten, og for alle andre er forældrenes indholdsområde. Dette vil ikke være tilfældet for et tag med absolut position angivet.

Med absolut positionering vil vi selv kunne tildele beholderen (det vil være den første af forfædrene, der har positionsværdi er forskellig fra statisk, bruges som standard).

Lad os sige, at hvis vi kun indstiller absolut positionering, men ikke specificerede nogen værdier for venstre, højre, top og bund regler, så vil standard auto værdien blive brugt til dem, og et sådant element vil forblive på sin plads (som i vores sidste skærmbillede). Alt burde være klart her.

CSS bruger forfader-barn-strukturen, som jeg allerede skrev lidt detaljeret om i artiklen om . Vores opgave, når vi definerer en beholder for et absolut positioneret tag, vil være at finde en forfader med en position, der har en anden værdi end statisk (dvs. når den var eksplicit specificeret).

I vores eksempel tildelte vi ikke en position til nogen af ​​forfædrene til Span-tagget, så efter at have nået toppen ( HTML tag) vi stopper der. Lad os sætte nul udfyldning for eksemplet diskuteret lige ovenfor og sikre os, at vi har ret:

#abs span(baggrund:#C0FFC0; højde:100px; position:absolut; venstre:0; top:0; )>

Som et resultat blev det absolut placerede mærke trykket mod nul-referencepunktet for viewporten. Men vi er selv frie vælg en beholder for et element med den angivne position absolut. Hvordan kan dette gøres?

Kombinationen af ​​position absolut og relativ i Div layout

Nå, hvorfor ikke bruge CSS-reglen "position: relativ" til dette. Lad os registrere det det nødvendige tag forfader (som i sidste ende vil blive en beholder for et absolut positioneret element), og vil ikke specificere værdierne Venstre, højre, øverst eller nederst, og derved foretager der faktisk ingen ændringer overhovedet i positionen af ​​denne forfader (det vil forblive i det normale flow), men tildele hans container og begyndelsen af ​​rapporten for vores absolutte positionering.

Hvis vi indtaster "relativ" for Body-tagget, ændres vores billede en smule:

Du kan se, der er opstået karakteristiske fordybninger, hvilket indikerer, at det øverste venstre hjørne af Body-tagget nu tages som udgangspunkt. Husk, at standardværdierne for dette tag inkluderer en margen på 8 pixels, hvilket er, hvad vi ser:

Lad os nu, ud over det, der allerede er blevet gjort, skrive "position: relativ" for Div-beholderen, hvori Span-tagget bor:

Som vi ser, har billedet ændret sig. På trods af at slægtning er angivet for både Body og Div, var det Div, der blev beholderen for det absolut placerede Span, pga. han er første forfader, hvis positionsværdi er anden end statisk.

Desuden, hvis vi også skriver , for vores Div, vil vi se, at indholdsområdet med den eksisterende interne polstring vil blive brugt som en beholder til absolut positionering:

#abs(baggrund:#FFC0C0; margin-venstre: 100px; position: relativ; kant:12px stiplet #ccf; polstring:20px; )

Som det fremgår af eksemplet, er referencepunktet placeret til venstre øverste hjørne inde i elementrammen (langs dens indre kant). Derfor følger reglen, at for tags med "position: relativ" (som er containere med absolut positionering), ville det være bedre slet ikke at bruge en ramme for at undgå overskridelser.

Indrykninger (offset) Venstre, højre, top og bund kan specificeres ikke kun i absolutte enheder(læs om ), men også som en procentdel, som vil blive taget fra bredden (venstre og højre) og højden (top og bund) af den resulterende beholder. De der. "top:100%" vil svare til 100% af containerens højde, og "venstre:100%" vil svare til 100% af dens bredde.

Og det var interaktionen beskrevet ovenfor, jeg havde i tankerne, da jeg talte om kombination af position absolut og relativ. Takket være dette har vi mulighed for selv at vælge containeren, eller med andre ord udgangspunktet for absolut positionering. Hvorfor bruges dette link i praksis?

For at implementere en opgave, der ligner for eksempel, eller den såkaldte Litebox til visning af et billede i fuld størrelse, kan de bruge dette princip.

De der. hvis du har brug for på siden danne et elements udseende og skjul, som, når den vises, ikke vil påvirke alle andre tags (interagere med dem). I dette tilfælde vil udseendet af en absolut positioneret blok ikke medføre ryk og omstrukturering af hele websiden.

For en rullemenu skal du gøre noget i stil med følgende. Når du holder musemarkøren (indstillet i CSS med ) over rodmenupunktet, vises et element, der er placeret absolut positioneret med "absolut" (indlejrede menupunkter oprettet baseret på ). Denne rulleliste vises ved siden af ​​rodmenupunktet af den simple grund, at position: relativ er angivet i den. Alle.

Position fast - snap til viewport

Den sidste positioneringsmetode er "position: fast". De tidligere diskuterede metoder blev designet til placering i forhold til alle HTML-kodeelementer. Men hvis vi begynder at rulle på siden, flytter dens tags (selv dem med absolut eller relativ positionering) op (eller ned).

Men når du bruger fast, vil dette ikke længere ske. Et element, der er placeret på denne måde, vil altid være i samme position i visningen, uanset rulningen af ​​websiden. Du har sikkert allerede stødt på sådanne muligheder på websteder. For eksempel er noget af et værk baseret på en lignende effekt. populært plugin til WordPress kaldet .

For et tag med den angivne position:fixed er der ingen, der leder efter en container, fordi det er selve viewporten. Dette er netop forskellen fra "absolut", og alt andet er det samme. Blokke med fast placering opfører sig, når du ruller på siden, som om de var elementer i dit browservindues grænseflade (de er altid lige ved hånden).

På denne måde implementeres eksempelvis værktøjslinjer, drop-down paneler med mulighed for at give feedback osv. ting. Som et eksempel her på siden Jeg indstiller position: fast til et lille billede i nederste venstre hjørne af din skærm (viewport):

Det er alt for i dag, i den næste artikel vil vi tale om , som kun gælder for allerede placerede kodeelementer, dvs. for hvilke enten fast, relativ eller absolut er specificeret.

Held og lykke! Vi ses snart på bloggens sider

Du kan se flere videoer ved at gå til

");">

Du kan være interesseret

Positionering ved hjælp af Z-indeks og CSS-markørregel for at ændre musemarkøren
Flyd og klar i CSS - bloklayoutværktøjer
Liste stil(type, billede, position) - Css regler for tilpasning udseende lister i HTML-kode
Display (blok, ingen, inline) i CSS - indstil visningstypen HTML-elementer på websiden
Hvad er CSS til, hvordan forbinder man cascading style sheets til HTML-dokument og den grundlæggende syntaks for dette sprog

To hovedværktøjer bruges ofte til sidelayout - positionering Og fri bevægelighed (svævende). CSS-positionering lader dig specificere, hvor et elements boks skal vises, og free float flytter elementer til venstre eller højre kant af beholderboksen, så resten af ​​indholdet kan "flyde" rundt om det.

Placering og fri bevægelighed af elementer

1. Typer af positionering

Positionsegenskaben giver dig mulighed for præcist at angive den nye placering af blokken i forhold til, hvor den ville være i dokumentets normale flow. Som standard er alle elementer arrangeret sekventielt efter hinanden i den rækkefølge, som de er defineret i HTML-dokumentets struktur. Ejendommen går ikke i arv.

position
Betyder:
statisk	Standardværdien betyder ingen positionering. Elementer vises sekventielt efter hinanden i den rækkefølge, som de er defineret i HTML-dokumentet. Bruges til at slette enhver anden positioneringsværdi.
i forhold	Et relativt placeret element flyttes fra sin normale position i forskellige retninger i forhold til grænserne for dets moderbeholder, men den plads, det optog, forsvinder ikke. Et sådant element kan dog overlappe andet indhold på siden. Hvis du for et relativt placeret element indstiller egenskaberne top og bund eller venstre og højre på samme tid, så vil i det første tilfælde kun toppen fungere, i den anden - venstre. Relativ positionering giver dig mulighed for at indstille et z-indeks for et element, samt absolut placere underordnede elementer i en blok.
absolut	Et absolut positioneret element fjernes fuldstændigt fra dokumentstrømmen og placeres i forhold til grænserne for dets containerblok (et andet element eller browservindue). Beholderblokken for et absolut positioneret element er det nærmeste forfaderelement, hvis positionsegenskabsværdi ikke er statisk. Placeringen af ​​elementets kanter bestemmes ved hjælp af offset-egenskaberne. Den plads, som et sådant element optog, kollapser, som om elementet ikke fandtes på siden. Et absolut positioneret element kan overlappe eller blive overlejret af andre elementer (på grund af z-indeks egenskaben). Ethvert absolut positioneret element genererer en blok, det vil sige, det tager værdivisningen: blok; .
fast	Retter et element på et bestemt sted på siden. Containerblokken for et fast element er viewporten, det vil sige, at elementet altid er fast i forhold til browservinduet og ændrer ikke sin position, mens du ruller siden. Selve elementet fjernes fuldstændigt fra hoveddokumentflowet og oprettes i et nyt dokumentflow.
initial	Indstiller egenskabsværdien til standardværdien.
arve	Arver egenskabsværdien fra det overordnede element.

Ris. 1. Forskellen mellem statisk, relativ og absolut positionering

2. Offset egenskaber

Egenskaber beskriver forskydningen i forhold til den nærmeste side af containerblokken. Sæt til elementer, for hvilke værdien for positionsegenskaben ikke er statisk. De kan tage både positive og negative værdier. Ikke nedarvet.

For den øverste egenskab flytter positive værdier den øverste kant af det placerede element nedenfor, og negative værdier flytter den øverste kant af dets containerblok. For den venstre egenskab flytter positive værdier kanten af ​​det positionerede element til højre, og negative værdier flytter kanten af ​​det positionerede element til venstre. Det vil sige, positive værdier flytter elementet inde i containerblokken, og negative værdier flytter det uden for det.

3. Placering i et element

For containerblokken af ​​et absolut positioneret element er positionen: relativ egenskab sat uden forskydninger. Dette gør det muligt at placere elementer i et beholderelement.

.wrap (polstring: 10px; højde: 150px; position: relativ; baggrund: #e7e6d4; tekstjustering: højre; kant: 3px stiplet #645a4e; ) .white (position: absolut; bredde: 200px; top: 10px; venstre : 10px; polstring: 10px; baggrund: #ffffff; kant: 3px stiplet #312a22; )
Ris. 2. Absolut relativ positionering

4. Positioneringsproblemer

1. Hvis bredden eller højden af ​​et absolut placeret element er indstillet til auto , vil dets værdi blive bestemt af bredden eller højden af ​​elementets indhold. Hvis bredden eller højden er deklareret eksplicit, så er dette den værdi, der vil blive tildelt.
2. Hvis inde i en blok med position: absolut er der elementer for hvilke flydeomslag, så vil højden af ​​dette element være lig med højden af ​​det højeste af disse elementer.
3. For et element med position: absolut eller position: fast, kan du ikke samtidig indstille float-egenskaben, men for et element med position: relativ, kan du.
4. Hvis forfaderen til det positionerede element er et blokelement, er blokbeholderen dannet af indholdsområdet afgrænset af grænsen. Hvis forfaderen er et inline-element, dannes beholderblokken af ​​den ydre grænse af dens indhold. Hvis der ikke er nogen forfader, er beholderblokken kropselementet.

5. Fri bevægelighed for elementer

I normal rækkefølge gengives blokelementer fra den øverste kant af browservinduet og arbejder mod den nederste kant. Float-egenskaben giver dig mulighed for at flytte ethvert element ved at justere det til venstre eller højre kant af websiden eller containerelementet, der indeholder det. I dette tilfælde vil andre blokelementer ignorere det, og inline elementer vil skifte til højre eller venstre, frigøre plads til det og flyde rundt om det.

Ris. 3. Fri bevægelighed for elementer

En flydende blok tager dimensionerne af sit indhold under hensyntagen til polstring og grænser. De øverste og nederste marginer af flydende elementer falder ikke sammen. Float-egenskaben gælder både for blokelementer og inline-elementer.

Den venstre eller højre ydre kant af et flyttet element kan, i modsætning til positionerede elementer, ikke placeres til venstre (eller højre) for inderkanten af ​​dets containerblok, dvs. gå ud over dets grænser. Desuden, hvis containerblokken er indstillet til polstring, så vil den flydende blok være placeret i afstand fra kanten af ​​containerblokken i en specificeret afstand.

Egenskaben ændrer automatisk den beregnede (browser-viste) værdi af visningsegenskaben til at vise: blok for følgende værdier: inline , inline-block , table-row , table-row-group , table-column , table-column-group , tabel-celle . tabel-billedtekst, tabel-overskrift-gruppe, tabel-sidefod-gruppe. Værdien af ​​inline-tabel ændres til tabel .

Egenskaben har ingen effekt på elementer med display: flex og display: inline-flex .

Når du bruger float-egenskaben på blokelementer, skal du sørge for at angive en bredde. Dette vil skabe plads til andet indhold i browseren. Men hvis den kombinerede bredde af alle kolonner er større end den tilgængelige plads, så sidste element vil gå ned.

Samtidig falder de lodrette marginer af flydende elementer ikke sammen med marginerne af naboelementer, i modsætning til almindelige blokelementer.

6. Annuller flow omkring elementer

6.1. klar ejendom

Egenskaben clear bestemmer, hvordan det element, der følger efter det flydende element, vil blive placeret. Egenskaben annullerer float på den ene eller begge sider af elementet, der er indstillet af float-egenskaben. For at forhindre, at baggrund eller kanter vises under flydende elementer, skal du bruge reglen (overløb: skjult;).

6.2. Rensning af en stream med stilarter ved hjælp af clearfix-klassen og :after-pseudoklassen

Antag, at du har en blokcontainer, for hvilken bredde og højde ikke er angivet. En flydende blok med specificerede dimensioner er placeret inde i den.

.container ( polstring: 20px; baggrund: #e7e6d4; kant: 3px stiplet #645a4e; ) .floatbox ( float: venstre; bredde: 300px; højde: 150px; margin-højre: 20px; polstring: 0 20pffff; ; kant: 3px stiplet #666666; ) Ris. 4. "Sammenbrudseffekt" af beholderblokken

Løsning på problemet:
Vi opretter .clearfix-klassen og i kombination med :after-pseudo-klassen anvender vi den på containerblokken.

.container ( polstring: 20px; baggrund: #e7e6d4; kant: 3px stiplet #645a4e; ) .floatbox ( float: venstre; bredde: 300px; højde: 150px; margin-højre: 20px; polstring: 0 20pffff; ; border: 3px stiplet #666666; ) .clearfix:after ( indhold: ""; display: blok; højde: 0; clear: begge; synlighed: skjult; )

Anden mulighed for at rydde streamen:

Clearfix:after ( indhold: ""; display: table; clear: both; )
Ris. 5. Anvendelse af "rengøringsmetoden" på en beholderblok indeholdende et flydende element

6.3. En nem måde at rense et vandløb på

Der er et andet trick til at rydde op i flowet for et element, der indeholder flydende elementer, såsom en vandret punktopstilling:

Ul ( margin: 0; listestil: ingen; polstring: 20px; baggrund: #e7e6d4; overløb: auto; ) li ( float: venstre; bredde: beregnet(100% / 3 - 20px); højde: 50px; margin- højre: 20px; baggrund: #ffffff; kant: 3px stiplet #666666; ) li:sidste-barn (margin-højre: 0;) Fig. 6. Oprydning af det vandrette listeflow

position

CSS position egenskab bruges til at angive, hvordan et HTML-element skal placeres på en side. Ændring af placeringen af ​​selve elementet sker ved hjælp af egenskaberne top, højre, bund og venstre.

Ejendomstype

Formål: positionering.

Gælder for: alle elementer.

Nedarvet: nej.

Værdier

Værdien af ​​CSS-positionsegenskaben er en af søgeord angivelse af positioneringsmetoden.

• statisk- det sædvanlige arrangement af et element på siden, under hensyntagen til dets type (blok, inline osv.) og de elementer, der omgiver det.
• i forhold- relativ positionering. Browseren placerer først elementet som i en normal position og flytter det derefter i forhold til denne placering. Samtidig opfører de resterende HTML-elementer sig, som om elementet ikke var blevet flyttet nogen steder, det vil sige, at det sted, hvor det var før forskydningen, forbliver ubesat, og de "ser" det ikke på det nye sted.
• absolut- absolut positionering. Et element er placeret i forhold til dets nærmeste forfader, hvis positionsegenskabsværdi ikke er lig med statisk (det vil sige, position er til stede i to elementer på én gang). Hvis der ikke er en sådan forfader, er elementet placeret i forhold til browservinduet. Samtidig opfører de omgivende HTML-elementer sig, som om det absolut placerede element slet ikke er på siden, det vil sige, at formatering sker uden dets deltagelse.
• fast- også absolut positionering. Næsten det samme som absolut , kun her kan elementet slet ikke placeres i forhold til noget forfaderelement, men kun i forhold til browservinduet, så positionsegenskaben bruges kun til selve elementet. Derudover ændrer elementet ikke sin placering i vinduet, når du ruller.
• arve- arver værdien af ​​CSS-positionsegenskaben fra det overordnede element.

Som du ved, kan almindelige inline-elementer ikke udtrykkeligt gives højde (CSS) eller bredde (CSS). Men hvis en positioneringsværdi på absolut eller fast anvendes på et inline-element, kan det ændres størrelse. Husk denne funktion, den hjælper ofte meget.

Indtastning i procent: eksisterer ikke.

Standard værdi: statisk.

HTML-elementer kaldes forfædre for de tags, der er inde i dem på et hvilket som helst nesting-niveau, og forældre for dem, der er inde i dem på det første niveau. Naturligvis er forfædre også forældreelementer for deres efterkommere af det første niveau af rede (børn).

Ved positionering er det naturligvis slet ikke nødvendigt at bruge CSS-egenskaberne top , right , bottom eller left for at ændre elementets position. Ja, kl relativ positionering dette vil ikke give meget effekt - elementet vil blive revet ud af den direkte strøm, men ingen vil være i stand til at tage dets plads alligevel. Men med absolut vil elementet ikke kun blive "revet ud" fra HTML-sidens kontekst, men også lavere elementer vil tage dets plads. Desuden, med position: fast, vil den også forblive på ét sted, når du ruller.

Billederne nedenfor viser fire elementer på siden, en forælder og dens tre børn, og placeringsmuligheder for et af dem børneelementer i forhold til forælderen (absolut) og i forhold til dens oprindelige plads (relativ).

Syntaks

position: statisk | pårørende | absolut | fast | arve

CSS eksempel: brug af position

CSS versioner

Version:	CSS 1	CSS 2	CSS 2.1	CSS 3
Support:	Ingen	Ja	Ja	Ja

Browsere

Browser:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera
Version:	6,0 og 7,0	8.0 og højere	2.0 og højere	2.0 og højere	9,2 og højere	3.1 og højere
Support:	Delvist	Ja	Ja	Ja	Ja	Ja

Internet Explorer 6.0 og 7.0 forstår ikke arveværdien, IE 6.0 forstår endnu ikke fast .