CSS Nafasi: mifano

. Layout-Kompyuta mara nyingi kuwa na ugumu katika mambo nafasi kwa njia ya CSS. Position куда проще в освоении, чем кажется на первый взгляд. Kwa kweli, CSS Nafasi mali ni rahisi zaidi kujifunza kuliko inaonekana katika mtazamo wa kwanza. By mastering yao, unaweza kupata zana yenye nguvu ambayo unaweza kupanga mambo yote ukurasa katika maeneo ya kulia. добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются Lakini ili kupata matokeo, unahitaji kujua kuhusu maadili yote iliyopo, kwa sababu kanuni za matendo yao ni tofauti sana

Maalum ya mtiririko hati

работает с потоком веб-страницы. Nafasi CSS kazi na mtiririko katika tovuti yetu. Jinsi ya kuelewa hili? html- разметке. By default, mambo yote ukurasa katika mpangilio wa utaratibu ambao wewe waumba katika ghafi HTML-. header расположен над тегом footer, то и на странице он будет отображаться выше. Kama header tag ziko juu tag footer, na basi itakuwa kuonyeshwa hapo juu ya ukurasa. footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». Kwa upande mwingine, kama kwa sababu baadhi ya kuamua kuweka footer katika html juu ya "Heder", "Lelo" ukurasa itaonyeshwa juu ya "cap". Katika kesi hii, mambo ya kuzuia wa ngazi kuchukua upana mzima inapatikana kwa wao. Ndogo, kwa hiyo, katika mpangilio wa mstari moja, wakati kuchukua yote, na kisha itakuwa kuhamishiwa mwezi mmoja. Utaratibu huu inaitwa "mtiririko wa hati."

Ili kubadilisha mtiririko tabia kutumika Nafasi mali . katika CSS. float, но его мы рассматривать не будем. Pia inaweza kutofautiana kutokana na uwezo wa kuelea, lakini itakuwa si kuzingatiwa. Na mwanachama nafasi zinaweza kufanywa na "kuanguka" kutoka mkondo wa kawaida, baada ya hapo utaanza na tabia tofauti. Jinsi gani hasa - ni inategemea thamani kutumika ya mali.

CSS Nafasi: tuli

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. Nafasi: tuli, au nafasi tuli ni chaguo-msingi kwa vitalu vyote html kuwa kuundwa. Katika hali ya kawaida, sio kukabiliana na yake. static. Kama kuzuia au mstari si defined katika nafasi yoyote wote, hivyo ni muhimu tuli. Kwenye ukurasa wa sehemu ambayo yanaonyeshwa kwa mujibu wa mtiririko. right/left или top/bottom, никакого эффекта не будет. Kama show yake mali kulia / kushoto au juu / chini, hakuna athari utakuwa.

CSS Nafasi: fasta

оказывается вне нормального потока документа. Wakati wa kutumia mali hii, kipengele yuko nje ya mtiririko wa kawaida wa hati. относительно окна браузера, независимо от того, как размещаются прочие компоненты. Sasa nafasi yake ni mahesabu jamaa dirisha browser, bila kujali ni sehemu nyingine ziko. : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. Kwa maneno mengine, kuzuia na Nafasi: fasta kuacha juu ya ukurasa, taabu dhidi ya makali ya dirisha browser, na mambo mengine kuchukua nafasi yake kwa mujibu wa mtiririko.

kipengele kuu ya mambo fasta nafasi ni kwamba wanaweza kuingiliana vitalu nyingine na kamba ukurasa. : fixed будет будто бы оставаться на месте, не исчезая с экрана. Wakati scrolling ya kuzuia na Nafasi: fasta itakuwa allegiance kubaki katika nafasi bila kutoweka kutoka screen. Hii ni muhimu kama unahitaji navigate au kama, ambapo mtumiaji lazima daima kuwa na upatikanaji wa. Kudumu nafasi pia hutumika kama unataka kuweka haraka kitabu kifungo kwa sehemu fulani ya ukurasa.

CSS Nafasi: jamaa

. Kwa kutumia mali hii inaitwa jamaa positioning. : relative, тот останется на своем месте. Ukiweka bidhaa mali Nafasi: jamaa, atakuwa kubaki katika nafasi yake. right/left и top/bottom. Kwa mtazamo wa kwanza, hakuna kitu kinachotokea nyingi, lakini mabadiliko yote ikiwa matumizi zaidi mali kulia / kushoto na ya juu / chini. Zinaweza kutumika kudhibiti harakati ya jamaa sehemu kwa eneo lake. останутся на своих положениях, не обращая внимания на освободившееся место . Katika doa ambapo kuzuia au mstari hutumiwa, itakuwa nafasi tupu - mambo mengine kubaki katika nafasi zao, si kulipa kipaumbele kwa nafasi.

Wakati hoja ya sehemu haiathiri msimamo wa sehemu jirani ya ukurasa. Wao kubaki katika nafasi, pamoja na kwamba kiasi nafasi ya kuzuia unaweza kuzuia yao. Yenyewe, mali ni mara chache kutumika. Kwa kawaida ni kutumika kwa kushirikiana na mfano halisi yafuatayo.

nafasi kabisa

Moja ya kuvutia zaidi na chaguzi mara nyingi kutumika. Wakati wa kutumia mali Nafasi absolute положение компонента страницы будет высчитываться относительно окна браузера. na thamani ya nafasi kamili ya sehemu ukurasa zitahesabiwa jamaa dirisha la kivinjari. элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. Mambo mengine (yasiyo ya kabisa nafasi) kama "kusahau" kuhusu "ndugu" kwa kuwepo kwa Nafasi: kabisa na itachukua nafasi yake katika mkondo. : fixed, но есть и серьезные различия. Inaonekana kwamba kila kitu ni sawa kama katika kesi ya Nafasi: fasta, lakini kuna tofauti muhimu.

top/right/bottom/left. Kwanza, msimamo wa kipengele inaweza kudhibitiwa kwa uhuru - ni kutumika kwa mali hii ya juu / kulia / chini / kushoto. bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Kwa mfano, kama wewe kuweka thamani ya chini: 100px, kuzuia "kushinikiza mbali" kutoka chini ya ukurasa 100 saizi. Pili, wakati scrolling "kabisa" sehemu kubaki katika nafasi, badala ya kuwa na navigate kwa ukurasa.

Mwingiliano vitengo kabisa na mambo mzazi

Unaweza kupata udhibiti hata sahihi zaidi juu ya sehemu kabisa katika nafasi nzuri. : fixed, relative или absolute. Ili kufanya hivyo, unahitaji kuweka kampuni yake kuu mali Nafasi: fasta, ndugu au kabisa.

Fikiria mfano. div с классом relative-div, внутри которого размещается div с классом absolute-div. Je, una div na darasa la jamaa-div, ndani ya ambayo ni kuwekwa div na darasa la kamili-div. : absolute. Tuliweka kitengo ndani ya mali Nafasi: kabisa. Mara moja "inachukua off" kutoka mkondo na ni mahali fulani juu, kwa sababu sasa sehemu yake ya ni mahesabu jamaa dirisha la kivinjari. relative-div свойство Position : relative и «блудный сын» возвращается на место. Sasa kutokana na kuzuia na darasa jamaa-div Nafasi mali: jamaa na "mwana mpotevu" ni nyuma katika mahali. Karibu. Kwa kweli, inaonekana katika kona ya juu kushoto ya kipengele mzazi.

Kwa nini hii ni? : absolute. Udhamini wake maalum mali Nafasi: kabisa. static, позиция начинает зависеть от родительского элемента. By default, sehemu yake ya inategemea browser yako, lakini kama "mzazi" pia nafasi nzuri kama kitu chochote lakini tuli, nafasi huanza hutegemea kipengele mzazi. Hii ni kubwa kwa sababu unaweza kuweka sehemu popote bila namba proschityvaya kubwa ikilinganishwa na dirisha la kivinjari. Uandikishaji ni mara nyingi hutumika kuweka icons, vifungo na vifaa vidogo vidogo.

Nafasi CSS unaozingatia

Moja ya matatizo kuu Kompyuta ni katikati kipengele wima na usawa. , сделать это проще простого. Vizuri kutumia Nafasi mali, kufanya ni rahisi. CSS Nafasi: kabisa katika kituo ni kuweka kama ifuatavyo. iv с классом absolute-div, который находится в «диве» с классом relative-div. Tuseme una darasa d iv kabisa-div, ambayo ni katika "diva" ya darasa jamaa-div. "Mzazi" na nafasi ya jamaa na upana wake ni sawa na upana wa ukurasa mzima. и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "Ukoo" ina upana na urefu wa 400 px, nafasi kabisa, na iko kwa chaguo-msingi katika kona ya juu-kushoto wa kipengele mzazi.

top: 50 % и left: 50 %. Wote unahitaji kufanya - ni kuweka kamili ya sehemu ya juu: 50% na kushoto: 50%. Karibu kumaliza! сдвинулся с места и оказался почти в центре, но не совсем. Kabisa-div Budge na alikuwa karibu katikati, lakini kabisa. Maana yake ni "mzazi" kuhusiana na mwisho wake, na tunahitaji kupata katika kituo cha kuzuia alithibitika kuwa katikati ya "uzao." margin-left и margin-right со значениями -200 px. Ili kufanya hivyo, unahitaji kumuuliza yeye margin-kushoto na margin-kulia na maadili -200 px. Hivyo, sisi kuhama kuzuia kabisa nafasi kwenye nusu ya urefu wake na upana. Yote katikati!

vipengele zinazoingiliana

tatizo inaweza kuwa vigumu, katika mtazamo wa kwanza, "kuanzishwa kwa" mambo nafasi nzuri ya zao "majirani". : fixed будет перекрывать все, что расположено на странице. Kwa mfano, sehemu Nafasi: fasta kutapuuza kila ziko katika ukurasa. z-index, однако помните, что оно работает только для позиционированных элементов. Kukabiliana na hali hiyo, unaweza kutumia tabia za z-index, lakini kumbuka kwamba kazi tu kwa ajili ya mambo ya nafasi nzuri. Kwa hiyo, kama unataka kuweka block juu ya kipengele maalum nafasi, kitengo hii pia kuwa na kuweka nafasi. Kwa mfano, ndugu.

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. njia bora ya bwana nafasi - kuchukuliwa mifano Nafasi CSS, kwa majaribio na kujaribu kitu tofauti. calc() – это даст возможность более гибко настраивать расположение. Jaribu kujifunza kuitumia kwa kushirikiana na kazi calc () - hii itawezesha kubadilika zaidi ya kurekebisha msimamo. Hata hivyo, kumbuka kwamba mali hii si nia kwa ajili ya kujenga nzima "halisi" kurasa. Pamoja na hayo, unahitaji hoja mambo ndogo, au inaweza kuwa rahisi sana kupata kuchanganyikiwa.