Posisjonering. Hvordan plasserer jeg blokkene riktig i css? Relativ plassering av css-elementer

15.03.2017

Ikke ennå

Hei alle sammen!
I dagens opplæring vil jeg vise deg hvordan du kan plassere et element hvor som helst på skjermen ved å bruke blokkplassering.
Hva gir blokkposisjonering oss? Ved å bruke plasseringen av blokkene, vil utgiveren kunne lage et hvilket som helst unikt nettsteddesign, og plassere blokkene hvor han vil. For å plassere blokker hvor som helst på skjermen, spesifiser bare koordinatene.

Koordinater i CSS

eiendom "TOPP» | « VENSTRE» | « IKKE SANT» | « BUNN »
Koordinater må foreskrives for plassering av blokkene, det vil si hvor blokken skal plasseres.

Koordinatsystemdiagram:

Koordinater er angitt med fire regler:

• topp- opp;
• venstre- venstre;
• Ikke sant- Ikke sant;
• bunn- ned.

Syntaks:

Rule_Coordinate: verdi_koordinat;

Betydning:
Angi verdien i px eller %.

Topp: 100px; / * toppmarg * / venstre: 100px; / * venstre kant * /

Det er nok bare å spesifisere koordinatene på to kanter (på toppen eller bunnen, til venstre eller høyre).

Posisjonering i CSS

eiendom "POSISJON »
Posisjonering skrives i CSS gjennom "posisjon"-regelen med ønsket verdi.

Syntaks:

Posisjon: verdi;

Betydning:

• absolutt- absolutt;
• slektning- slektning;
• fikset- fikset.

La oss gå gjennom hver verdi.

Betydning" ABSOLUT "
Absolutt posisjonering lar webmaster plassere blokker på en nettside hvor som helst på skjermen. Det er nok å skrive "posisjons"-regelen i CSS med den "absolutte" verdien og de ønskede koordinatene:

Posisjon: absolutt; / * absolutt posisjonering * /

Resultat:

Betydning"SLEKTNING »
Relativ posisjonering lar webmaster flytte en blokk på en nettside, men den opprinnelige plassen til blokken frigjøres ikke for et annet element. I CSS legger du til "posisjons"-regelen med den "relative" verdien og de ønskede koordinatene:

Stilling: pårørende; / * relativ plassering * /

CSS står for Cascading Style Sheets. CSS beskriver hvordan HTML-elementer skal vises på skjerm, papir eller i andre medier. CSS sparer mye arbeid. Den kan kontrollere utformingen av flere nettsider samtidig. CSS kan legges til HTML-elementer på 3 måter: Inline - ved å bruke stilattributtet i HTML-elementer Intern - ved å bruke et element i seksjonen Ekstern - ved å bruke en ekstern CSS-fil Den vanligste måten å legge til CSS, er å beholde stiler i separate CSS-filer. Men her vil vi bruke inline og intern styling, fordi dette er lettere å demonstrere, og lettere for deg å prøve det selv.

Resultat:

Misligholde

Relativ posisjonering

Fast posisjonering i CSS

Verdien "FAST"
Fast posisjonering lar webmaster plassere blokker på nettsiden hvor som helst på skjermen, og når du ruller på nettsiden vil blokken alltid være plassert i forhold til nettleservinduet (den vil alltid være synlig på skjermen). Det er nok å skrive "posisjons"-regelen i CSS med den "faste" verdien og de ønskede koordinatene:

Posisjon: fast; / * fast posisjonering * /

CSS står for Cascading Style Sheets. CSS beskriver hvordan HTML-elementer skal vises på skjerm, papir eller i andre medier. CSS sparer mye arbeid. Den kan kontrollere utformingen av flere nettsider samtidig. CSS kan legges til HTML-elementer på 3 måter: Inline - ved å bruke stilattributtet i HTML-elementer Intern - ved å bruke et element i seksjonen Ekstern - ved å bruke en ekstern CSS-fil Den vanligste måten å legge til CSS, er å beholde stiler i separate CSS-filer. Men her vil vi bruke inline og intern styling, fordi dette er lettere å demonstrere, og lettere for deg å prøve det selv.

Hvis resultatet ikke er synlig og ikke forståelig, legg til nok tekst slik at et rullefelt vises på skjermen til nettsiden.

Så vi fullførte leksjonen! Det er 2-3 leksjoner igjen, og du er ferdig med å mestre det grunnleggende i CSS. Dette betyr at du enkelt kan lage vakre nettsider.
Ikke gå glipp av resten av leksjonene! Abonner på oppdateringer!

Forrige innlegg
Neste innlegg

Posisjonering er et av nøkkelbegrepene i blokklayout. Etter å ha taklet det, vil mye bli klart for deg, og layout fra sjamanisme vil bli en meningsfull prosess. Så denne artikkelen vil fokusere på CSS-egenskaper. posisjon og flyte.

1.posisjon: statisk

Som standard er alle elementene på siden statisk plassert (posisjon: statisk), noe som betyr at elementet ikke er plassert og vises i dokumentet på sin vanlige plass, det vil si i samme rekkefølge som i html-markeringen.

Det er ikke nødvendig å spesifikt tildele denne egenskapen til noe element, med mindre du må endre en tidligere angitt plassering til standard.

#content (posisjon: statisk;)

2. stilling: pårørende

Posisjon: relativ lar deg bruke topp-, bunn-, venstre- og høyre-egenskapene for å plassere et element i forhold til der det vil vises i normal plassering.

La oss flytte #content 20 piksler ned og 40 piksler til venstre:

#content (posisjon: relativ; topp: 20px; venstre: -40px;)

Legg merke til at det nå er tomt der #innholdsblokken vår skulle ha vært. Etter #content-blokken flyttet ikke #footer-blokken ned, fordi #content fortsatt finner sted i dokumentet, til tross for at vi flyttet det.

På dette stadiet kan det virke som om relativ posisjonering ikke er så nyttig, men ikke skynd deg med konklusjoner, senere i artikkelen vil du finne ut hva den kan brukes til.

3. stilling: absolutt

Med absolutt posisjonering (posisjon: absolutt) fjernes elementet fra dokumentet og vises der du forteller det.

La oss flytte # div-1a-blokken til øverste høyre hjørne av siden som et eksempel:

# div-1a (posisjon: absolutt; topp: 0; høyre: 0; bredde: 200px;)

Legg merke til at denne gangen, fordi # div-1a-blokken er fjernet fra dokumentet, har de resterende elementene på siden blitt plassert annerledes: # div-1b, # div-1c og #footer har flyttet opp til der de slettede blokk var. Og selve blokken # div-1a er plassert nøyaktig i øvre høyre hjørne av siden.

Dermed kan vi plassere et hvilket som helst element i forhold til siden, men dette er ikke nok. Faktisk må vi plassere # div-1a i forhold til den overordnede #innholdsblokken. Og på dette tidspunktet kommer relativ posisjonering inn igjen.

4.posisjon: fast

Fast posisjonering (posisjon: fast) er en underseksjon av absolutt posisjonering. Den eneste forskjellen er at den alltid er i det synlige området på skjermen og ikke beveger seg mens du ruller siden. I så måte ser det litt ut som et fast bakgrunnsbilde.

# div-1a (posisjon: fast; topp: 0; høyre: 0; bredde: 200px;)

I IE med posisjon: fast, er ikke alt så glatt som vi ønsker, men det er det mange måter omgå disse restriksjonene.

5.posisjon: relativ + posisjon: absolutt

Ved å tilordne posisjon: i forhold til #content-blokken, kan vi plassere alle underordnede elementer i forhold til dens grenser. La oss plassere # div-1a-blokken i øvre høyre hjørne av #content-blokken.

#innhold (posisjon: relativ;) # div-1a (posisjon: absolutt; topp: 0; høyre: 0; bredde: 200px;)

6. To kolonner

Bevæpnet med kunnskapen fra de foregående trinnene, kan du prøve å lage to kolonner ved å bruke relativ og absolutt posisjonering.

#innhold (posisjon: relativ;) # div-1a (posisjon: absolutt; topp: 0; høyre: 0; bredde: 200px;) # div-1b (posisjon: absolutt; topp: 0; venstre: 0; bredde: 200px;) ;)

En av fordelene med absolutt posisjonering er muligheten til å plassere elementer i hvilken som helst rekkefølge, uavhengig av hvordan de er plassert i markeringen. I eksemplet ovenfor er # div-1b-blokken plassert foran # div-1a-blokken.

Og nå bør du ha et spørsmål: "Hvor ble det av resten av elementene fra vårt eksempel?". De gjemte seg under absolutt plasserte blokker. Heldigvis finnes det en måte å fikse dette på.

7. To søyler med fast høyde

En løsning er å sette beholderen som inneholder søylene til en fast høyde.

#innhold (posisjon: relativ; høyde: 450px;) # div-1a (posisjon: absolutt; topp: 0; høyre: 0; bredde: 200px;) # div-1b (posisjon: absolutt; topp: 0; venstre: 0 ; bredde: 200px;)

Løsningen er lite egnet, siden vi aldri vet på forhånd hvilken størrelse teksten skal plasseres i kolonnene, og hvilken font som skal brukes.

8. Flyte

For kolonner med variabel høyde er absolutt plassering ikke egnet, så la oss se på et annet alternativ.

Ved å flyte blokken skyver vi den til høyre (eller venstre) kant så mye som mulig, og teksten som følger blokken vil vikle rundt den. Dette brukes vanligvis til bilder, men vi vil bruke det til en mer kompleks oppgave, siden dette er det eneste verktøyet vi har til rådighet.

# div-1a (flyt: venstre; bredde: 200px;)

9. "Flytende" høyttalere

Hvis vi tildeler flyte: venstre til den første blokken, og deretter flyte: venstre til andre, vil hver av blokkene kose seg til venstre, og vi får to kolonner, med variable høyder.

# div-1a (flyt: venstre; bredde: 150px;) # div-1b (flyt: venstre; bredde: 150px;)

Du kan også tilordne den motsatte flyteverdien til kolonnene, i dette tilfellet vil de bli fordelt langs kantene på beholderen.

# div-1a (flyt: høyre; bredde: 150px;) # div-1b (flyt: venstre; bredde: 150px;)

Men nå har vi et annet problem - kolonnene går utover den overordnede beholderen, og bryter dermed hele oppsettet. Dette er det vanligste problemet for nybegynnere layoutdesignere, selv om det kan løses ganske enkelt.

10. Ryddingsflåte

Flytrengjøring kan gjøres på to måter. Hvis det er en annen blokk etter kolonnene, er det nok å tildele klar: begge til den.

# div-1a (flyt: venstre; bredde: 190px;) # div-1b (flyt: venstre; bredde: 190px;) # div-1c (slett: begge;)

Eller tilordne overflow: hidden-egenskapen til den overordnede beholderen

#innhold (overflyt: skjult;)

Uansett vil resultatet være det samme.

Konklusjon

I dag har bare grunnleggende posisjoneringsteknikker blitt vurdert, og de enkleste eksemplene. For å hjelpe nybegynnere layoutdesignere, anbefaler jeg alltid en serie artikler av Ivan Sagalaev, som på en gang hjalp meg mye.

Nettutviklere kan i disse dager bygge komplekse oppsett av nettsider ved å bruke ulike CSS-teknikker. Noen av disse teknikkene har en lang historie (floats), andre (flexbox) har vunnet popularitet de siste årene.

I denne artikkelen skal vi se nærmere på noen av de lite kjente tingene om CSS-posisjonering.

Før vi begynner, la oss kort gjennomgå det grunnleggende om de forskjellige typene posisjonering.

Oversikt over tilgjengelige posisjoneringsmetoder

Posisjon CSS-egenskapen bestemmer typen posisjonering av et element.

Posisjoneringsalternativer

statisk er standard posisjoneringsegenskapsverdi. Vi rapporterer at dette elementet ikke bruker posisjonering - posisjonering brukes kun hvis du angir en annen posisjoneringstype enn standard.

For å gjøre dette, sett posisjonsegenskapen til en av følgende verdier:

• slektning
• absolutt
• fikset
• klissete

Og først etter å ha angitt posisjoneringen, kan du bruke egenskapene som forskyver elementet:

• Ikke sant
• bunn
• Startverdien for disse egenskapene er auto-søkeordet.

Det bør huskes at hvis et element har posisjonsegenskapen satt til absolutt eller fast, så er det et absolutt posisjonert element. Dessuten, for posisjonerte elementer, begynner z-indeks-egenskapen å fungere, som bestemmer overleggsrekkefølgen.

Forskjeller mellom grunnleggende posisjoneringsmetoder

La oss nå raskt se på tre grunnleggende forskjeller mellom de tilgjengelige posisjoneringstypene:

• absolutt plasserte elementer fjernes fullstendig fra strømmen, og deres nærmeste naboer tar deres plass.
• relativt posisjonert (relativt) og limt (klebrig) holder sin plass i bekken og deres nærmeste naboer okkuperer den ikke. Polstringen til disse elementene tar imidlertid ikke plass, men ignoreres fullstendig av andre elementer, og dette kan resultere i overlappende elementer.
• faste elementer (og fast posisjonering er en slags absolutt) er alltid posisjonert i forhold til viewporten (ignorerer forfedreposisjonering), mens limte elementer er posisjonert i forhold til den rullende nærmeste stamfaren (overløp: auto). Og bare i fravær av slike forfedre er de plassert i forhold til synlighetssonen.

Dette kan sees mer detaljert i demoen:

Merk: Plassering av "limelementer" er fortsatt en eksperimentell teknologi med begrenset nettleserstøtte. Selvfølgelig, hvis du vil, kan du bruke polyfill for å legge til denne funksjonaliteten i nettleseren, men gitt dens lave utbredelse, vil denne egenskapen ikke bli diskutert i denne artikkelen.

Posisjoneringselementer med absolutt posisjoneringstype

Jeg er sikker på at de fleste vet hvordan absolutt posisjonering fungerer. Imidlertid kan mange ting ved det være forvirrende for nybegynnere.

Så jeg bestemte meg for å begynne med det når jeg skulle beskrive lite kjente posisjoneringsfunksjoner.

Så et absolutt plassert element er forskjøvet fra sin nærmeste posisjonerte stamfar. Selvfølgelig fungerer dette hvis noen av forfedrene har en annen posisjon enn statisk - hvis elementet ikke har noen posisjonerte forfedre, er det forskjøvet fra viewporten.

Dette demonstreres av følgende eksempel:

I denne demoen er den grønne boksen opprinnelig plassert med absolutt null marger nederst: 0 og venstre: 0, dens stamfar (rød boks) var ikke plassert i det hele tatt.

Imidlertid har vi relativt plassert den ytre omslaget (et jumbotron-element). Legg merke til hvordan plasseringen av den grønne boksen endres når posisjoneringstypen til dens forfedre endres.

Absolutt plasserte elementer ignorerer flyteegenskapen

Hvis vi bruker absolutt eller fast posisjonering på et flytende element, vil flyteegenskapen bli satt til ingen. På den annen side, hvis vi setter relativ posisjonering, vil elementet forbli flytende.

Ta en titt på den tilsvarende demoen:

I dette eksemplet definerer vi to forskjellige elementer som skal flyte til høyre. Merk at når den røde boksen blir absolutt posisjonert, ignorerer den flyteverdien, mens den relativt plasserte grønne boksen beholder flyteverdien.

Absolutt plasserte inline-elementer blir blokknivå

Et inline-element med absolutt eller fast posisjonering overtar egenskapene til et blokkelement. For detaljer om konvertering av innebygde elementer til blokkelementer, se tabellen.

V i dette tilfellet vi har laget to forskjellige elementer. Den første (grønn blokk) er et blokkelement, og den andre (rød blokk) er et inline-element. I utgangspunktet er bare den grønne blokken synlig.

Den røde boksen er ikke synlig fordi bredde- og høydeegenskapene som er satt til den, bare fungerer på blokk- og inline-elementer, og siden den ikke har noe innhold, har den ingen dimensjoner.

Når den røde blokken er tilordnet absolutt eller fast posisjonering, blir den blokk og blokkstørrelsene spesifisert i den trer i kraft.

Absolutt plasserte elementer har ikke kollapsede marginer

Som standard, når to vertikale marger berører hverandre, blir de slått sammen til én lik maksimalt av dem. Dette kalles kollapsende marginer.

Absolutt plasserte elementer oppfører seg på samme måte som flytende elementer - deres polstring er ikke slått sammen med tilstøtende.

I denne demoen er elementet satt til et innrykk på 20 piksler. Dens polstring kollapser med det overordnede elementets polstring, som også er 20 piksler. Som du kan se, bare med absolutt posisjonering skjer ingen kollaps.

Men hvordan kan vi forhindre at polstringen kollapser? Vi må sette en slags skilletegn mellom dem.

Dette kan være polstring eller kant og kan brukes på både overordnede og underordnede elementer. Et annet alternativ er å legge til en clearfix til det overordnede elementet.

Plassering av elementer med piksler og prosenter

Har du noen gang brukt prosenter i stedet for piksler for å plassere elementer? Hvis svaret er ja, så vet du at forskyvningen av elementet avhenger av de valgte måleenhetene (piksler eller prosent).

Dette er litt flaut, ikke sant? Så først, la oss se hva spesifikasjonen sier om offset i prosent:

Forskyvning som en prosentandel av bredden (for venstre og høyre) eller høyden (øverst eller nederst) av den overordnede boksen. For limte elementer beregnes offset som en prosentandel av bredden (for venstre og høyre) eller høyde (øverst eller bunn) av strømmen. Negative verdier er tillatt.

Som nevnt, når du spesifiserer en forskyvning i prosent, avhenger plasseringen av et element av bredden og høyden til det overordnede elementet.

Demoen viser denne forskjellen:

Dette eksemplet bruker piksler og prosenter for offset. Selvfølgelig, når du setter forskyvningen i piksler, flyttes elementet dit det skal være.

Og hvis vi velger en prosentandel for offset, vil resultatet avhenge av størrelsen på det overordnede elementet. Her er en visualisering som viser hvordan den nye posisjonen beregnes:

Merk: Som du sikkert vet, lar transformeringsegenskapen (sammen med ulike oversettelsesfunksjoner) deg også endre posisjonen til et element. Men i dette tilfellet, når du bruker prosenter, vil beregningen være basert på størrelsen på selve elementet, og ikke dets overordnede.

Konklusjon

Jeg håper denne artikkelen hjalp deg med å forstå CSS-posisjonering bedre og klargjorde de underliggende kompleksitetene.

Det er nødvendig å flytte (dra, snu osv.) 3 grunnblokker 300x600x2400 minst 3-5 meter. Problemet er at de er plassert bak huset og det er ikke tilgang for kran eller annet spesialutstyr.
Senere ville jeg bruke blokkene til bygging av veranda. Men nå trenger jeg bare å frigjøre stedet der de ligger - jeg planlegger en baldakin-arbor der.
Vekten på hver (hvis jeg har regnet riktig) er ca 1 tonn. Noen tanker om dette?

Ja, det er ikke lett, men gjennomførbart. Min svigerfar og jeg tok en vanlig biljekk og noen tilsynelatende to-tommers rør og skrot. De tre blokkene våre lå også på et upraktisk sted, vi flyttet dem 15 meter Vi gjorde dette: Under kanten av blokken (de lå på siden, dvs. på den bredeste kanten) gravde vi et hull, dypt slik at knekt og hånd kunne passere gjennom, så det var å svinge spaken. Et lite stykke av et flatt brett ble plassert i bunnen av hullet for ikke å flekke jekken og for at den under belastning ikke skulle grave seg ned i bakken. Videre hevet de blokken ganske anstendig fra den ene kanten, og dyttet den nedenfra med en jekk. Jeg vet ikke nøyaktig i hvilken vinkel, i forhold til bakken, men slik at flere halvmeters rørrester kan legges jevnt under blokken. Deretter ble jekken senket og blokken ble lagt på rørene og jevnet mot jordoverflaten. Videre, inn i den lengste delen av røret (~ 1,8 m), som ikke var plassert under blokken, ble et brekkjern satt inn (for stivhet) og denne hybriden ble brukt som en spak, og hamret den under den andre enden av blokken og heve den i forhold til bakken (øke vinkelen mellom spaken og bakken) skyve blokken som fra seg selv. Prinsippet om å flytte blokker av de egyptiske pyramidene. Det ble kun brukt rør i stedet for stokker som ruller. Hvis jorda er flytende, kan du først legge lange flate bord under rørene før du senker jekken slik at rørene ikke graver seg under vekten av blokken. Vi presser, ikke glemme å legge et nytt rør under "nesen" på blokken, og klargjør det frigjorte røret fra under "akterenden" som det neste under nesen.
Totalt rullet vi disse blokkene med en varighet på 3 år hver sommer til vi trillet dem til porten. Alle tenkte på hvordan de skulle bruke dem, men de kom aldri på det. Vi bestilte en manipulator, han lastet dem på seg selv rett ved porten og tok dem ut i ukjent retning, mot betaling
Vanskeligheter oppstår på svinger hvis det er noen, men alt er også gjennomførbart hvis du slår rørene med en slegge under blokken, setter dem i retning og justerer blokkens posisjon med en spak fra sidene. Det virker bare tungt, og så blir man vant til det.

P.S. Vinsjen, som vi spesialkjøpte til disse blokkene, hjalp mye. Vinsjkroken kan hektes til stolpene fra gjerdet (vår gjorde det normalt) og blokkene kan trekkes gjennom rørene til disse stolpene med en vinsj. Blokken skulle ha 2 ører laget av armering, så vinsjen ble hektet på dem. Dette er lettere enn å skyve med en spak, men det tar lengre tid og det krever mye krefter også - å løpe hele tiden for å hekte vinsjen til neste stang.

P.P.S. Forklarte hvordan han kunne Hvis det - beklager.

Et blokkelement i HTML er et som som standard spenner over hele bredden av det overordnede elementet. Det overordnede elementet kan være et annet blokkelement, eller et nettleservindu. Et blokkelement kan settes til sin bredde og høyde ved å bruke CSS-egenskaper. Plassering av blokkelementer er prosessen med å plassere dem i nettleservinduet og i forhold til hverandre ved å bruke CSS-posisjonen, venstre, topp, høyre og bunn egenskaper. CSS-posisjonsegenskapen er ment å angi en av de fire tilgjengelige posisjoneringstypene: statisk (standard), absolutt (absolutt), fast (fast) og relativ (relativ). Resten av CSS-egenskapene, nemlig venstre, topp, høyre og bunn, er ment å sette avstandene i forhold til venstre, topp, høyre og bunnkant av det overordnede elementet. Også blokkeringselementer når du angir visse egenskaper kan overlappe hverandre, og denne funksjonen kan brukes på nettsteder.

Standardplassering (statisk)

Hvis du ikke spesifiserte posisjon på et blokkelement, eller du spesifiserte statisk, som er det samme, er blokkelementene ordnet i rekkefølge. Dessuten er neste blokk (for eksempel: rød) plassert på en ny linje. Denne posisjoneringen påvirkes heller ikke av å stille inn avstandene venstre, topp, høyre og bunn.

Absolutt posisjonering

Med absolutt posisjonering settes posisjonen til et element i forhold til kantene av nettleservinduet ved å bruke avstandene gitt av egenskapene til venstre, øverst, høyre og nederst. Hvis du spesifiserer avstandene til venstre og høyre samtidig, og de vil motsi hverandre, så foretrekkes venstre, det samme gjelder topp og bunn, der toppavstanden har forrang. Absolutt posisjonering brukes svært ofte i forbindelse med relativ posisjonering for designformål, når det er nødvendig å plassere ulike elementer i forhold til hverandre, kan det også brukes til å lage rullegardinmenyer, sidelayout, etc.

Fast posisjonering

Fast posisjonering er forskjellig fra andre typer posisjonering og beveger seg ikke med innholdet når du ruller siden. Fastplasserte blokkelementer er forankret ved å bruke egenskapene til venstre, øverst, høyre og nederst til kantene av nettleservinduet. Fast posisjonering brukes til å lage innrammede grensesnitt (nettleservinduet er delt inn i flere områder), en fast meny, en fast bunntekst på nettstedet og "permanente" blokker (liste over lenker, sosiale knapper, etc.).

Relativ posisjonering

Relativ posisjonering spesifiseres ved å spesifisere avstandene venstre, topp, høyre og bunn i forhold til gjeldende posisjon.

En slik blokkposisjon kan imidlertid også opprettes ved bruk av margin-egenskapen.

Relativ posisjonering er ikke morsom å bruke alene, den brukes mest i forbindelse med absolutt posisjonering.

Vurder alternativene: