Ke Kuhikahi a me ka Noʻonoʻo - E wehewehe ana iā CSS Positioning

ʻO ka hoʻonohonoho CSS ma mua o ka X, Y Huileʻa

He mea nui ka hoʻonohonoho CSS i ka hanaʻana i nā papahana pūnaewele. Me ka piʻiʻana o nāʻenehana hoʻolālā CSS hou hou like Flexbox a me CSS Grid, he wahi koʻikoʻi kahi i hoʻonohonohoʻia i loko o nāʻeke o nā mea hoʻohana pūnaewele pūnaewele.

I ka hoʻohanaʻana i ka positioning CSS,ʻo ka mea mua e pono aiʻoe ke hana, e hoʻokumu i ka waiwai CSS no kahi kūlana e haʻi i ka polokalamu kelepona inā e hoʻohana anaʻoe i kahi hoʻonohonoho piha a pili paha no kahi i hāʻawiʻia. Ponoʻoe e hoʻomaopopo maopopo i kaʻokoʻa ma waena o kēia mau mea hoʻonohonohoʻelua.

ʻOiaiʻo ka mea piha a me ka pilina nā mea kūlana CSSʻelua i hoʻohana pinepineʻia i ka hoʻolālā pūnaewele, aia nō he mau'āinaʻehā i kahi waiwai:

ʻO ke kuhi ke kūlana paʻamau no kekahi mea ma kahi pūnaewele pūnaewele. Ināʻaʻoleʻoe e wehewehe i ke kūlana o kahi mea, e kūpaʻa. ʻO keʻano, e hōʻikeʻia ma ka pakuhi e pili ana i kahi e waihoʻia ana ma ka palapala HTML a pehea e hōʻikeʻia ai i loko o ka holo maʻamau o kēlā palapala.

Inā hoʻokomo i nā kānāwai hoʻonohonoho e like me ka luna a iʻole i ka hema i kahi mea i loaʻa kahi kūlana, e nānāʻia kēlā mau rula a e hoʻomahaʻia ka mea i kahi eʻikeʻia ai i ka holoʻana o ka palapala. ʻO kaʻoiaʻiʻo, hikiʻole iāʻoe ke hoʻonohonoho i kahi mea i kahi kūlana kūlana ma CSS mai ka manawaʻo ia ke kumu kūponoʻole.

ʻO ka hoʻonohonoho CSS piha loa

ʻO ka hoʻonohonoho pihaʻana pahaʻo ia ka mahele CSS maʻalahi loa e hoʻomaopopo. Hoʻomakaʻoe me kēia waiwai kūlana CSS:

wahi: kūʻokoʻa;

Hōʻike kēiaʻili i ka polokalamu kelepona i kēlā me kēia mea e hoʻonohoʻia ana e pono e weheʻia mai ka hana maʻamau o ka palapala a hoʻonohoʻia ma kekahi wahi kiko'ī ma kaʻaoʻao. Hoʻonohonohoʻia kēia ma luna o ka mea i pili loa i kahi kupuna ma kahi kūponoʻole i hoʻokūkūʻia.

Ma muli o ka laweʻiaʻana o ka wae i hoʻonohonoho ponoʻia mai ka hana maʻamau o ka palapala,ʻaʻole ia e hoʻololi i ka hopena o nā kumu mua iʻole ma hope paha i ka pae HTML ma ka pūnaewele pūnaewele.

No keʻano he kumu - ināʻoe he mahele i hoʻonohonohoʻia me kahi waiwai o ka pilina (e nānā pono kākou i kēia kelepona), a ma loko o kēlā māhele i loaʻa iāʻoe kahi paukū āu i makemake ai e hoʻonoho i 50 pika mai ka piko o ka mahele,ʻoʻoe e hoʻonui i kahi kūlana kūlana o "kūpono" i kēlā paukū me ka uku hoʻopiʻi o 50px ma ka "top" waiwai, e like me kēia.

wahi: kūʻokoʻa; piʻi: 50px;

Ma kēia hoʻonohonoho ponoʻia e hōʻikeʻia ka element i 50 mau pika mai ka piko o kēlā māhele i hoʻonohonohoʻia - me nā mea'ē aʻe i hōʻikeʻia ma laila i ka holo maʻamau. ʻO kāu "māhele" i hoʻonohonoho ponoʻia ka hoʻohanaʻana i ka mea i hoʻohālikelikeʻia e like me kona pōʻaiapili a me ka helu kūpono āu e hoʻohana ai he pili ia.

ʻO nā mea hoʻonohonohoʻehā i loaʻa iāʻoe e hoʻohana ai:

Hiki iāʻoe ke hoʻohana ma luna a ma lalo paha (ʻoiai hikiʻole ke hoʻonohonohoʻia kahi pae e like me kēia mau heluʻelua) a me ka'ākau a me ka hema.

Inā ua hoʻonohoʻia kekahi māhele i kahi kūlana paʻa, akā naʻe,ʻaʻole i hoʻonohonohoʻia nā kūpuna i kahi kūlanaʻole, a laila, e kauʻia ma kahi pili i ke 'ano o ke kino,ʻo ia ka pae kiʻekiʻe loa o kaʻaoʻao.

ʻO kahi kūlana pili

Ua'ōlelo mua mākou i ke kūlana pili, no laila, e nānā kākou i kēlā'āpana i kēia manawa.

Hiki i ka hoʻonohonoho kūlana ke hoʻohana i nā mea hanaʻehā e like me ka hoʻonohonoho paʻa, akā, ma kahi o ka hoʻokauʻana i ke kūlana o ka mea ma luna o kona kūlana i kūʻole i ke kūlana o ka kūpuna, hoʻomaka ia ma kahi o ka pūʻali inā e holo mau ana.

Eia kekahi laʻana, ināʻekolu mau palakalakala ma kāu pūnaewele, aʻo ka kolu i kahi "hoʻonohonoho": i hoʻonohonohoʻia i kahi kiko'ī, e hoʻopauʻia ke kūlana ma luna o kahi i kēia manawa.

Pāhele 1.

Māhele 2.

Māhele 3.

Ma ka mea i hōʻikeʻia ma luna nei, e hoʻonohoʻia ka paukuʻekolu ma kaʻaoʻao hema o ka pūmole pahu, akā e waiho i lalo o nā paukūʻelua. E mau ana i ka holo maʻamau o ka palapala, a e hoʻopaneʻe wale i kekahi. Inā hoʻololiʻoe iā ia i kahi hoʻonohonoho: pono; ʻo nā mea e pili ana ma laila e hōʻike ma luna o ia mea, no ka mea,ʻaʻole ia i ka holo maʻamau o ka palapala.

Hoʻohanaʻia nā mea e pono ai ma kahi pūnaewele e hoʻonoho i kahi kūlana kūlana: piliʻole me ka ukuʻole i hoʻonohonohoʻia,ʻo ia hoʻi, ua hoʻomau ke koena i kahi eʻikeʻia ai i ka holo maʻamau. Hoʻopiliʻia kēia no ka hoʻokumuʻana i kēlā waehana e like me kahi'ōpili e pili ana i kahi mau mea'ē aʻe e hiki ke hoʻonohonoho ponoʻia. No ka laʻana, inā he maheleʻoe e puni ana i kāu pūnaewele me kahi kūlana o ka "pahu" (kahi kūpono maʻamau i ka hoʻolālā pūnaewele), hiki ke hoʻonohonohoʻia kēlā māhele i kahi kūlana pili i hiki ke hoʻohana i kekahi mea i loko ia he kūlana hoʻolālā.

Pehea e pili ana i kahi hoʻonohonoho pono?

ʻO ka hoʻonohonoho paʻaʻana he like me ka hoʻonohonoho piha. ʻO ka hoʻonohonohoʻana o ka mea i hoʻonohonohoʻia ma keʻano like me ke kūlana kūpono, akā, hoʻonohonoho ponoʻia nāʻene kūpono i kēlā wahi-e like me kahi kahawaiwai . ʻO nā mea'ē aʻe ma kaʻaoʻao e kaomi i kēlā pae.

No ke hoʻohanaʻana i kēia waiwai waiwai, e hoʻonohoʻoe:

wahi: hoʻopaʻa;

E noʻonoʻo, ke hoʻoponoponoʻoe i kahi māhele i kahi ma kāu pūnaewele, e paʻi ia ma kēlā wahi i ka wā i paʻiʻia ai kāuʻaoʻao pūnaewele. Eia kekahi laʻana, inā hoʻonohonohoʻia kāu mea i ka luna o kāuʻaoʻao, eʻikeʻia ma luna o nāʻaoʻao i paʻiʻia - no ka mea, ua hoʻokumuʻia i ka luna o kaʻaoʻao. Hiki iāʻoe ke hoʻohana i nāʻano media e hoʻololi i kahi e hōʻike ai nāʻaoʻao i paʻiʻia i nā manawaena:

@media makahiki {h1 # mua [position: hoʻopaʻa; }} @tekau kaomi {h1 # mua [position: static; }}

Ka'ōlelo kumu mua na Jennifer Krynin. Hoʻoponoponoʻia e Jeremy Girard ma ka lā 1/9/16.