border-box content-box na available min-content max-content fit-content auto

Halimbawa

Ako ay kalahating taas ng aking magulang.

div ( width: 250px; margin-bottom: 5px; border: 2px solid blue; ) #taller ( height: 50px; ) #shorter ( height: 25px; ) #parent ( height: 100px; ) #child ( height: 50% lapad: 75%;

Resulta

Siguraduhin na ang mga elementong itinakda na may taas ay hindi pinutol at/o hindi nakakubli ang iba pang nilalaman kapag ang pahina ay naka-zoom upang madagdagan ang laki ng teksto.

Mga pagtutukoy

Pagkatugma sa browser

Ang talahanayan ng compatibility sa page na ito ay nabuo mula sa structured data. Kung gusto mong mag-ambag sa data, pakitingnan ang https://github.com/mdn/browser-compat-data at padalhan kami ng pull request.

I-update ang data ng compatibility sa GitHub

Alamat

Kumusta, mahal na mga mambabasa! Ngayon ay titingnan natin kung paano itakda ang laki ng mga elemento ng block sa isang web page gamit ang mga katangian ng CSS at i-configure ang pagpapakita ng nilalaman kung hindi ito akma sa elemento.

lapad at taas - lapad at taas ng mga elemento sa css

Gamit ang mga katangian ng estilo ng lapad at taas, maaari mong itakda ang lapad at taas ng mga elemento ng block, ayon sa pagkakabanggit:

lapad: auto|<ширина>|manahin
taas: auto|<ширина>|manahin

Bilang mga halaga, maaari mong gamitin ang anumang mga yunit ng pagsukat na available sa css - halimbawa, mga pixel (px), pulgada (in), puntos (pt), atbp.:

p (lapad:200px; taas:150px)

Bilang karagdagan sa mga ganap na unit, maaari mong tukuyin ang kamag-anak na laki ng mga elemento bilang isang porsyento. Sa kasong ito, ang lapad at taas ng elemento ay depende sa lapad at taas ng parent na elemento. Kung ang magulang ay hindi tahasang tinukoy, ang mga sukat ay depende sa window ng browser.

div (lapad:40%;)

Awtomatikong nag-iiwan ng kontrol sa laki ng elemento sa web browser at ito ang default na halaga. Sa kasong ito, ang mga sukat ng elemento ay magiging ganap na magkasya sa lahat ng nilalaman nito.

Tingnan natin ang ilang halimbawa.

Resulta:

Sa halimbawang ito, gumawa kami ng div at nag-nest ng talata p na may text sa loob nito. Para sa div, mahigpit naming itinakda ang mga sukat sa 300 by 300 pixels. Ang elemento ng p ay may lapad at taas na mga halaga ng ari-arian na katumbas ng auto, kaya tulad ng makikita mo sa screenshot, ang lapad nito ay nakatakdang katumbas ng lapad ng parent na elemento, at ang taas nito ay tulad na umaangkop sa lahat ng teksto na nilalaman sa ang talata.

Ngayon ay baguhin natin ang mga setting ng css para sa talata p at itakda ang mga nakapirming dimensyon:

Layer2 (
background: #eee;
lapad:250px;
}

Resulta:

Tulad ng nakikita mo, ang lapad ng talata ay naging mas makitid at katumbas ng 250 pixels, at tumaas ang taas nito upang magkasya ang teksto, dahil ang parameter ng taas ay nanatiling katumbas ng auto.

Ngayon, itakda natin ang taas at lapad ng talata sa mga porsyento:

Layer2 (
background: #eee;
lapad:50%;
taas:50%;
}

Resulta:

Tulad ng makikita mo sa larawan, ang lapad ng elemento ng p ay naging katumbas ng kalahati ng lapad ng elemento ng div. At tumaas ang taas at naging katumbas ng 75 porsiyento ng taas ng div.

Kapag tinutukoy ang lapad at taas ng anumang elemento sa mga kamag-anak na unit, maaaring kailanganin mong tukuyin ang pinakamababa at maximum na posibleng laki. Pagkatapos ng lahat, halimbawa, kapag binabago ang laki ng window ng browser, ang mga sukat ng elemento ay maaaring bumaba at tumaas sa ganoong laki na ang pagiging madaling mabasa ng site ay nagiging napakababa.

Maaari mong tukuyin ang pinakamababang lapad at taas gamit ang mga katangiang min-width at min-heigh:

min-width:<ширина>
min-taas:<высота>

Nagbibigay-daan sa iyo ang mga katulad na katangian ng istilo na max-width at max-height na magtakda ng mga maximum na laki:

max-width:<ширина>
max-taas:<высота>

Malinaw na kapag nagtatakda ng maximum at minimum na mga halaga para sa taas at lapad, ang mga sukat ng elemento ay hindi maaaring maging mas malaki kaysa sa maximum at mas mababa sa minimum na mga halaga.

Ito ay nagkakahalaga ng paglilinaw na ang gawain Ang mga parameter ng taas at lapad ay may katuturan lamang para sa mga block tag, dahil para sa mga inline na elemento ang mga parameter na ito ay hindi pinoproseso ng browser.

Maaaring mangyari na kapag nagtakda ka ng mga mahigpit na parameter para sa taas at lapad ng isang elemento, ang nilalamang nilalaman nito ay maaaring hindi magkasya sa limitadong lugar.

Halimbawa, bawasan natin ang laki ng talata p mula sa mga halimbawang tinalakay sa itaas hanggang 100 pixels:

Layer2 (
background: #eee;
lapad:100px;
taas:100px;
}

Resulta:

Tulad ng nakikita mo, ang teksto ay lumampas sa mga hangganan ng talata at hindi ito mukhang maganda. Para maiwasan ang mga ganitong sitwasyon, mayroong CSS rule - overflow.

Overflow parameter para sa pagtatago (nakatago, nakikita) o pag-scroll (scroll, auto) na nilalaman

Maaaring mangyari ang pag-apaw ng nilalaman kapag ang lapad at taas ng isang elemento ay napipilitan. Tingnan natin ang dalawang talata:

Teksto ng unang talata

Pangalawang teksto ng talata

Resulta:

Dahil hindi tinukoy ang lapad o taas para sa mga talata, independyenteng kinakalkula ng browser ang mga ito batay sa sarili nitong pag-unawa sa halaga ng auto. Bilang resulta, kinuha ng mga talata ang lahat ng magagamit na espasyo sa lapad, at sa taas alinsunod sa nilalaman na nilalaman nito.

Ngayon, limitahan natin ang lapad ng unang talata:

Teksto ng unang talata

Pangalawang teksto ng talata

Resulta:

Ang lapad ng talata ay inaasahang nabawasan, at ang taas ay itinakda upang mapaunlakan ang buong teksto.

Ngayon, limitahan natin ang taas ng unang talata:

Teksto ng unang talata

Pangalawang teksto ng talata

Bilang isang resulta, lumabas na ang teksto ay hindi umaangkop sa isang limitadong talata at samakatuwid ay tumakbo ito sa lugar ng mas mababang kapitbahay. Alinsunod dito, halos imposibleng basahin ang teksto sa una o pangalawang talata. Ito ay upang kontrolin ang pag-uugali ng nilalaman sa mga ganitong sitwasyon na mayroon tuntunin sa pag-apaw:

overflow: visible|hidden|scroll|auto|inherit

Bilang default, nakatakda ang overflow sa visible, na nagsasabi sa browser na magpakita ng content na hindi kasya sa container. Ang resulta ay makikita sa halimbawa sa itaas.

Itinatago ng panuntunan ang lahat ng hindi kasya sa lalagyan:

Ang scroll value ay magpapakita ng patayo at pahalang na mga scroll bar sa elemento kahit na ang lahat ng nilalaman ay magkasya:

Teksto ng unang talata

Pangalawang teksto ng talata

Ang pinakasikat at lohikal na solusyon kung kailangan mong gumawa ng mga scroll bar para sa isang lalagyan ay ang halaga sasakyan. Sa kasong ito, ang browser mismo ang tutukuyin kung kailan at sa aling mga axes dapat itong magpakita ng mga scroll bar:

Teksto ng unang talata

Pangalawang teksto ng talata

Resulta:

Upang i-customize ang mga scrollbar, maaari mo ring gamitin ang mga katangian ng istilong overflow-x at overflow-y, na nagbibigay-daan sa iyong i-customize ang pagpapakita ng pag-scroll sa mga indibidwal na axes. Kaya responsable para sa pahalang na axis, at para sa patayong axis.

Samakatuwid, kung kailangan mo, halimbawa, ang pahalang na pag-scroll upang hindi kailanman lumitaw sa isang talata, at ang patayong pag-scroll upang lumitaw lamang kapag kinakailangan, pagkatapos ay isulat lamang ang sumusunod na panuntunan ng css:

p(overflow-x:hidden;overflow-y:auto;)

At ang problema ay malulutas.

Iyon lang. Hanggang sa susunod. Huwag kalimutang mag-subscribe sa mga update sa blog at ako ay magpapasalamat kung gagamitin mo ang mga pindutan ng social network.

Taas at lapad ng elemento ay kinakalkula ang mga dami. Ang bawat elemento ng isang web page ay bumubuo ng isang hugis-parihaba na lugar, na kung saan ay binubuo ng ilang mga lugar - mga lugar ng nilalaman, mga lugar ng padding, mga lugar ng frame At mga lugar ng field elemento.

Sa pagitan ng nilalaman ng elemento at hangganan nito ay indentation padding, sa labas ng hangganan ng elemento - mga patlang margin . Ang isang lugar ng nilalaman ay umiiral para sa bawat elemento ay opsyonal.

1. Taas ng elemento

Tinutukoy ng property ng taas ang taas ng nilalaman ng block element at walang epekto sa display ng mga inline na elemento: inline; . Ang taas ng mga inline na elemento ay katumbas ng taas ng kanilang nilalaman. Hindi pinapayagan ang mga negatibong halaga. Ang ari-arian ay hindi minana.

Syntax

P (taas: 100px;)

2. Lapad ng elemento

Tinutukoy ng width property ang lapad ng nilalaman ng block element at walang epekto sa mga inline na elemento na ipinapakita: inline; . Ang lapad ng mga inline na elemento ay katumbas ng lapad ng kanilang nilalaman. Hindi pinapayagan ang mga negatibong halaga. Ang ari-arian ay hindi minana.

Syntax

P (lapad: 100px;)

3. Taas at lapad ng isang ganap na nakaposisyon na elemento

Itakda ang lapad at taas ng isang ganap na nakaposisyon na posisyon ng elemento: absolute; hindi palaging kinakailangan, dahil sa kasong ito ang taas at lapad ay tahasang tinutukoy ng offset ng elemento. Kung ang isang elemento ay may mga hangganan at margin na tinukoy, binabawasan nila ang laki ng lugar ng nilalaman sa pamamagitan ng mga naaangkop na halaga.

Div ( background: #6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; ) /*sa kasong ito, ang taas ng elemento ay 100%, ang lapad ay 50% ng ang parent block*/
kanin. 2. Taas at lapad ng isang ganap na nakaposisyon na elemento

4. Element padding

Gamit ang property ng padding, maaari mong itakda ang padding nang sabay-sabay para sa ilang panig ng isang elemento sa sumusunod na pagkakasunud-sunod: . Kung may background ang elemento, malalapat din ito sa padding. Hindi pinapayagan ang mga negatibong halaga. Ang ari-arian ay hindi minana.

Kung ang tatlong halaga ay ibinigay, halimbawa, div (padding: 10px 20px 30px;), pagkatapos ay ipamahagi ang mga ito sa sumusunod na pagkakasunud-sunod: ang unang halaga ay ang nangungunang padding, ang pangalawa ay ang kanan at kaliwang padding, ang pangatlo ay ang ilalim na padding.
Kung ang dalawang halaga ay ibinigay, halimbawa, div (padding: 10px 20px;), pagkatapos ay itatakda ng una ang tuktok at ibabang padding, ang pangalawa ay magtatakda sa kanan at kaliwa.
Ang isang value, gaya ng div (padding: 10px;) , ay magtatakda ng parehong padding sa lahat ng panig ng elemento.

Syntax

P (padding: 5px 10px 15px 10px;)

4.1. Padding sa isang bahagi ng isang elemento

Upang itakda ang padding sa isang bahagi lamang ng isang elemento, kailangan mong gumamit ng isa sa mga katangian padding-top , padding-right , padding-bottom , padding-left , halimbawa:

P (padding-kaliwa: 10px;)

5. Mga Margin ng Elemento

Karamihan sa mga elemento ay pinaghihiwalay sa bawat isa sa pamamagitan ng mga margin. Ang margin property ay isang maikling form para sa pagtatala ng mga field ng isang elemento sa sumusunod na pagkakasunud-sunod: itaas, kanan, ibaba, kaliwa. Ginagamit kapag kailangan mong magtakda ng mga margin sa ilang panig, ngunit hindi sa apat. Ang mga patayong katabing margin ng mga elemento ng block ay na-collapse, at ang mga nasa itaas at ibabang margin ay walang epekto sa mga inline na elemento. Pinapayagan ang mga negatibong halaga. Ang ari-arian ay hindi minana.

Kung ang tatlong halaga ay ibinigay, halimbawa, div (margin: 10px 20px 30px;), pagkatapos ay ipamahagi sila sa sumusunod na pagkakasunud-sunod: ang unang halaga ay ang pinakamataas na margin, ang pangalawa ay ang kanan at kaliwang margin, ang pangatlo ay ang ilalim na margin.
Kung ang dalawang halaga ay ibinigay, halimbawa, div (margin: 10px 20px;), pagkatapos ay itatakda ng una ang itaas at ibabang mga margin, ang pangalawa ay magtatakda sa kanan at kaliwa.
Ang isang solong halaga, tulad ng div (margin: 10px;) , ay magtatakda ng pantay na mga margin sa lahat ng panig ng elemento.

(margin: 0 auto;) ay gagana lamang kung ang lapad ng elemento ay tahasang tinukoy.

Syntax

Div (margin: 5px 10px 2px 5px;)

5.1. Mga margin sa isang bahagi ng elemento

Kinokontrol ng mga property na margin-top , margin-right , margin-bottom , margin-left ang mga katumbas na margin sa bawat panig ng elemento, halimbawa:

P (margin-kaliwa: 10px;)

6. Lapad at taas na limitasyon

Sinusuportahan din ng CSS ang ilang iba pang mga katangian na nauugnay sa pagtatakda ng taas at lapad ng mga elemento ng web page: min-height , min-width , max-height at max-width . Binibigyang-daan ka ng mga katangiang ito na itakda ang pinakamababa at maximum na mga halaga para sa lapad o taas ng isang elemento, na nagbibigay sa elemento ng kakayahang punan ang magagamit na espasyo. Ang mga katangian ay kadalasang ginagamit para sa tumutugon na disenyo ng web page. Nalalapat sa lahat ng elemento maliban sa mga elemento ng inline at talahanayan. Palagi silang sumusunod sa pangunahing panuntunan, i.e. pagkatapos ibigay ang taas o lapad ng elemento. Hindi namamana.

Maaari kang magtakda ng mga regular na dimensyon gamit ang ilang unit ng pagsukat, at mga paghihigpit sa laki gamit ang iba pang unit, halimbawa:

Div ( lapad: 400px; max-width: 50%; )

Ang elemento ay magkakaroon lamang ng lapad na 400px kung ang value na ito ay hindi lalampas sa 50% ng lapad ng container block, kung hindi ay mababawasan ang lapad nito.

Upang ang isang bagay ay mabigyan ng isang tiyak na lapad at taas, mayroong dalawang katangian sa CSS - lapad at taas (ayon sa pagkakabanggit). Sa tulong nila, maaari kang magtakda ng mga nakapirming laki para sa mga elemento, maging sidebar, larawan, talahanayan o anumang bloke.

Mga tampok ng pagkalkula ng lapad at taas

Maaari mong gamitin ang anumang unit ng haba sa CSS upang tukuyin ang lapad o taas ng isang bagay. Ang mga pixel ang pinakamadaling maunawaan. Kung gagamit ka ng percentage notation, tandaan na ang lapad ng object ay depende sa lapad ng parent nito. Kung wala, kung gayon ang lapad ng elemento ay kinakalkula batay sa lapad ng window ng browser (kung binago ng user ang lapad ng window, ang halaga ng lapad ay muling kakalkulahin).

Maaari mo ring gamitin ang em unit bilang width value, na humigit-kumulang pareho sa laki ng font ng text, ngunit sa mga conventional unit lang. Halimbawa, itinakda mo ang laki ng font sa 24px. Pagkatapos, ang 1em para sa elementong ito ay magiging katumbas ng 24px, at kung itinakda mo ang lapad: 2em ang lapad ay magiging 2x24px = 48 pixels. Kung hindi nakatakda ang laki ng font, ito ay mamanahin.

Ang taas, na tinukoy bilang isang porsyento, ay kinakalkula sa parehong paraan tulad ng lapad, ngunit ang pagkalkula ay batay sa taas ng parent na elemento kaysa sa lapad nito. Kung walang magulang, ang taas ay depende sa taas ng browser window.

Ang porsyento ng lapad at taas ng elemento ng bata ay kinakalkula batay sa mga sukat ng magulang

Ano ang kasama sa lapad at taas

Ito ay nagkakahalaga ng pag-alala kaagad na ang mga katangian ng lapad at taas ay may kakaiba - hindi nila kasama ang mga halaga ng margin, padding at hangganan. Ang halaga na iyong itinakda para sa lapad/taas ay mangangahulugan lamang ng lapad/taas ng bahagi ng nilalaman ng elemento.

Kaya, upang makalkula, halimbawa, ang aktwal na lapad ng isang elemento (ang puwang na aktwal na sasakupin nito sa screen), kinakailangan ang isang maliit na aritmetika. Ang aktwal na lapad ay ang kabuuan ng mga halaga tulad ng lapad, padding, hangganan at margin. Alalahanin na dati naming tiningnan kung ano ang hitsura ng modelo ng CSS box.

Upang pagsamahin ang kaalaman, magpapakita kami ng isang halimbawa. Sabihin nating mayroon kang elemento na may ganitong istilo:

Lapad: 200px; margin-kaliwa: 15px; margin-right: 15px; padding-kaliwa: 10px; border-left: 3px solid #333;

Upang kalkulahin ang aktwal na lapad ng elemento, gawin ang karagdagan:

lapad + margin-kaliwa + margin-kanan + padding-kaliwa + hangganan-kaliwa = 200px + 15px + 15px + 10px + 3px = 243px (aktwal na lapad)

Ang pag-aari ng taas ay maaaring maging kapaki-pakinabang kung kailangan mong tumpak na kontrolin, halimbawa, ang taas ng isang imahe. Gayunpaman, kung ang lalagyan ay naglalaman ng teksto o anumang iba pang nilalaman na maaaring mag-iba sa taas, lubos na hindi inirerekomenda na magtakda ng isang nakapirming taas para sa lalagyan, dahil ang gayong layout ay maaaring humantong sa isang hindi inaasahang resulta - ang nilalaman ay ipapakita sa itaas ng iba pang nilalaman.

Sa halip na isang nakapirming taas, gamitin ang taas: auto - ang entry na ito ay nangangahulugan na ang taas ng bagay ay awtomatikong kakalkulahin, depende sa nilalaman na nilalaman nito.

Ang isa pang paraan upang maiwasan ang pagbagsak ng layout ay ang paggamit ng overflow: auto notation. Sa kasong ito, kung ang taas ng content ay lumampas sa taas ng container nito, magdaragdag ang browser ng scrollbar sa container.

Sa susunod na aralin, matututunan mo kung paano mo ma-override ang lapad ng isang elemento gamit ang isang kawili-wili at lubhang kapaki-pakinabang na katangian

Taas: 100%

Upang masagot ito kailangan mong maunawaan iyon taas: 100% katumbas ng taas ng elemento ng magulang. Hindi ito ang mahiwagang "taas ng buong bintana." Kaya, kung gusto mong kunin ng iyong elemento ang 100% ng taas ng window, pagkatapos ay itakda taas: 100% hindi magiging sapat.

Bakit? Ngunit dahil ang parent ng iyong container ay ang body element, at ang height property nito ay nakatakda sa auto bilang default; na nangangahulugan na ang taas nito ay katumbas ng taas ng nilalaman. Siyempre, maaari mong subukang magdagdag ng taas: 100% sa katawan, ngunit hindi rin iyon sapat.

Bakit? At lahat dahil ang magulang ng elemento ng katawan ay ang elemento ng html, na mayroon ding katangian ng taas ng auto at ito rin ay umaabot upang magkasya sa laki ng nilalaman. Ngunit ngayon, kung magdagdag ka ng taas: 100% sa elemento ng html, kung gayon ang lahat ay gagana.

Naging mas malinaw ba? Ang root html elemento ay hindi talaga ang pinakamataas na antas sa pahina - ito ay ang "viewport". Para sa pagiging simple, ipagpalagay namin na ito ay isang browser window. Kaya, kung itinakda mo ang taas: 100% sa isang elemento ng html, kung gayon ito ay kapareho ng sinasabi - maging kapareho ng taas ng window ng browser.

Ibuod natin ang impormasyong nakuha sa isang maliit na piraso ng code:

Html, body, .container ( taas: 100%; )
handa na. Kung interesado kang sumisid nang mas malalim sa kung paano gumagana ang isang viewport, lubos kong inirerekomenda .

Paano kung ang parent element ay mayroong min-height property na nakatakda sa halip na taas nito?

Magulang ( min-height: 300px; height: 1px; /* Kinakailangang gawin ang bata na 100% ng min-height */ .child ( height: 100%; )
Halimbawa sa jsFiddle.

Para sa higit pang mga detalye sa isyung ito, maaari mong basahin ang artikulo ni Roger Johansson.

Lapad: 100%

Hayaan mong sabihin ko sa iyo ang isang maliit na sikreto. width ay hindi isang napakaangkop na pangalan para sa property na ito. Ang pag-aari ng lapad ay hindi ang ganap na sukat ng elemento, ngunit ang laki ng nilalaman ng elemento at na gumagawa ng malaking pagkakaiba.

Kung magdagdag ka ng padding at/o border sa isang elemento na may lapad: 100%, pagkatapos ay hindi na ito magkasya sa parent na elemento. Dahil lumitaw ang padding at hangganan at iyon ang dahilan kung bakit kailangang tawaging lapad ng nilalaman ang lapad. Ngayon mangyaring tingnan ang isang halimbawa na nagpapakita sa itaas.

Sabihin nating ang lapad ng magulang ay 25em, at ang lapad ng bata ay 100% (ng lapad ng magulang) at mayroon din itong padding na 1em (1em sa kanan at 1em sa kaliwa, para sa kabuuang 2em pahalang. ) at isang hangganan na 0.5em (0.5em sa kanan at 0.5em sa kaliwa, para sa kabuuang 1em pahalang ), na sa huli ay nagbibigay sa amin ng 25em (100%) + 2em + 1em = 28em.

Mayroong 4 na posibleng paraan upang malutas ang problemang ito. Ang una at malamang na pinakamahusay na paraan ay ang pag-iwas sa ari-arian lapad: 100%, lalo na dahil sa kasong ito ito ay ganap na walang silbi. Kung block-level ang elemento ng bata, awtomatiko nitong sasakupin ang buong lapad ng magulang (nang walang problema sa padding at border). Ngunit kung nagtatrabaho kami sa isang inline-block na elemento, hindi namin malulutas ang problemang ito nang ganoon kadali.

Maaari naming palitan lapad: 100% sa isang static na laki. Sa aming kaso, 25 - (2 + 1) = 22em. Siyempre, ito ay isang masamang solusyon dahil kailangan nating manu-manong kalkulahin ang lapad. Sa kabilang daan tayo!

Ang ikatlong paraan ay ang paggamit ng calc() upang kalkulahin ang lapad: lapad: calc(100% - 3em). Pero hindi rin kasya yun. Una, kailangan pa rin nating kalkulahin ang padding + mga sukat ng hangganan. Pangalawa, ang calc() ay hindi gaanong sinusuportahan ng mga browser (hindi gumagana sa IE 8, Safari 5, Opera 12, katutubong browser ng Android).

Ideya bilang apat - gamitin ang ari-arian box-sizing: hangganan-kahon. Binabago nito ang algorithm para sa pagkalkula ng lapad at taas ng isang elemento upang isaalang-alang nila ang mga katangian ng padding at hangganan. Ang magandang balita ay ang box-sizing ay may magandang suporta sa browser (IE8+, Opera 7+). At para sa lahat ng iba pang mga browser maaari mong gamitin ang polyfill .

Konklusyon: huwag gamitin lapad: 100% walang box-sizing: hangganan-kahon.

Paano hindi sirain ang z-index.

Para sa mga nagsisimula. Ang katangian ng z-index ay walang epekto sa mga static na elemento. Upang magawang ilipat ang isang elemento sa kahabaan ng Z axis, kailangan nating baguhin ang pagpoposisyon nito sa kamag-anak, ganap o naayos.

Ang mahalagang bagay na dapat maunawaan tungkol sa z-index ay hindi lahat ng elemento sa DOM tree ay inilalagay sa parehong antas. Nangangahulugan ito na ang pagpapalit ng z-index ng isang elemento sa isang napakalaking halaga ay hindi ginagarantiyahan na ito ay dadalhin sa harap. Tinatawag itong overlay na konteksto.

Sa simpleng salita, ang konteksto ng overlay ay isang uri ng pangkat batay sa isang elemento ng html, kung saan ang lahat ng elemento ng bata ay tumatanggap ng parehong posisyon sa konteksto at parehong z-index. Ang pagpapalit ng z-index ng isang elemento ay maaaring maging sanhi ng pag-overlap nito sa iba pang mga elemento ayon sa gusto mo. Narito kung paano inaayos ang mga elemento sa loob ng parehong konteksto ng overlay (mula sa ibaba hanggang sa itaas):

1. Background at mga hangganan ng elemento na bumubuo sa konteksto
2. Mga konteksto ng child overlay na may negatibong z-index (pinakamaliit muna)
3. Hindi nakaposisyon na mga elemento
4. Nakaposisyon na mga elemento na may z-index na halaga ng auto o 0
5. Nakaposisyon na mga elemento na may positibong z-index (bawat susunod sa pagkakasunud-sunod ay matatagpuan sa itaas ng nauna, kung ang z-index ay pantay)

Kapag ang mga bagay ay nagiging pangit

Ang punto ay ang bawat overlay na konteksto ay may sariling z-axis. Halimbawa, ang elemento A sa konteksto 1 at elemento B sa konteksto 2 ay hindi maaaring makipag-ugnayan sa pamamagitan ng z-index. Nangangahulugan ito na ang elementong A, bilang bahagi ng konteksto ng overlay sa ibaba ng pangkalahatang konteksto ng overlay, ay hindi kailanman makakapag-overlap ng elemento B ng isa pang konteksto sa itaas, kahit na may napakataas na halaga ng z-index.

Pero ang mas malala pa. Ang html elemento ay lumilikha ng root overlay na konteksto. Pagkatapos, ang bawat hindi statically positioned na elemento na may z-index property maliban sa auto ay gumagawa din ng sarili nitong overlay na konteksto. Walang bago. Ngunit narito kung saan nagsisimulang magkawatak-watak ang mga bagay: ang ilang mga katangian ng css na walang kinalaman sa konteksto ng overlay ay lumilikha din ng mga bagong konteksto. Halimbawa, ang opacity property.

Tama, ang opacity property ay gumagawa ng bagong overlay na konteksto. Ganoon din ang ginagawa ng mga katangian ng pagbabago at pananaw. Ito ay hindi magkaroon ng anumang kahulugan bagaman, ay ito? Halimbawa, kung mayroon kang anumang elemento na may opacity na mas mababa sa 1 o may anumang pagbabago, maaari kang magkaroon ng problema.

Sa kasamaang palad, ang bawat z-index na problema ay may sarili nitong konteksto (no pun intended) na ginagawang imposible ang isang unibersal na solusyon.

Ibuod natin nang maikli ang nasa itaas:

• Bago ilapat ang z-index, tiyaking itinakda mo ang property ng posisyon sa isang bagay maliban sa static
• Huwag gumamit ng higit sa 5 digit para sa z-index na halaga, ito ay ganap na walang kahulugan; sa karamihan ng mga kaso, ang halaga ng z-index sa paligid ng 10 ay magiging higit pa sa sapat
• Tiyaking nasa parehong konteksto ng overlay ang elementong gusto mong i-overlap.
• Kung hindi pa rin gumagana ang mga bagay gaya ng nararapat, tiyaking walang mga pagbabago at mas mataas ang opacity sa mga pangunahing elemento.

Sa paksa, inirerekumenda ko rin na basahin ang What No One Told You About Z-index ni Philip Walton at ang opisyal na detalye ng css.

Labanan ang Indent Collapse

Sa kabutihang palad, ang pag-uugali na ito ay karaniwang inaasahan. Marahil iyon ang dahilan kung bakit ito gumagana sa paraang ginagawa nito (tulad ng nakasaad sa detalye ng css). Gayunpaman, minsan hindi mo gustong bumagsak ang mga vertical na margin. Upang maunawaan kung paano maiiwasan ito, tingnan muna natin kung bakit ito nangyayari. Maaaring mangyari ang pagbagsak ng mga margin sa tatlong magkakaibang kaso.

Mga Kalapit na Elemento

• malinaw: kaliwa; lumutang: kaliwa; (tama ang parehong mga gawa)
• display: inline-block;

Ang isang halimbawa sa jsFiddle ay naglalarawan kung paano gumagana ang mga pag-aayos.

Magulang at panganay/huling anak

• overflow: nakatago (o anumang iba pa, ngunit hindi nakikita)
• padding: 1px (o iba pang value na mas malaki sa 0)
• hangganan: 1px solid na transparent (o anumang iba pang hangganan)
• float: kaliwa (kanan gumagana ang parehong)

Ang isang halimbawa sa jsFiddle ay naglalarawan kung paano gumagana ang mga pag-aayos.

Walang laman na mga bloke

Umaasa ako na nakatulong sa iyo ang artikulong ito na maunawaan ang ilang bagay na makapagliligtas sa iyo mula sa mga problema sa hinaharap.