Elementi pozicioniranja na web stranici s svojstvom CSS položaja

Svibanj 21, 2024

Prije kaskadnog lista stilova bili ste ograničeni u kontroli koju ste imali nad položajem objekata na vašoj web stranici. Pomoću HTML tablice možete malo kontrolirati pozicioniranje, ali to nije bilo vrlo precizno. Sada pomoću CSS-a, možete imati preciznu kontrolu nad time kako se svaki element nalazi na vašoj web stranici.

Prije nego li možete koristiti svojstvo položaja CSS za pozicioniranje elemenata na svojoj web stranici, moramo razgovarati o terminologiji koja se koristi za komunikaciju s web preglednikom. CSS ne samo da uzima u obzir širinu i visinu vaše web stranice, već i dimenzije web preglednika.

Širina i visina preglednika
U početku biste mogli pomisliti da se to odnosi na otvoreni prozor preglednika. Ali doista se odnosi na cijeli preglednik, uključujući kontrole i gumbe.
Širina i visina uživo
To je izraz za područje prikaza preglednika. Ne uključuje kontrole.
Širina i visina dokumenta
Ovo je cijela širina i visina vaše web stranice. Ako su ove dimenzije veće od širine i visine uživo, preglednik će po potrebi prikazati trake za pomicanje.

Sada kada znate uvjete za granice u kojima možete pozicionirati dijelove vaše web stranice pomoću CSS-a, pogledajmo četiri vrijednosti položaja.

Statički
Ovo je zadana postavka. Ako za neki element ne odredite drugačije, preglednik će koristiti statičko pozicioniranje. Kao što zvuči, statičkim pozicioniranjem ne možete postavljati elemente na web stranicu. Pa kako preglednik određuje gdje staviti svaki objekt na svoju web stranicu? Svaki element pozicionira prema redoslijedu u vašem HTML kodu. Ako imate sliku logotipa, zatim pozdrav, a zatim obavijest o autorskim pravima u vašem HTML-u, preglednik će ih postaviti na web stranici tim redoslijedom. Postupak ne možete premjestiti iznad slike logotipa.
rođak
Relativno pozicioniranje djeluje slično statičkom jer redoslijed elemenata u HTML kodu kontrolira tok elemenata na stranici. Međutim, možete koristiti relativno pozicioniranje za kontrolu položaja elementa u odnosu na ostale elemente na web stranici.
apsolutan
Kada koristite apsolutno pozicioniranje s elementom, to će ovaj element učiniti neovisnim od ostatka web stranice. Budući da njegovo postavljanje više nije određeno redoslijedom HTML-a, za postavljanje elementa trebate koristiti koordinate X i Y.
fiksni
To djeluje isto kao i apsolutno pozicioniranje. Međutim, element koji ima fiksno pozicioniranje neće se pomicati s web stranicom. Ovo je lijepa značajka koju koristite za logotip ili izbornik koji želite ostati vidljivi dok se stranica pomiče prema gore.

Upute Video: CSS Efecto - 02 PseudoElementos @JoseCodFacilito (Svibanj 2024).

Elementi pozicioniranja na web stranici s CSS svojstvom položaja, HTML, CSS, svojstvom položaja CSS-a, statičkim pozicioniranjem, relativnim pozicioniranjem, apsolutnim pozicioniranjem, fiksnim pozicioniranjem, kako pozicionirati elemente na web stranici, pomoću CSS-a za pozicioniranje elemenata na web stranici

Prethodni Članak

Sljedeći Članak

Vezani Članci

računala

Reproduciranje i izlazni pokret 5 109 od macProVideo

Svibanj 2024

Ovo je deveti modul, naslovljen Prikaz i izlaz, u Apple MotionR serija video tutorijala od macProVideo. Kako je prikazivanje vrlo važno za vrijeme preuzimanja, kvalitetu reprodukcije i druge...

računala

Spremite pozadinu pokreta pokreta

Svibanj 2024

U ovom ZahtjevuR tutorial, stvorit ćemo video Spremi datum koji će se prodavati na web mjestu microstock. Budući da se prodaje kao pozadinska animacija, kupac ima mogućnost poslati .mov datoteku...