CSS Positioning nyaeta Leuwih ti Ngan X, Y Koordinat
CSS positioning geus lila bagian penting tina nyieun layouts ramatloka. Malah jeung naékna téhnik perenah CSS anyar kawas Flexbox na CSS Grid, positioning masih boga hiji tempat penting dina kantong wae web desainer ngeunaan trik.
Lamun maké positioning CSS, hal munggaran anjeun bakal kedah ngalakukeun nyaeta ngadegkeun sipat CSS pikeun posisi ngabejaan browser nu lamun nuju bade nganggo positioning mutlak atawa relatif keur unsur tinangtu. Anjeun oge kudu jelas ngarti éta selisih dua sipat positioning ieu.
Bari mutlak tur relatif aya dua sipat posisi CSS paling mindeng dipaké dina rarancang web, aya sabenerna opat nagara bagian jeung sipat posisi:
- statik
- absolut
- dulur
- tetep
Statik teh posisi standar pikeun sagala unsur dina kaca web. Mun anjeun teu nangtukeun posisi unsur, éta bakal statis. Ieu ngandung harti yén éta bakal nembongkeun dina layar dumasar kana tempat éta dina dokumen HTML jeung cara éta bakal nembongkeun jero aliran normal tina dokumen éta.
Lamun diterapkeun aturan positioning kawas luhur atawa ditinggalkeun ka unsur nu boga posisi statis, eta aturan bakal dipaliré sarta unsur bakal tetep dimana eta némbongan dina aliran dokumen normal. Dina bebeneran, anjeun bakal jarang, upami kantos, kudu nangtukeun unsur ka posisi statik di CSS saprak éta ngarupakeun nilai standar.
Positioning CSS mutlak
positioning mutlak ieu meureun nu posisi CSS panggampangna pikeun ngarti. Anjeun mimitian ku harta posisi CSS ieu:
posisi: absolut;nilai Ieu ngabejaan browser nu naon bade jadi diposisikan kudu dikaluarkeun tina aliran normal tina dokumen jeung gantina ditempatkeun dina lokasi pasti dina kaca. Ieu diitung dumasar kana non-staticly karuhun pangdeukeutna nu unsur urang diposisikan.
Kusabab unsur pancen diposisikan dicokot kaluar tina aliran normal tina dokumen teh, nya moal mangaruhan kumaha unsur saméméh atawa sanggeus eta di HTML nu diposisikan dina kaca wéb.
Salaku conto - lamun miboga division yén ieu diposisikan maké nilai relatif (urang nempo nilai ieu lila), sarta di jero division nu kungsi ayat nu hayang posisi 50 piksel ti luhur division, Anjeun bakal nambah nilai posisi "mutlak" ayat nu marengan hiji nilai offset of 50px dina "luhur" harta, kawas ieu.
posisi: absolut; luhur: 50px;Ieu unsur pancen diposisikan bakal lajeng salawasna nembongkeun 50 piksel ti luhur yen division rélatif diposisikan - euweuh urusan naon wae mintonkeun aya di aliran normal. Anjeun unsur "leres" diposisikan dipaké hiji rélatif diposisikan sakumaha konteks na jeung nilai positing Anjeun nganggo nyaéta relatif yén éta.
Sipat opat positioning nu gaduh sadia pikeun pamakéan anu:
- puncak
- bener
- dasar
- ditinggalkeun
Anjeun tiasa make boh luhur atawa handap (saprak unsur teu bisa diposisikan nurutkeun duanana nilai ieu) jeung boh katuhu atawa ka kenca.
Mun unsur diatur ka posisi mutlak, tapi aya deui boga non-staticly karuhun diposisikan, mangka bakal diposisikan relatif ka unsur awak, nu unsur tingkat pangluhurna kaca.
Positioning relatif
Simkuring geus disebutkeun positioning relatif, jadi hayu urang nempo harta nu ayeuna.
positioning relatif migunakeun opat sipat positioning sarua positioning mutlak, tapi tinimbang basing posisi unsur kana non-staticly karuhun pangdeukeutna na diposisikan, éta dimimitian ti mana unsur bakal jadi lamun éta kénéh dina aliran normal.
Contona, upami anjeun boga tilu ayat dina kaca web anjeun, sarta katilu ngabogaan "posisi: relatif" gaya ditempatkeun ka dinya, éta posisi bakal offset dumasar kana eta urang lokasi ayeuna.
.Ayat 1
Ayat 2
.. Ayat 3
Dina conto di luhur, ayat katilu bakal diposisikan 2em ti sisi kénca unsur wadahna tapi tetep bakal sahandapeun dua paragraf munggaran. Eta bakal tetep dina aliran normal tina dokumen teh, sarta ngan bisa offset saeutik. Lamun dirobah ka posisi: absolut; nanaon di handap eta bakal nembongkeun dina luhureun éta, sabab bakal euweuh jadi dina aliran normal tina dokumen teh.
Elemen dina hiji kaca web nu sering dipaké pikeun nangtukeun hiji nilai tina posisi: relatif sareng henteu nilai offset ngadegkeun, nu hartina unsur nu tetep persis dimana eta bakal muncul dina aliran normal. Hal ieu dilakukeun solely pikeun ngadegkeun unsur anu salaku konteks ngalawan nu elemen séjén bisa diposisikan pancen. Contona, lamun boga division sabudeureun sakabéh ramatloka anjeun sareng nilai kelas "wadah" (anu mangrupakeun skenario pisan umum dina rarancang web), division nu bisa diatur ka posisi relatif ambéh nanaon jero ngeunaan eta bisa make eta salaku konteks positioning.
Naon Ngeunaan Positioning Maneuh?
positioning tetep mangrupakeun pisan kawas positioning mutlak. Posisi unsur diitung dina cara nu sarua salaku modél mutlak, tapi elemen dibereskeun nu lajeng dibereskeun di nu location- ampir kawas watermark . Sagalana sejenna dina kaca lajeng bakal ngagulung kaliwat unsur éta.
Ngagunakeun nilai sipat ieu, anjeun bakal nangtukeun:
posisi: dibereskeun;Terus di pikiran, nalika anjeun ngalereskeun unsur di tempat dina situs anjeun, eta baris nyitak dina lokasi nu lamun kaca Wéb anjeun dicitak kaluar. Contona, upami unsur anjeun dibereskeun di luhur kaca anjeun, éta bakal muncul di luhur unggal kaca dicitak - sabab urang dibereskeun kana luhureun kaca. Anjeun tiasa make jenis media ka Ngarobah cara Kaca dicitak nembongkeun elemen tetep:
layar @media {h1 # munggaran {posisi: dibereskeun; }} Print @media {h1 # munggaran {posisi: statik; }}Aslina artikel ku Jennifer Krynin. Diédit ku Jeremy Girard on 1/7/16.