Dummies

Posisjonsattributtene til CSS brukes primært til å utforme lag ved hjelp av taggen, men du kan også bruke dem til å stillegge posisjonen til et bilde, en beholder eller et blokknivåelement innen nettleseren. For lag kan både innholdet og beholderen styles med attributter i denne kategorien.

posisjon: Bestemmer hvordan et stilelement skal plasseres i et nettleservindu. Angi om posisjonen er absolutt, fast, relativ eller statisk.

#footer {posisjon: relative;}

Når du stiller inn posisjonen, bruker du en av følgende stilverdier:

• absolutt: Angir elementets posisjon helt basert på de numeriske verdiene som er angitt for elementets plassering i forhold til øvre venstre kant i nettleservinduet, eller til nærmeste absolutt eller relativt posisjonert overordnet element.

• fast: Angir elementets posisjon helt basert på de numeriske verdiene som er angitt for elementets plassering i forhold til øvre venstre kant i nettleservinduet.

• Relativ: Angir elementets posisjon med de numeriske verdiene som er angitt for objektets plassering i forhold til det stilte elementets posisjon i filens tekstflyt.

• statisk: Setter elementet på et eksakt sted i tekstflyten.

bredde: Bruk dette attributtet til å angi bredden på et element, for eksempel et lag eller en annen beholder, ved hjelp av px, pt, in, cm, mm, pc, em, ex,% eller automatisk.

# layer1 {width: 760px;}

height: Bruk denne attributtet til å angi høyden på et element, for eksempel et lag, ved hjelp av px, pt, in, cm, mm, pc, em, ex,% eller auto.

# layer1 {height: 100px;}

synlighet: Dette attributtet bestemmer den opprinnelige synlighetsverdien til et element som kan settes til skjult, arv eller synlig når siden først åpnes i et nettleservindu.

# layer1 {synlighet: skjult;}

Synlighet bør ikke forveksles med visningsattributtet, som bestemmer om et element skal behandles som en blokk eller et inlineelement, eller bli fullstendig ignorert av nettleseren med displayet: ingen; Egenskap. Med synlighet har du å gjøre med den første synlighetstilstanden til et element, for eksempel et lag, når siden først lastes inn i nettleseren.

Denne egenskapen kan også slås av og på ved å bruke JavaScript for å skjule og vise elementer på siden, og dermed utlåne litt interaktivitet til siden for den besøkende.

For å endre synligheten til elementet ditt, legg til synlighetsegenskapen til CSS-velgeren din med en av følgende verdier:

• skjult: Dette alternativet skjuler et lag fra visning når en side opprinnelig åpnes i en nettleser.

• arv: Dette alternativet får et lag å arve synligheten til et overordnet lag; Hvis en forelder ikke eksisterer, vil laget være synlig. Når synligheten er uspesifisert, er arvet standardattributtet.

• synlig: Velg dette alternativet for å tvinge laget til å være synlig, uavhengig av hvilket som helst overordnetlags synlighetinnstilling, når siden først åpnes i et nettleservindu.

z-indeks: Denne egenskapen spesifiserer et lags stablingsordre i forhold til andre lag på siden som de vises i en nettleser.

Sett z-indeksen til automatisk når nummeret er ikke-kritisk, sett det til å arve for å få laget til å arve et parenteslags z-indeksverdi, eller angi et bestemt positivt eller negativt tall, for eksempel 1, 15 eller 100, når tallet er viktig i forhold til de andre lagene på siden.

Jo høyere tallet, jo nærmere laget vises foran eller øverst på siden nærmest den besøkende. Jo lavere tallet, jo nærmere laget vises til nettleserens bakgrunn.

#lastchance {z-index: 4;}

Illustrasjonen viser et eksempel på flere lag på en side med forskjellige z-indeksverdier.

overløp: Overløpsinnstillingen kan brukes til å spesifisere hva som skjer med innhold i et lag som overstiger størrelsen på laget som definert i CSS. For eksempel, hvis et lag er 200px med 200px i størrelse, men inneholder en hel side med tekst, bestemmer overlasting-innstillingen hvordan teksten vil fylle laget. Angi overløpsattributtet til automatisk, skjult, bla eller synlig.

#aboutus {overflow: scroll;}

Her er en beskrivelse av hver av overløpsverdiene du kan bruke:

• auto: Velg dette alternativet for at nettleseren automatisk skal legge til rullestenger til laget hvis og bare hvis innholdet overskrider lagets definerte bredde og høyde.

• skjult: Når dette alternativet er valgt, opprettholdes størrelsen på et lag, og innhold som overstiger denne størrelsen, er avskåret eller klippet fra visning i et nettleservindu.

• bla: Velg bla for å legge til rullestenger i laget, uansett om innholdet passer eller overgår lagets bredde og høyde. Denne egenskapen støttes ikke jevnt av alle nettlesere, så vær sikker på å teste den før publisering.

• synlig: Velg dette alternativet for å få laget til å utvide vertikalt og deretter horisontalt, om nødvendig, for å passe til innhold som overskrider den angitte lagbredden og høyden slik at alt innholdet er synlig.

Plassering (venstre, øverst, høyre, nederst): Bruk plasseringsattributtet til å angi nøyaktig størrelse og plassering (basert på den angitte typen) av et stilelement i et nettleservindu.

Som standard er pikselstørrelsen og plasseringen av et element angitt for topp, venstre, bunn og høyre kant. Du kan imidlertid bruke andre enheter (inkludert pt, i, cm, mm, pc, em, ex eller%) hvis du ønsker det, eller sett verdien for noen av sidene automatisk. For lag, hvis innholdet i det laget overskrider den angitte størrelsen, utvides laget for å passe innholdet.

#specialitems {left: 500px; topp: 300px; høyre: 0; bunn: 0;}

klipp: Bruk dette attributtet for å angi et mindre synlig rektangulært område i et lag i forhold til lagets øverste venstre kant.Når det klippes, kan det skjulte området manipuleres med JavaScript eller annen programmering for å skape spesialeffekter som kan skjule og vise skjult innhold.

Angi verdier for det klippede området til de øverste, venstre, høyre og nederste kantene av laget ved å bruke px (piksler), pc (picas), pt (poeng), i (tommer), mm (millimeter) cm (centimeter), em (ems), ex (exs) eller% (prosent), eller en verdi av auto.

#bunnygame {clip: rect (10px, 100px, 0px, 60px);}