ទីតាំងជា CSS: ឧទហរណ៍

. ប្លង់ចាប់ផ្តើមជាញឹកញាប់មានការលំបាកជាមួយធាតុទីតាំងតាមរយៈ CSS ។ Position куда проще в освоении, чем кажется на первый взгляд. នៅក្នុងការពិតទ្រព្យសម្បត្តិទីតាំង CSS ជាកាន់តែងាយស្រួលក្នុងការរៀនជាងវាហាក់ដូចជានៅ glance ដំបូង។ ដោយគ្រូពួកគេ, អ្នកទទួលបានជាឧបករណ៍ដែលមានអនុភាពដែលអ្នកអាចរៀបចំធាតុទាំងអស់នៅក្នុងកន្លែងជាទំព័រខាងស្ដាំ។ добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются ប៉ុន្តែនៅក្នុងគោលបំណងដើម្បីទទួលបានលទ្ធផល, អ្នកត្រូវដឹងអំពីតម្លៃទាំងអស់ដែលមានស្រាប់នោះទេព្រោះគោលការណ៍នៃសកម្មភាពរបស់ពួកគេគឺខុសគ្នាខ្លាំងណាស់

ជាក់លាក់នៃលំហូរឯកសារ

работает с потоком веб-страницы. ទីតាំង CSS បានធ្វើការជាមួយលំហូរទំព័របណ្ដាញ។ តើធ្វើដូចម្តេចដើម្បីឱ្យយល់ពីនេះ? html- разметке. តាមលំនាំដើម, ធាតុទាំងអស់ត្រូវបានរៀបចំទំព័រក្នុងលំដាប់ដែលអ្នកបានបង្កើតពួកគេនៅក្នុងការសម្គាល់ HTML- នេះ។ header расположен над тегом footer, то и на странице он будет отображаться выше. ប្រសិនបើមានស្លាកបឋមកថាបាតកថាស្លាកដែលស្ថិតនៅលើនេះហើយបន្ទាប់មកវានឹងត្រូវបានបង្ហាញនៅខាងលើទំព័រ។ footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». ផ្ទុយទៅវិញប្រសិនបើសម្រាប់មូលហេតុមួយចំនួនដែលអ្នកសម្រេចចិត្តដើម្បីដាក់នៅក្នុង HTML មួយបាតកថានៅលើ "លោក Heder", "បន្ទប់ក្រោមដី" ទំព័រនឹងត្រូវបានបង្ហាញខាងលើនេះ "CAP" ។ ក្នុងករណីនេះកម្រិតធាតុប្លុកទទឹងទាំងមូលកាន់កាប់ដែលអាចប្រើបានដើម្បីឱ្យពួកគេ។ តូច, នៅក្នុងវេន, ត្រូវបានរៀបចំនៅក្នុងជួរដេកមួយនៅខណៈដែលមិនយកវាទាំងអស់, ហើយបន្ទាប់មកនឹងត្រូវបានផ្ទេរទៅមួយថ្មី។ បែបបទនេះត្រូវបានគេហៅថា«លំហូរនៃឯកសារ។ "

ដើម្បីផ្លាស់ប្តូរឥរិយាបទលំហូរប្រើទ្រព្យសម្បត្តិទីតាំង . នៅក្នុង CSS ។ float, но его мы рассматривать не будем. វាអាចប្រែប្រួលដោយសារតែលក្ខណៈសម្បត្តិនៃទសភាគនោះទេប៉ុន្តែវានឹងមិនត្រូវបានចាត់ទុក។ ជាមួយនឹងសមាជិកដាក់អាចត្រូវបានធ្វើឱ្យទៅជា "ធ្លាក់ចុះ" ពីស្ទ្រីមទូទៅ, បន្ទាប់ពីការដែលវានឹងចាប់ផ្តើមមានឥរិយាបទខុសគ្នា។ តើពិតជា - វាអាស្រ័យទៅលើតម្លៃដែលបានប្រើនៃទ្រព្យ។

ទីតាំងជា CSS: ឋិតិវន្ត

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. ទីតាំង: ឋិតិវន្ត, ឬដាក់ទីតាំងឋិតិវន្តគឺជាលំនាំដើមសម្រាប់ប្លុករបស់ HTML ទាំងអស់ដែលអ្នកបានបង្កើត។ នៅក្រោមកាលៈទេសៈធម្មតា, អ្នកមិនមានការដោះស្រាយជាមួយគាត់។ static. បើប្លុកឬបន្ទាត់ណាមួយដែលមិនត្រូវបានកំណត់នៅទីតាំងទាំងអស់នោះទេដូច្នេះវាជាការឋិតិវន្តសំខាន់។ នៅលើទំព័រសមាសភាគដែលត្រូវបានបង្ហាញនៅក្នុងការអនុលោមតាមលំហូរ។ right/left или top/bottom, никакого эффекта не будет. ប្រសិនបើអ្នកបានបង្ហាញគាត់ស្ដាំអចលនទ្រព្យ / ខាងឆ្វេងឬកំពូល / បាត, ប្រសិទ្ធិភាពទេនឹងមាន។

ទីតាំងជា CSS: ថេរ

оказывается вне нормального потока документа. នៅពេលដែលប្រើអចលនទ្រព្យនេះធាតុនេះគឺនៅក្រៅលំហូរធម្មតានៃឯកសារ។ относительно окна браузера, независимо от того, как размещаются прочие компоненты. ឥឡូវជំហររបស់គាត់ត្រូវបានគណនាទាក់ទងទៅបង្អួចកម្មវិធីរុករកដោយមិនគិតពីសមាសភាគផ្សេងទៀតត្រូវបានគេដែលមានទីតាំងស្ថិតនៅ។ : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. នៅក្នុងពាក្យផ្សេងទៀត, ប្លុកមួយដែលមានតួនាទី: ថេរចាកចេញពីផ្នែកខាងលើនៃទំព័រនេះ, ចុចប្រឆាំងនឹងគែមរបស់បង្អួចកម្មវិធីរុករក, និងធាតុផ្សេងទៀតដែលបានយកកន្លែងរបស់ខ្លួននេះបើយោងតាមលំហូរ។

លក្ខណៈពិសេសចម្បងនៃធាតុបានដាក់ថេរគឺថាពួកគេអាចត្រួតលើគ្នាប្លុកផ្សេងទៀតនិងខ្សែអក្សរទំព័រ។ : fixed будет будто бы оставаться на месте, не исчезая с экрана. ពេលដែលរមូរប្លុកជាមួយតួនាទី: ថេរនឹងនៅតែសន្មត់នៅក្នុងកន្លែងដោយគ្មានការបាត់បង់ពីអេក្រង់។ នេះគឺជាការមានប្រយោជន៍ប្រសិនបើអ្នកត្រូវការរុករកឬដូចជា, ដែលអ្នកប្រើត្រូវតែមានការចូលដំណើរការទៅ។ ទីតាំងថេរគឺត្រូវបានប្រើផងដែរប្រសិនបើអ្នកចង់ដាក់ប៊ូតុងរមូររហ័សនៅក្នុងផ្នែកមួយចំនួននៃទំព័រ។

ទីតាំងជា CSS: ទាក់ទង

. ដោយប្រើអចលនទ្រព្យនេះត្រូវបានគេហៅថាទីតាំងដែលទាក់ទង។ : relative, тот останется на своем месте. ប្រសិនបើអ្នកកំណត់ទីតាំងទ្រព្យសម្បត្តិធាតុ: សាច់ញាតិគាត់នឹងនៅតែនៅក្នុងកន្លែងរបស់ខ្លួន។ right/left и top/bottom. នៅ glance ដំបូងគ្មានអ្វីកើតឡើងច្រើននោះទេប៉ុន្តែការផ្លាស់ប្តូរទាំងអស់ប្រសិនបើមានលក្ខណៈសម្បត្តិប្រើបន្ថែមទៀតឆ្វេង / ស្ដាំនិងកំពូល / បាត។ ពួកគេអាចត្រូវបានប្រើដើម្បីគ្រប់គ្រងចលនានៃការទាក់ទងសមាសភាគកាន់ទីតាំងរបស់វា។ останутся на своих положениях, не обращая внимания на освободившееся место . នៅកន្លែងដែលជាកន្លែងដែលប្លុកឬបន្ទាត់ត្រូវបានប្រើនោះនឹងជាចន្លោះទទេមួយ - ធាតុផ្សេងទៀតស្ថិតនៅក្នុងតំណែងរបស់ពួកគេដោយមិនយកចិត្តទុកដាក់ក្នុងការទំនេរនេះ។

នៅពេលដែលអ្នកផ្លាស់ទីសមាសភាគដែលមិនប៉ះពាល់ដល់ជំហររបស់ផ្នែកជុំវិញនៃទំព័រនេះ។ ពួកគេនឹងនៅតែនៅក្នុងកន្លែងទោះបីជាប្លុកបានដាក់ទំនាក់ទំនងអាចរារាំងពួកគេ។ នៅក្នុងខ្លួនវា, អចលនទ្រព្យគឺត្រូវបានប្រើកម្រ។ ជាធម្មតាវាត្រូវបានប្រើនៅក្នុងការភ្ជាប់ជាមួយតំណាងដូចខាងក្រោម។

ទីតាំងដាច់ខាត

មួយនៃការគួរឱ្យចាប់អារម្មណ៍បំផុតនិងត្រូវបានគេប្រើញឹកញាប់បំផុតជម្រើស។ ពេលប្រើលក្ខណៈសម្បត្តិទីតាំង absolute положение компонента страницы будет высчитываться относительно окна браузера. ជាមួយនឹងតម្លៃនៃទីតាំងដាច់ខាតនៃសមាសភាគទំព័រនឹងត្រូវបានគណនាទាក់ទងទៅបង្អួចកម្មវិធីរុករក។ элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. ធាតុផ្សេងទៀត (ដែលមិនមែនជាពិតជាបានដាក់) ដូចជា "ភ្លេច" អំពី "ប្អូនប្រុស" ដើម្បីអត្ថិភាពនៃទីតាំងនេះ: ដាច់ខាតហើយនឹងយកកន្លែងរបស់គាត់នៅក្នុងស្ទ្រីម។ : fixed, но есть и серьезные различия. វានឹងហាក់បីដូចថាអ្វីគ្រប់យ៉ាងគឺពិតជាដូចគ្នានៅក្នុងករណីនៃទីតាំង: កំណត់ប៉ុន្តែមានភាពខុសគ្នាសំខាន់។

top/right/bottom/left. ដំបូង, ទីតាំងនៃធាតុនេះអាចត្រូវបានគ្រប់គ្រងដោយសេរី - ត្រូវបានប្រើសម្រាប់ការកំពូលអចលនទ្រព្យនេះ / ស្តាំ / បាត / ឆ្វេង។ bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. ឧទាហរណ៍ប្រសិនបើអ្នកកំណត់តម្លៃនៃបាត: 100px, ប្លុក "ជំរុញចេញ" ពីផ្នែកខាងក្រោមនៃទំព័រ 100 ភិចសែលនេះ។ ទីពីរពេលដែលរមូរសមាសភាគ "ដាច់ខាត" នឹងនៅតែនៅក្នុងកន្លែងជំនួសឱ្យការមានការរុករកទៅកាន់ទំព័រ។

អន្តរកម្មគ្រឿងដាច់ខាតជាមួយធាតុឪពុកម្តាយ

អ្នកអាចសម្រេចបាននូវការត្រួតពិនិត្យសូម្បីតែបន្ថែមលើសមាសភាគជាក់លាក់ទីតាំងដាច់ខាត។ : fixed, relative или absolute. ដើម្បីធ្វើដូចនេះអ្នកត្រូវកំណត់ទីតាំងទ្រព្យសម្បត្តិមេរបស់ខ្លួន: ថេរទាក់ទងឬពេញលេញ។

សូមពិចារណាឧទាហរណ៍មួយ។ div с классом relative-div, внутри которого размещается div с классом absolute-div. តើអ្នកមាន div ជាមួយថ្នាក់មួយនៃការទាក់ទង-div, នៅខាងក្នុងដែលត្រូវបានដាក់ div មួយជាមួយនឹងថ្នាក់នៃការដាច់ខាត-div នេះ។ : absolute. យើងបានកំណត់ទីតាំងទ្រព្យសម្បត្តិអង្គភាពក្នុងផ្ទះ: ដាច់ខាត។ លោកភ្លាម "ដោះ" ពីចរន្តទឹកនិងជាកន្លែងណាមួយនៅលើកំពូលតារាងដោយសារតែឥឡូវនេះត្រូវបានគណនាទីតាំងរបស់វាទាក់ទងទៅនឹងបង្អួចកម្មវិធីរុករក។ relative-div свойство Position : relative и «блудный сын» возвращается на место. ឥឡូវនេះដែលបានផ្ដល់ឱ្យប្លុកជាមួយថ្នាក់ទាក់ទង-div ទីតាំងអចលនទ្រព្យ: ទាក់ទងនិង "កូនបង្ហិនទ្រព្យ" គឺត្រឡប់មកវិញនៅក្នុងកន្លែង។ ស្ទើរតែ។ នៅក្នុងការពិត, វាហាក់ដូចជានៅជ្រុងខាងឆ្វេងនៃធាតុមេ។

ហេតុអ្វីបានជាកើតមាននេះ? : absolute. កិច្ចព្រមព្រៀងក្នុងទីតាំងលក្ខណៈសម្បត្តិជាក់លាក់: ដាច់ខាត។ static, позиция начинает зависеть от родительского элемента. តាមលំនាំដើម, ទីតាំងរបស់វាអាស្រ័យលើកម្មវិធីរុករករបស់អ្នក, ប៉ុន្តែប្រសិនបើការ "មេ" ត្រូវបានដាក់ផងដែរថាជាអ្វីនោះទេប៉ុន្តែឋិតិវន្តទីតាំងចាប់ផ្តើមដើម្បីពឹងផ្អែកលើធាតុមេ។ នេះគឺជាការអស្ចារ្យណាស់ព្រោះអ្នកអាចដាក់សមាសភាគមិនមានចំនួនគ្រប់ទីកន្លែងធំ proschityvaya ទាក់ទងទៅបង្អួចកម្មវិធីរុករក។ ការចូលរួមទស្សនាជាញឹកញាប់ត្រូវបានគេប្រើដើម្បីដាក់រូបតំណាងប៊ូតុងនិងធាតុខ្នាតតូចផ្សេងទៀត។

ទីតាំងជា CSS កណ្តាល

មួយក្នុងចំណោមអ្នកចាប់ផ្តើមដំបូងការលំបាកចម្បងគឺដើម្បីដាក់ធាតុបញ្ឈរនិងផ្ដេក។ , сделать это проще простого. ឱ្យបានត្រឹមត្រូវដោយប្រើលក្ខណសម្បត្តិទីតាំងនេះធ្វើឱ្យវាមានភាពងាយស្រួល។ ទីតាំងជា CSS: ដាច់ខាតនៅកណ្តាលត្រូវបានកំណត់ដូចខាងក្រោម។ iv с классом absolute-div, который находится в «диве» с классом relative-div. ចូរនិយាយថាអ្នកមានថ្នាក់ឃ IV ដាច់ខាត-div ដែលជានៅក្នុង "តារា" ទៅថ្នាក់ទាក់ទង-div ។ «ឪពុកម្តាយ "និងសាច់ញាតិបានដាក់ទៅទទឹងរបស់វាស្មើទៅទទឹងនៃទំព័រទាំងមូល។ и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "កូនចៅ" មានទទឹងនិងកម្ពស់ 400 ភិចសែល, ទីតាំងដាច់ខាតមួយនិងមានទីតាំងស្ថិតតាមលំនាំដើមនៅជ្រុងខាងលើឆ្វេងនៃធាតុមេ។

top: 50 % и left: 50 %. អ្វីទាំងអស់ដែលអ្នកត្រូវធ្វើ - គឺដើម្បីកំណត់សមាសភាគកំពូលដាច់ខាត: 50% ហើយបានចាកចេញ: 50% ។ ជិតរួចរាល់ហើយ! сдвинулся с места и оказался почти в центре, но не совсем. Budge ដាច់ខាត-div និងស្ទើរតែនៅកណ្តាលប៉ុន្តែមិនណាស់។ មានន័យថា "ឪពុកម្តាយ" ពាក់ព័ន្ធដល់ទីបញ្ចប់របស់គាត់ហើយយើងត្រូវការដើម្បីទទួលបាននៅក្នុងកណ្តាលនៃប្លុកនេះបានបង្ហាញថាជាចំណុចកណ្តាលនៃ«ពូជ»។ margin-left и margin-right со значениями -200 px. ដើម្បីធ្វើដូចនេះអ្នកត្រូវសួរគាត់មួយរឹមឆ្វេងនិងខាងស្តាំរឹមតម្លៃ -200 ជាមួយភិចសែល។ ដូច្នេះយើងបានផ្លាស់ប្តូរប្លុកដាក់ទីតាំងពិតនៅលើពាក់កណ្តាលកម្ពស់និងទទឹងរបស់ខ្លួន។ ទាំងអស់វានៅក្នុងពាក់កណ្តាល!

សមាសភាគត្រួតស៊ីគ្នា

បញ្ហានេះអាចជាការលំបាកនៅ glance ដំបូង, "ការដាក់នៃ" ធាតុបានដាក់ទៅជា "ប្រទេសជិតខាង»របស់ពួកគេ។ : fixed будет перекрывать все, что расположено на странице. ឧទាហរណ៍ទីតាំងសមាសភាគ: ថេរនឹងបដិសេធទីតាំងស្ថិតនៅទាំងអស់នៅលើទំព័រនេះ។ z-index, однако помните, что оно работает только для позиционированных элементов. ដោះស្រាយស្ថានភាពនេះអ្នកអាចប្រើលក្ខណៈសម្បត្តិនៃ z-សន្ទស្សន៍ទេតែចាំថាវាធ្វើការតែសម្រាប់ធាតុវិជ្ជមាន។ ដូច្នោះហើយប្រសិនបើអ្នកចង់ដាក់ការហាមឃាត់នៅលើកំពូលនៃធាតុបានដាក់ថេរមួយអង្គភាពនេះនឹងមានទីតាំងដើម្បីកំណត់។ ឧទាហរណ៍សាច់ញាតិ។

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. វិធីល្អបំផុតដើម្បីធ្វើជាម្ចាស់ទីតាំង - ចាត់ទុកថាជាគំរូវិជ្ជមាន CSS, ដើម្បីដកពិសោធន៍និងសាកល្បងអ្វីដែលខុសគ្នា។ calc() – это даст возможность более гибко настраивать расположение. សូមព្យាយាមដើម្បីរៀនប្រើវានៅក្នុងការភ្ជាប់ជាមួយ Calc មុខងារនេះ () - នេះនឹងអនុញ្ញាតឱ្យមានភាពបត់បែនច្រើនជាងមុនដើម្បីលៃតម្រូវតំណែងនេះ។ ទោះជាយ៉ាងណា, ទ្រព្យចាំថាមិនមានបំណងសម្រាប់ការកសាងទំព័រ "សុទ្ធ" ទាំងមូល។ ជាមួយវា, អ្នកត្រូវការផ្លាស់ទីធាតុតូចឬអាចមានភាពងាយស្រួលផងដែរដើម្បីទទួលបានការយល់ច្រឡំ។