Ang CSS Positioning Labaw kay sa X, Y Coordinates
Ang positioning sa CSS dugay nga usa ka importante nga bahin sa pagmugna sa mga layout sa website. Bisan sa pagbangon sa mas bag-o nga teknik sa layout sa CSS sama sa Flexbox ug CSS Grid, ang posisyon sa gihapon adunay usa ka importante nga dapit sa bisan unsang bag sa web designer sa mga kalisud.
Sa paggamit sa CSS positioning, ang unang butang nga kinahanglan nimo nga buhaton mao ang pag-establisar sa CSS property alang sa posisyon sa pagsulti sa browser kung imong gamiton ang absolute o relative positioning alang sa usa ka elemento. Kinahanglan usab nimo nga tin-aw nga masabtan ang kalainan tali niining duha nga mga propyedad sa pagpwesto.
Samtang ang absolute ug paryente mao ang duha ka posisyon sa posisyon sa CSS nga kasagaran gigamit sa disenyo sa web, sa pagkatinuod adunay upat ka mga estado sa posisyon nga kabtangan:
- walay pulos
- hingpit
- paryente
- natino
Ang static mao ang default nga posisyon alang sa bisan unsang elemento sa usa ka web page. Kon wala nimo ipasabut ang posisyon sa usa ka elemento, kini dili mausab. Kini nagpasabot nga kini ipakita sa screen nga gibase kung diin kini anaa sa dokumento sa HTML ug kung unsaon kini ipakita sa sulod sa normal nga dagan sa dokumento.
Kon imong i-apply ang mga lagda sa pagpwesto sama sa taas o wala sa usa ka elemento nga adunay static nga posisyon, ang mga lagda dili ibalewala ug ang elemento magpabilin kung diin kini makita sa normal nga dokumento nga agianan. Sa pagkatinuod, talagsa ra ikaw, kung dili pa, kinahanglan nga magtakda og usa ka elemento sa usa ka static nga posisyon sa CSS tungod kay kini ang default nga bili.
Hingpit nga Posisyon sa CSS
Ang hingpit nga positioning mao tingali ang pinakasayon nga posisyon sa CSS nga masabtan. Gisugdan nimo kini nga CSS position property:
posisyon: hingpit;Kini nga bili nagsulti sa browser nga bisan unsa ang mahimong gipwesto kinahanglan kuhaon gikan sa normal nga dagan sa dokumento ug sa baylo ibutang sa tukmang nahimutangan sa panid. Kini gibanabana nga gibase sa kana nga elemento nga pinakaduol nga dili nataran nga katigulangan.
Tungod kay ang usa ka hingpit nga posisyon nga elemento gikuha gikan sa normal nga agianan sa dokumento, dili kini makaapekto kung giunsa kini nga mga elemento sa wala pa kini o pagkahuman niini sa HTML nahimutang sa web page.
Ingon nga usa ka pananglitan - kung ikaw adunay usa ka dibisyon nga gipahimutang gamit ang usa ka bili sa paryente (atong tan-awon kini nga kantidad wala madugay), ug sa sulod nianang pagkabahin ikaw adunay usa ka parapo nga gusto nimo nga ipahiluna ang 50 ka pixel gikan sa ibabaw sa dibisyon, ikaw makadugang sa bili sa posisyon nga "hingpit" sa maong parapo uban ang usa ka balanse nga gibug-aton nga 50px sa "top" nga kabtangan, sama niini.
posisyon: hingpit; ibabaw: 50px;Kining hingpit nga posisyon nga elemento dayon magpakita sa 50 ka pixel gikan sa ibabaw sa medyo nakaposisyon nga dibisyon - bisan unsa pa ang gipakita didto sa normal nga dagan. Ang imong "hingpit" nga nahimutang nga elemento naggamit sa medyo nakaposisyon nga usa nga ang konteksto niini ug ang posing nga bili nga imong gigamit adunay kalabotan niana.
Ang upat ka kabtangan sa pagpahiluna nga imong magamit mao ang:
- ibabaw
- husto
- ubos
- sa wala
Mahimo nimo gamiton ang ibabaw o sa ubos (tungod kay ang usa ka elemento dili mahimong ipahimutang sumala sa duha niini nga mga bili) ug sa tuo o sa wala.
Kung ang usa ka elemento gitakda sa usa ka posisyon nga hingpit, apan wala kini walay posisyon nga mga katigulangan, nan kini ibutang nga may kalabotan sa elemento sa lawas, nga mao ang labing taas nga elemento sa panid sa panid.
Relative Positioning
Gihisgutan na namon ang among posisyon, busa atong tan-awon kana nga kabtangan karon.
Ang kaparehas nga pagpwesto naggamit sa susama nga upat nga mga kabtangan sa posisyon isip hingpit nga posisyon, apan imbis nga ibutang ang posisyon sa elemento sa pinakaduol nga dili katupngan nga posisyon nga katigulangan, magsugod kini gikan sa kung diin ang elemento kung kini anaa pa sa normal nga dagan.
Pananglitan, kon ikaw adunay tulo ka mga parapo sa imong web page, ug ang ikatlo adunay usa ka "posisyon: relatibo" nga estilo nga gibutang sa ibabaw niini, kini nga posisyon mahimong mabalanse base sa kini nga lugar karon.
Parapo 1.
Parapo 2.
Paragraph 3.
Sa pananglitan sa ibabaw, ang ikatulo nga parapo gipahimutang nga 2em gikan sa wala nga bahin sa elemento sa sudlanan, apan anaa gihapon sa ubos sa unang duha ka mga parapo. Kini magpabilin sa normal nga pag-agos sa dokumento, ug ibutang lamang nga gamay. Kung giusab nimo kini sa posisyon: hingpit; ang bisan unsa nga mosunod niini magpakita sa ibabaw niini, tungod kay kini dili na sa normal nga dagan sa dokumento.
Ang mga elemento sa usa ka web page sagad gigamit aron sa pagpahimutang sa usa ka bili sa posisyon: nga walay bisan unsa nga gibutang nga balanse nga gitukod, nga nagpasabot nga ang elemento magpabilin sa tukma kung asa kini makita sa normal nga dagan. Gihimo kini aron lamang sa pag-establisar nianang elemento isip usa ka konteksto nga diin ang uban nga mga elemento mahimo nga mahimutang nga hingpit. Pananglitan, kung adunay usa ka dibisyon nga naglibot sa imong tibuok nga website nga may usa ka bili sa klase nga "sudlanan" (nga usa ka komon nga sitwasyon sa disenyo sa web), ang maong pagbahin mahimong ibutang sa posisyon nga paryente aron ang bisan unsa nga sulod niini magamit kini isip usa ka konteksto sa pagpahiluna.
Unsa ang Mahitungud sa Pagpahiluna?
Ang pirme nga posisyon mao ang usa ka daghan sama sa hingpit nga posisyon. Ang posisyon sa elemento gibanabana sa samang paagi ingon nga ang hingpit nga modelo, apan ang gitakda nga mga elemento dayon gipahimutang niana nga dapit-halos sama sa watermark . Ang tanan nga butang sa panid unya mag-scroll sa milabay nga elemento.
Aron gamiton kining bili sa kabtangan, imong ibutang:
posisyon: natino;Hinumdomi, sa dihang imong ayuhon ang usa ka elemento sa dapit sa imong site, kini mag-imprinta nianang nahimutangan sa dihang ang imong Web page naimprinta. Pananglitan, kon ang imong elemento nahimutang sa ibabaw sa imong panid, kini makita sa ibabaw sa matag naimprinta nga panid - tungod kay kini gitakda sa ibabaw sa panid. Mahimo nimong gamiton ang mga matang sa media aron mausab kung giunsa pagpakita sa giimprinta nga mga pahina ang mga natakdang elemento
@media screen {h1 # unang {posisyon: fixed; }} @media print {h1 # first {position: static; }}Ang orihinal nga artikulo ni Jennifer Krynin. Gibalhin ni Jeremy Girard sa 1/7/16.