CSS Positioning ni Zaidi ya X tu, Y Coordinates
Uwezo wa CSS kwa muda mrefu umekuwa sehemu muhimu ya kujenga mipangilio ya tovuti. Hata kwa kuongezeka kwa mbinu mpya za mpangilio wa CSS kama Flexbox na CSS Gridi, nafasi bado ina nafasi muhimu katika mfuko wowote wa mtengenezaji wa wavuti wa mbinu.
Unapotumia nafasi ya CSS, jambo la kwanza unayohitaji kufanya ni kuanzisha mali ya CSS kwa nafasi ya kuwaambia kivinjari ikiwa utatumia nafasi nzuri au jamaa kwa kipengele fulani. Pia unahitaji kuelewa wazi tofauti kati ya mali hizi mbili za kuweka nafasi.
Wakati kabisa na jamaa ni nyenzo mbili za nafasi ya CSS ambazo hutumiwa mara kwa mara katika kubuni wavuti, kuna kweli mataifa manne kwenye mali ya nafasi:
- static
- kabisa
- jamaa
- imara
Inatokana na nafasi ya default kwa kipengele chochote kwenye ukurasa wa wavuti. Ikiwa hutafafanua nafasi ya kipengele, itakuwa imara. Hii inamaanisha kuwa itaonyeshwa kwenye skrini kulingana na wapi katika hati ya HTML na jinsi itaonyesha ndani ya mtiririko wa kawaida wa waraka huo.
Ikiwa unatumia sheria za kuweka nafasi kama juu au kushoto kwa kipengele kilicho na nafasi ya tuli, sheria hizo zitapuuzwa na kipengele kitabaki ambapo kinaonekana katika mtiririko wa kawaida wa hati. Kweli, ungekuwa mara chache, ikiwa ni lazima, kuweka kipengele kwa nafasi ya tuli katika CSS tangu hiyo ni thamani ya default.
Kikamilifu CSS Positioning
Msimamo kamili ni pengine nafasi rahisi ya CSS kuelewa. Unaanza na mali hii ya nafasi ya CSS:
msimamo: kabisa;Thamani hii inamwambia kivinjari kwamba chochote kilichopaswa kuwekwa lazima kiondolewe kutoka kwa mtiririko wa kawaida wa waraka na badala yake kuwekwa mahali halisi kwenye ukurasa. Hii inahesabiwa kwa msingi wa babu yake wa karibu sana asiye na staticly positioned.
Kwa sababu kipengele kilichowekwa kikamilifu kinachukuliwa nje ya mtiririko wa kawaida wa waraka, haitaathiri jinsi mambo kabla yake au baada yake katika HTML yamewekwa kwenye ukurasa wa wavuti.
Kwa mfano - kama ulikuwa na mgawanyiko uliowekwa kwa kutumia thamani ya jamaa (tutaangalia thamani hii hivi karibuni), na ndani ya mgawanyiko huo ulikuwa na kifungu ambacho unataka kusimama pixels 50 kutoka juu ya mgawanyiko, wewe ingeongeza thamani ya nafasi ya "kabisa" kwa aya hiyo pamoja na thamani ya kupunguzwa ya 50px kwenye "juu" mali, kama hii.
msimamo: kabisa; juu: 50px;Kipengele hiki kilichowekwa kikamilifu basi kila mara kitaonyesha saizi 50 kutoka juu ya mgawanyiko huo uliowekwa - bila kujali nini kingine huonyesha huko kwa mtiririko wa kawaida. Kipengele chako cha "kikamilifu" kilichotumiwa kilichowekwa sawa na mazingira yake na thamani ya kutumiwa unayotumia ni jamaa kwamba hiyo.
Malipo nne za kuwepo kwa nafasi ambazo unazopatikana kutumia ni:
- juu
- haki
- chini
- kushoto
Unaweza kutumia ama juu au chini (kwa kuwa kipengele hawezi kuwekwa kulingana na maadili haya yote) na ama haki au kushoto.
Ikiwa kipengele kinawekwa kwenye nafasi ya kabisa, lakini kuna hazina ya asili isiyo na static, basi itakuwa imesimama karibu na kipengele cha mwili, ambayo ni kipengele cha juu zaidi cha ukurasa.
Positioning Relative
Tumezungumzia nafasi ya jamaa, basi hebu tuangalie mali hiyo sasa.
Msimamo wa jamaa hutumia mali nne za nafasi nzuri kama nafasi nzuri kabisa, lakini badala ya kuweka nafasi ya kipengele juu ya babu yake aliye karibu sana asiye na msimamo, huanza kutoka kwa kipengele ambacho ingekuwa bado ikiwa ni mtiririko wa kawaida.
Kwa mfano, ikiwa una vifungu vitatu kwenye ukurasa wako wa wavuti, na wa tatu ana nafasi ya "nafasi: jamaa" iliyowekwa juu yake, nafasi hiyo itasitishwa kwa kuzingatia eneo la sasa.
Kifungu cha 1.
Kifungu cha 2.
Kifungu cha 3.
Katika mfano wa hapo juu, aya ya tatu itawekwa 2m kutoka upande wa kushoto wa kipengele cha chombo, lakini bado itakuwa chini ya aya mbili za kwanza. Ingekuwa inabaki katika mtiririko wa kawaida wa waraka, na tu uacheze kidogo. Ikiwa ulibadilisha ili uweke nafasi: kabisa; chochote kinachofuata kinachoonyesha juu yake, kwa sababu hakutakuwa tena katika mtiririko wa kawaida wa waraka.
Vipengele kwenye ukurasa wa wavuti mara nyingi hutumiwa kuweka thamani ya msimamo: jamaa na thamani isiyozuiliwa imara, ambayo inamaanisha kuwa kipengele kinabakia hasa ambapo kinaonekana katika mtiririko wa kawaida. Hii imefanywa tu ili kuanzisha kipengele hiki kama muktadha ambayo mambo mengine yanaweza kuwekwa kabisa. Kwa mfano, ikiwa una mgawanyiko unaozunguka tovuti yako yote na thamani ya darasa ya "chombo" (ambayo ni hali ya kawaida sana katika kubuni wavuti), mgawanyiko huo unaweza kuweka nafasi ya jamaa ili kila kitu ndani yake kitumie ni mazingira ya nafasi.
Je! Kuhusu Positioning Fixed?
Kuweka nafasi nzuri ni mengi kama nafasi nzuri kabisa. Msimamo wa kipengele ni mahesabu kwa njia sawa na mfano kamili, lakini vipengele fasta kisha fasta katika eneo - karibu kama watermark . Kitu kingine chochote kwenye ukurasa kitakuwa kikivuka sehemu hiyo.
Ili kutumia thamani ya mali hii, ungeweka:
nafasi: fasta;Kumbuka, wakati utakapoweka kipengele mahali pa tovuti yako, itashusha mahali hapo wakati ukurasa wako wa wavuti ukichapishwa. Kwa mfano, ikiwa kipengee chako kinawekwa juu ya ukurasa wako, itaonekana juu ya ukurasa kila kuchapishwa - kwa sababu imewekwa juu ya ukurasa. Unaweza kutumia aina za vyombo vya habari ili kubadilisha jinsi kurasa zilizochapishwa zinaonyesha vipengee vya kudumu:
@media screen {h1 # kwanza {nafasi: fasta; }} @media print {h1 # kwanza {nafasi: static; }}Makala ya awali na Jennifer Krynin. Iliyotengenezwa na Jeremy Girard mnamo 1/7/16.