Når du utvikler en hvilken som helst applikasjon, må komponenters plassering være passende for en bedre layout. For eksempel settes navigasjonslinjen for det meste øverst i applikasjonen, og sideinformasjonen er satt på alle sider av dokumentet, mest øverst, venstre eller høyre sider. Mer spesifikt tillater CSS deg å bruke "posisjon”Eiendom med verdien”fikset”For å angi navigasjonsikoner for å holde seg i samme posisjon på applikasjonen ved rulling.

Denne bloggen vil diskutere:

• Hva er CSS “posisjon”Eiendom?
• Hvordan lage et fast posisjonselement ved hjelp av CSS?

Hva er CSS “Position” eiendom?

CSS “posisjon”Eiendom brukes til å sette elementets posisjon på applikasjonen. De forskjellige verdiene som er tilknyttet CSS -posisjonens egenskap er “statisk”,“Absolutt”,“slektning”,“fikset”, Og“klissete”.

Disse eiendomsverdiene kan settes med de andre forskyvningsegenskapene, for eksempel “topp”,“venstre”,“bunn”, Og“Ikke sant”I CM, PX og mer. Disse forskyvningene justerer posisjonen til elementene på siden.

Hvordan lage et fast posisjonselement ved hjelp av CSS?

I HTML, legg til DIV -elementet med klassen "hoved-”. Inne i DIV -elementet, plasser elementet assosiert med følgende attributter:

• “src”Brukes til å spesifisere bildens lenke.
• “klasse”Attributt Få tilgang til bildet i CSS eller JavaScript ved hjelp av det spesifiserte navnet.
• “alt”Attributt brukes til å spesifisere alternativ tekst som vises hvis bildet ikke klarer å laste på siden.

Deretter et divelement med klassenavnet "innhold”Er lagt til som holder

og

Elementer for henholdsvis overskrift og avsnitt:

CSS faste posisjonering

Hei Linuxhint -teamet!

La oss ta turen til CSS -delen for å dekorere de nevnte HTML -elementene.

Stil “alle” elementer

*
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

Stjernen “ * “Symbol brukes til å velge alle elementer. Alle elementer i HTML brukes med “Font-familie”Eiendom med verdien som“Verdana, Genève, Tahoma, sans serif”. Denne listen over stiler er gitt for å sikre at hvis nettleseren ikke støtter den første verdien, vil andre bli brukt.

Stil “Home” Div

.Hjem
Posisjon: Fast;
Topp: 35px;
Venstre: 16px;

Egenskapene som ble brukt på DIV -elementet “hjem”Er beskrevet nedenfor:

• “posisjon”Er spesifisert for å spesifisere elementets posisjon. Verdien "fikset”Vil sette elementets posisjon festet på det spesifikke stedet.
• “topp”Er eiendommen for å justere elementets posisjon fra toppen.
• “venstre”Eiendom brukes til å justere elementets posisjon fra venstre.

Stil “innhold” div

.innhold
Bakgrunnsfarge: CadetBlue;
Bredde: 300px;
Høyde: 350px;
Padding-Left: 40px;
Margin-venstre: 80px;

CSS -egenskapene anvendt på DIV -elementet med klassenavnet “hoved-" nevnt nedenfor:

• “bakgrunnsfarge”Er spesifisert for å sette elementets bakgrunnsfarge.
• “bredde”Eiendom definerer HTML -elementets bredde.
• “høyde”Eiendom definerer HTML -elementets høyde.
• “Padding-venstre”Eiendom brukes til å legge til plassen til venstre for HTML -elementets innhold.
• “margin-venstre”Eiendom setter plass til venstre for DIV -elementet.

Produksjon

Den kan observere fra resultatet som er gitt ovenfor at bildeposisjonen er festet til nettleservinduet på “35px” fra toppen og “16px” fra venstre.

Konklusjon

CSS “posisjon”Eiendom er tilknyttet verdien”fikset”Verdi for å angi plasseringen av elementet som er festet til ett punkt. Videre justeres denne egenskapen med forskyvningsegenskapene, for eksempel bunn, øverst, høyre og venstre. Denne bloggen har vist metoden for å gjøre elementets faste posisjon i CSS med et praktisk eksempel.