Mtheradi vs. Wokonda - Kufotokozera CSS Positioning

CSS Positioning ndi Zoposa X, Y Coordinates

Kuyika kwa CSS kwakhala nthawi yofunikira kwambiri popanga mawebusaiti. Ngakhale pakuwuka kwa njira zatsopano zowonetsera CSS monga Flexbox ndi CSS Grid, kuika malo kumakhalabe ndi malo ofunikira pa thumba lililonse lopangira ma webusaiti.

Mukamagwiritsa ntchito CSS posankha, chinthu choyamba chimene muyenera kuchita ndi kukhazikitsa malo a CSS kuti akhale ndi malo oti muwuze msakatuliyo ngati mutagwiritsa ntchito malo enieni kapena achibale anu. Muyeneranso kumvetsetsa bwino kusiyana pakati pa malo awiriwa.

Ngakhale mtheradi ndi wachibale ndizozigawo ziwiri za CSS zomwe zimagwiritsidwa ntchito pa webusaiti, pali kwenikweni zigawo zinayi ku malo apamwamba:

Static ndi malo osasinthika pa chinthu chirichonse pa tsamba la intaneti. Ngati simunatanthauzire malo a chinthu, chidzakhala chokhazikika. Izi zikutanthauza kuti izo ziwonetseratu pawunivesiti pogwiritsa ntchito zomwe zili mulemba la HTML ndi momwe zingasonyezere mkati mwa kayendetsedwe ka chidziwitsochi.

Ngati mumagwiritsa ntchito malamulo oikapo ngati pamwamba kapena kumanzere kumalo omwe ali ndi malo otsika, malamulowo sadzanyalanyazidwa ndipo mfundoyo idzakhalabe pamene ikuwonekera pamtundu woyenda. Zoona, nthawi zambiri simungathe kuyika chinthu chokhazikika ku CSS popeza ndilo mtengo wokhazikika.

Mtheradi CSS Positioning

Kukhala ndi malo osakayika ndiwophweka kwambiri CSS kuti mumvetse. Mukuyamba ndi malo awa a CSS:

udindo: mtheradi;

Mtengo umenewu umauza osatsegula kuti chilichonse chimene chidzapangidwe chiyenera kuchotsedwa pazomwe zimapezeka pamalopo ndipo m'malo mwake ziyikidwa pamalo enieni pa tsamba. Izi zikuwerengedwa mochokera ku kholo loyandikana kwambiri lomwe silokhazikika.

Chifukwa chakuti chinthu chofunikira kwambiri chimachotsedwa pamtundu woyenerera wa chikalatacho, sichikhudza momwe zinthuzo zisanayambe kapena pambuyo pake mu HTML ziri pamalo pa intaneti.

Mwachitsanzo - ngati mutagawanika pogwiritsa ntchito phindu lachibale (tidzayang'ana phindu limeneli posachedwa), ndipo mkati mwagawilo muli ndi ndime yomwe mukufuna kuyika ma pixel 50 kuchokera pamwamba pa magawano, inu zikhoza kuwonjezera mtengo wa "mtheradi" ku ndimeyo pamodzi ndi mtengo wa 50px pa "pamwamba" katundu, monga chonchi.

udindo: mtheradi; pamwamba: 50px;

Izi zonsezi zikanakhala zowonetsera ma pixel 50 kuchokera pamwamba pa chigawidwe chomwecho - ngakhale ziribe zina zomwe zikuwonetsa pamenepo. Chinthu chako chokhazikika chomwe chimagwiritsidwa ntchito ndi chimodzimodzi ndi chikhalidwe chake ndi kufunika kwake komwe mumagwiritsa ntchito chikugwirizana ndi zimenezo.

Zida zinayi zomwe muli nazo ndizo:

Mungagwiritse ntchito pamwamba kapena pansi (popeza chinthucho sichikhoza kukhazikitsidwa molingana ndi mfundo zonsezi) ndipo mwina kapena kumanzere.

Ngati chinthu chimaikidwa pamalo amtheradi, koma sichikhala ndi makolo omwe sali ovomerezeka, ndiye chidzakhala chogwirizana ndi thupi, lomwe ndilo gawo lapamwamba pa tsamba.

Maonekedwe Achibale

Ife tatchula kale malo okhala, kotero tiyeni tiyang'ane pa katundu umenewo tsopano.

Kuika malire kumagwiritsira ntchito malo amodzi omwe ali ndi udindo wokhazikika, koma mmalo mokhazika maziko a chodalira pa kholo lawo lapamwamba kwambiri lomwe silili lokhazikika, limayamba kuchokera pamene ziwalozo zikanakhala ngati zikanakhala zotsika.

Mwachitsanzo, ngati muli ndi ndime zitatu pa tsamba lanu la intaneti, ndipo lachitatu liri ndi "malo:" choyimira pazolowera, malo ake adzathetsedwa chifukwa cha malo omwe alipo.

Ndime 1.

Ndime 2.

Ndime 3.

Chitsanzo cha pamwambapa, ndime yachitatu idzakhala 2em kuchokera kumanzere kwa chidebecho, koma adakali pansi pa ndime ziwiri zoyambirira. Icho chikanakhalabe mu kayendedwe kachidziwitso cha chikalatacho, ndipo ingokhalani pang'ono. Ngati munasintha kuti mukhale: mwamtheradi; chirichonse chotsatiracho chikanasonyeza pamwamba pa izo, chifukwa icho sichikanakhalanso kutuluka kwa chikalatacho.

Zithunzi pa tsamba la intaneti nthawi zambiri zimagwiritsidwa ntchito kuyika kufunika kwa malo: zogwirizana ndi zopanda malire zomwe zakhazikitsidwa, zomwe zikutanthauza kuti chinthucho chimakhalabe kumene chidzawonekera poyenda. Izi zimachitika pokhapokha kuti atsimikizire kuti chinthucho ndi nkhani yomwe zinthu zina zikhoza kukhazikitsidwa mwathunthu. Mwachitsanzo, ngati muli ndi magawano ozungulira webusaiti yanu yonse ndi mtengo wapatali wa "chidebe" (chomwe chiri chofala kwambiri pa webusaiti), kupatukana kumeneku kumatha kukhala pamalo amodzi kotero kuti chilichonse mkati mwake chingagwiritsidwe ntchito monga malo okhala.

Bwanji Ponena za Malo Okhazikika?

Kuyika malo osasunthika kumakhala kofanana ndi kukhazikika kwathunthu. Malo a chinthucho amawerengedwa mofananamo monga mchitidwe weniweni, koma zinthu zowonongeka zimakhazikika pamenepo - pafupifupi ngati watermark . Zina zonse pa tsamba zidzatha kupyola chinthu chimenecho.

Kuti mugwiritse ntchito mtengo wamtengo wapatali, mungayankhe:

udindo: wokhazikika;

Kumbukirani, mukakonza chinthu pamalo anu pa tsamba lanu, icho chidzasindikizidwa pamalo pomwe tsamba lanu la webusaiti lidzasindikizidwa. Mwachitsanzo, ngati chigawo chanu chikukhazikitsidwa pamwamba pa tsamba lanu, chidzawoneka pamwamba pa tsamba lirilonse - chifukwa ilo linasankhidwa pamwamba pa tsamba. Mungagwiritse ntchito mitundu ya mafilimu kusintha momwe masamba osindikizira amasonyezera zinthu zowonongeka:

@media screen {h1 # choyamba {malo: osakhazikika; }} @media print {h1 # yoyamba {malo: static; }}

Nkhani yoyamba ndi Jennifer Krynin. Yosinthidwa ndi Jeremy Girard pa 1/7/16.