CSS-pozicio estas pli ol nur X, kaj koordinatoj
CSS-investado longe estis grava parto de kreado de retpaĝaj layouts. Eĉ kun la leviĝo de pli novaj CSS-aranĝaj teknikoj kiel Flexbox kaj CSS Grid, posicionado ankoraŭ havas gravan lokon en ia sako de lertaĵoj de ajna retejo.
Kiam vi uzas CSS-pozicion, la unua afero, kiun vi devas fari estas establi la CSS-posedaĵon por pozicio por informi la retumilon se vi uzos absolutan aŭ relativan pozicion por donita elemento. Vi ankaŭ devas klare kompreni la diferencon inter ĉi tiuj du posedaj propraĵoj.
Dum absoluta kaj relativa estas la du CSS-poziciaj posedaĵoj plej ofte uzataj en retpaĝo, fakte kvar statoj al la posedaĵo posedas:
- statika
- absoluta
- parenco
- fiksita
Statika estas la defaŭlta pozicio por iu ajn elemento en retpaĝaro. Se vi ne difinas la pozicion de elemento, ĝi estos statika. Ĉi tio signifas, ke ĝi montriĝos sur la ekrano bazita sur kie ĝi estas en la HTML-dokumento kaj kiel ĝi montrus en la normala fluo de tiu dokumento.
Se vi aplikas la regulojn de pozicio kiel supre aŭ maldekstre al elemento, kiu havas statikan pozicion, tiuj reguloj estos ignoritaj kaj la elemento restos, kie ĝi aperas en normala dokumento. Fakte, vi rara, se iam ajn, vi bezonus starigi elementon al statika pozicio en CSS, ĉar tio estas la defaŭlta valoro.
Absoluta CSS-pozicio
Absoluta pozicio estas probable la plej facila CSS-pozicio por kompreni. Vi komencas kun ĉi tiu CSS-pozicio propraĵo:
pozicio: absoluta;Ĉi tiu valoro diras al la retumilo ke ĉio, kio estos metita, devas esti forigita de la normala fluo de la dokumento kaj anstataŭe meti ĝustan lokon en la paĝo. Ĉi tio estas kalkulita sur la plej proksima ne-statike posedita prapatro de tiu elemento.
Ĉar absolute pozicia elemento estas forprenita de la normala fluo de la dokumento, ĝi ne influos kiel la elementoj antaŭ ĝi aŭ post ĝi en la HTML estas poziciigitaj sur la retpaĝo.
Ekzemple - se vi havus dividon, kiu posedis valoron de parenco (ni rigardos ĉi tiun valoron baldaŭ), kaj ene de tiu divido vi havis alineon, kiun vi volis posedi 50 pikselojn el la supro de la divido, vi aldonus pozicion valoro de "absoluta" al tiu alineo kune kun kompensa valoro de 50px sur la "supro" propraĵo, kiel ĉi tio.
pozicio: absoluta; supro: 50px;Ĉi tiu tute pozicia elemento ĉiam montriĝus 50 pikselojn el la supro de tiu relative pozicia divido - ne gravas, kio alia montras tie en normala fluo. Via "tute" posedata elemento uzis la relative pozicion kiel ĝian kuntekston kaj la posicionan valoron, kiun vi uzas, estas relativa al tio.
La kvar posedaj propraĵoj, kiujn vi havas disponeblaj por uzi estas:
- supro
- dekstre
- fundo
- maldekstra
Vi povas uzi ĉu supron aŭ supron (ĉar ero ne povas esti pozicion laŭ ambaŭ el tiuj valoroj) kaj ĉu dekstre aŭ maldekstre.
Se elemento estas pozicio en absoluta pozicio, sed tie ĝi ne havas ne-statike posicionitajn prapatrojn, tiam ĝi estos posicionata rilate al la korpo elemento, kiu estas la plej alta nivelo de la paĝo.
Relativa Pozicio
Ni jam menciis relativan pozicion, do ni rigardu tiun posedaĵon nun.
Relativa pozicio uzas la samajn kvar posedajn proprietojn kiel absoluta pozicio, sed anstataŭ bazi la pozicion de la elemento sur ĝia plej proksima ne-statike pozicata prapatro, ĝi komenciĝas de kie la elemento estus se ĝi ankoraŭ estis en la normala fluo.
Ekzemple, se vi havas tri alineojn en via retpaĝaro, kaj la tria havas "pozicion: relativan" stilon metitan sur ĝi, ĝia pozicio estos kompensita bazita sur ĝia aktuala loko.
Paragrafo 1.
Paragrafo 2.
Paragrafo 3.
En la supra ekzemplo, la tria alineo situos 2em de la maldekstra flanko de la ujo, sed daŭre estos sub la du unuaj alineoj. Ĝi restus en la normala fluo de la dokumento, kaj simple estos kompensita iomete. Se vi ŝanĝis ĝin al pozicio: absoluta; io ajn sekvanta ĝin montriĝus supre, ĉar ĝi ne plu estus en la normala fluo de la dokumento.
Elementoj en retpaĝaro ofte estas uzataj por difini valoron de pozicio: relativa kun neniu kompensa valoro establita, kio signifas, ke tiu elemento restas ĝuste kie ĝi aperus en normala fluo. Ĉi tio fariĝas nur por establi tiun elementon kiel kuntekston kontraŭ kiu aliaj elementoj povas esti pozicitaj absolute. Ekzemple, se vi havas dividon ĉirkaŭante vian tutan retejon kun klasa valoro de "ujo" (kiu estas tre komuna scenejo en dezajno retejo), tiu divido povas esti agordita al relativa pozicio por ke io ajn ene de ĝi povas uzi Ĝi kiel pozicio-kunteksto.
Kio pri riparis pozicion?
Fiksa pozicio estas multe kiel absoluta pozicio. La pozicio de la elemento estas kalkulita de la sama maniero kiel la absoluta modelo, sed fiksaj elementoj tiam estas fiksitaj en tiu loko - preskaŭ kiel filigrano . Ĉio alia en la paĝo tiam rulumos preter tiu elemento.
Por uzi ĉi tiun propran valoron, vi starigus:
pozicio: fiksita;Konsideru, kiam vi korektas elementon en via retejo, ĝi presos en tiu loko kiam via retejo estas presita. Ekzemple, se via elemento estas fiksita ĉe la supro de via paĝo, ĝi aperos ĉe la supro de ĉiu presita paĝo - ĉar ĝi estas fiksita al la supro de la paĝo. Vi povas uzi amaskomunikilajn tipojn por ŝanĝi kiel la presitaj paĝoj montras fiksajn elementojn:
@media-ekrano {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 1/7/16.