CSS Positioning dia mihoatra ny X fotsiny, Y Coordinates
Ny fametrahana ny CSS dia efa anisan'ny lafiny lehibe amin'ny famoronana seho an-tserasera. Na dia eo aza ny fiakaran'ny teknika fanavaozana CSS vaovao toy ny Flexbox sy CSS Grid, dia mbola misy toerana manan-danja ao amin'ny kitapo misy ny tranonkala.
Raha mampiasa ny toerana misy ny CSS ianao, ny zavatra voalohany tokony hataonao dia ny manorina ny property CSS mba hizaha ny navigateur raha toa ka mampiasa ny fametrahana tanteraka na havaozina ho an'ny singa iray nomena ianao. Ilainao koa ny mahatakatra mazava tsara ny fahasamihafana eo amin'ireo toetra roa ireo.
Raha ny tena izy sy ny havany dia ireo toetra roa an'ny CSS izay matetika ampiasaina amin'ny sehatry ny tranonkala, dia misy firenena efatra amin'izao fotoana izao:
- voasakantsakan'ny
- tanteraka
- havana
- raikitra
Static no toerana mety ho an'ny singa iray ao amin'ny pejy web. Raha tsy mamaritra ny toerana misy ny singa iray ianao, dia hajao izany. Midika izany fa hiseho eo amin'ny sehatra mifototra amin'ny toerana misy azy ao amin'ny rakitra HTML sy ny fomba hampiseho azy ao anatin'ny fizotry ny dian -tsoratra.
Raha toa ka mampihatra ny fitsipi-pampandrosoana toy ny topa na havia amin'ny singa iray izay misy toerana misy azy, dia tsy hiraharaha ireo fitsipika ireo ary hijanona amin'ny toetr'andro ny toetr'andro. Raha ny marina, dia matetika ianao, raha toa ka, dia mila mametraka singa iray amin'ny toerana misy azy ao amin'ny CSS satria izany no lanjany.
CSS Positioning absolute
Ny tena fametrahana toerana dia mety ny toerana mora indrindra amin'ny CSS hahatakatra. Manomboka amin'ny fananana toerana misy ny CSS ianao:
toerana: absolute;Ity sanda ity dia milaza amin'ny mpamaky fa ny zavatra rehetra tokony hapetraka dia tokony esorina ao amin'ny dikan-tsoratra ara-dalàna ary tsy mametraka toerana marina ao amin'ny pejy. Izany dia mifototra amin'ny rohim-pirazanana tsy miorina eo akaikin'io elatra io.
Satria misy singa tena miorina amin'ny alàlan'ny fepetra ara-dalàna ao amin'ny antontan-taratasy, dia tsy hisy fiantraikany eo amin'ny endriky ny singa eo alohany na aorian'io ao amin'ny HTML eo amin'ny pejy Internet.
Amin'ny ohatra - raha toa ianao ka manana fisarihana izay nampiasaina ny lanjan'ny havana (hojerentsika io lanjany io fotoana fohy), ary ao anatin'io fizaràna io dia manana fehintsoratra izay te-hananganana 50 piksela avy eny an-tampon'ny fizarana ianao dia hanisy lanjany ho an'ny "absolute" ho an'io andalana io miaraka amin'ny sanda 50px eo amin'ny "top" fananana, toy ity.
toerana: absolute; top: 50px;Io singa tena mifantoka io dia mampiseho 50 pixels avy eny an-tampon'io fizarazarana avo lenta io - na inona na inona izay mampiseho azy eo amin'ny fipoahana mahazatra. Ny singa fototra "tanteraka" ampiasain'ny iray dia ampiasaina amin'ny toerany amin'ny toerana misy azy ary ny sandan'ny sanda ampiasainao dia fiantraikany amin'izany.
Ny toetra amam-pananganana efatra izay azonao ampiasaina dia:
- ambony
- marina
- ambany
- sisa
Azonao ampiasaina na ambony na ambany (satria ny singa dia tsy azo iantsoana azy roa mifanaraka amin'ireto soatoavina ireto) ary na mety na tsy misy.
Raha toa ny singa iray napetraka amin'ny toeran'ny tena, nefa tsy misy razambe tsy misy toerany, dia halefa eo amin'ny elanelan'ny vatany izany, izay singa avo indrindra amin'ny pejy.
Relative Positioning
Efa niresaka momba ny fihenan-toerana izahay, ka andao hijery io trano io izao.
Ny fametrahana ny filaminana amin'ny toerana iray dia mampiasa ireo toetra mitovy amin'ny toerana misy azy ho toy ny fametrahana tanteraka, fa tsy mametraka ny toeran'ny elanelany amin'ny razany akaiky indrindra izay tsy miorina, dia manomboka ny toerana misy ny singa raha toa ka mbola eo amin'ny dian-drano mahazatra.
Ohatra, raha manana fehintsoratra telo ao amin'ny pejin-tranonkalanao ianao, ary ny fahatelo dia manana "toerana: relative" fomba ametrahana azy, ny toerany dia ho tafajanona amin'ny toerana misy azy ankehitriny.
Paragrafy 1
Paragrafy 2.
Ao amin'io ohatra voalaza etsy ambony io, ny andininy fahatelo dia hipetraka amin'ny 2em avy eo amin'ny ilany havanana amin'ny singa entana, saingy mbola eo ambany fehintsoratra roa voalohany. Io dia hitoetra ao amin'ny fizotran'ny rakitra ara-dalàna, ary hijanona kely fotsiny. Raha niova ianao ho amin'ny toerana: absolute; na inona na inona manaraka azy dia hampiseho azy eny an-tampony, satria tsy ho ao anatin'ny dingana ara-dalàna ny rakitra.
Ireo singa ao amin'ny pejy web dia matetika ampiasaina mba hametrahana lanjan'ny toerana: raha tsy misy ny tombam-bidiny napetraka, izay midika fa ny elanelana dia mitoetra marina amin'ny toerana izay hiseho amin'ny fomba mahazatra. Izany dia natao fotsiny mba hametrahana io singa io ho toy ny sehatra ahafahan'ny singa hafa azo apetraka tanteraka. Ohatra, raha manana fizarazarana manodidina ny tranonkalanao ianao miaraka amin'ny lanjan'ny kilasin'ny "container" (izay tranga mahazatra ao amin'ny tranonkala), dia azo apetraka eo amin'ny toeran'ny havana izany fizarana izany mba hahafahan'ny zavatra ao anatiny ampiasaina Izany dia ho toy ny toe-javatra mitongilana.
Ahoana ny amin'ny fandefasana milamina?
Ny fametrahana ny toerany dia toy ny fipetrahana tanteraka. Ny toeran'ny elanelana dia mitovy amin'ny fomba mitovy amin'ny modely tanteraka, saingy ny singa mifototra dia afindra eo amin'io toerana io - saika toy ny mari - pamantarana watermark . Ny zavatra rehetra ao amin'ny pejy dia hivezivezy eo alohan'io singa io.
Ampiasao ity sanda manan-danja ity:
toerana: voafetra;Ataovy an-tsaina, rehefa mametraka singa iray eo amin'ny toerana misy anao ianao, dia hamoaka izany toerana izany rehefa mivoaka ny pejin-tranonkalanao. Ohatra, raha napetraka eo amin'ny tendron'ny pejy ny elanelanao, dia hiseho eo an-tampon'ilay pejin-drakitra tsirairay izy - satria izy io dia apetraka eo an-tampon'ny pejy. Azonao ampiasaina ny karazan-tserasera hanova ny fomba amoahan'ny pejy natonta :
@media afindra {h1 # voalohany {toerana: voafetra; }} @media print {h1 # voalohany {toerana: statika; }}Lahatsoratra niavian'i Jennifer Krynin. Edited by Jeremy Girard on 1/7/16.