CSS Position: прыклады

. Вярстальшчыкі-пачаткоўцы нярэдка маюць цяжкасці з пазіцыянаваннем элементаў праз CSS. Position куда проще в освоении, чем кажется на первый взгляд. На самай справе ўласцівасць CSS Position куды прасцей у засваенні, чым здаецца на першы погляд. Авалодаўшы ім, вы атрымаеце магутны інструмент, з дапамогай якога можна размясціць ўсе элементы старонкі ў патрэбных месцах. добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются Але каб дамагчыся выніку, трэба ведаць аб усіх існуючых значэннях, паколькі прынцыпы іх дзеянні моцна адрозніваюцца

Спецыфіка пабудовы патоку дакумента

работает с потоком веб-страницы. Position CSS працуе з патокам вэб-старонкі. Як гэта зразумець? html- разметке. Па змаўчанні ўсе элементы старонкі размяшчаюцца ў тым парадку, у якім вы стварылі іх у html- разметцы. header расположен над тегом footer, то и на странице он будет отображаться выше. Калі тэг header размешчаны над тэгам footer, то і на старонцы ён будзе адлюстроўвацца вышэй. footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». І наадварот, калі вы чамусьці вырашыце размясціць footer ў html над «хедэры», «падвал» старонкі будзе адлюстроўвацца над «шапкай». Пры гэтым блокавыя элементы займаюць усю даступную для іх шырыню. Малыя, у сваю чаргу, размяшчаюцца ў адзін радок, пакуль не зоймуць яе ўсю, а потым пачнуць пераносіцца на новую. Гэты парадак называецца «патокам дакумента».

Для змены паводзін патоку выкарыстоўваецца ўласцівасць Position . у CSS. float, но его мы рассматривать не будем. Таксама ён можа мяняцца з-за ўласцівасці float, але яго мы разглядаць не будзем. З дапамогай пазіцыянавання можна прымусіць элемент «выпасці» з звычайнага патоку, пасля чаго ён пачне паводзіць сябе па-новаму. Як менавіта - залежыць ад выкарыстанага значэння ўласцівасці.

CSS Position: static

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. Position: static, або статычнае пазіцыянаванне, з'яўляецца значэннем па змаўчанні для ўсіх блокаў html, якія вы стварылі. У звычайных умовах вам не прыйдзецца мець з ім справу. static. Калі для якога-небудзь блока або радкі ня зададзена наогул ніякага пазіцыянавання, значыць, яно мае значэнне static. На старонцы такі кампанент адлюстроўваецца ў адпаведнасці з патокам. right/left или top/bottom, никакого эффекта не будет. Калі паказаць яму ўласцівасці right / left або top / bottom, ніякага эфекту не будзе.

CSS Position: fixed

оказывается вне нормального потока документа. Пры выкарыстанні гэтага ўласцівасці элемент аказваецца па-за нармальнага патоку дакумента. относительно окна браузера, независимо от того, как размещаются прочие компоненты. Цяпер яго становішча вылічаецца адносна вокны браўзэра, незалежна ад таго, як размяшчаюцца іншыя кампаненты. : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. Іншымі словамі, блок з Position: fixed адправіцца ў верхнюю частку старонкі, прыпаўзуць да краю акна браўзэра, а іншыя элементы зоймуць яго месца ў адпаведнасці з патокам.

Галоўная асаблівасць фіксавана пазіцыянаваных элементаў у тым, што яны могуць перакрываць іншыя блокі і радкі старонкі. : fixed будет будто бы оставаться на месте, не исчезая с экрана. Пры скролінг блок з Position: fixed будзе быццам бы заставацца на месцы, не знікаючы з экрана. Гэта карысна, калі вам трэба зрабіць навігацыю ці аналагічны элемент, да якога карыстальнік заўсёды павінен мець доступ. Фіксаванае пазіцыянаванне таксама прымяняецца, калі трэба размясціць кнопку хуткага скролінг ў пэўную частку старонкі.

CSS Position: relative

. Выкарыстанне гэтага ўласцівасці называецца Адноснае. : relative, тот останется на своем месте. Калі задаць элементу ўласцівасць Position: relative, той застанецца на сваім месцы. right/left и top/bottom. На першы погляд, нічога асаблівага не адбудзецца, але ўсё змяніцца, калі дадаткова выкарыстоўваць ўласцівасці right / left і top / bottom. З іх дапамогай можна кіраваць перамяшчэннем кампанента адносна яго месцазнаходжання. останутся на своих положениях, не обращая внимания на освободившееся место . На тым месцы, дзе блок або радок былі раней, апынецца пустое прастору - іншыя элементы застануцца на сваіх палажэннях, не звяртаючы ўвагі на якое вызвалілася месца.

Пры перамяшчэнні кампанент ніяк не ўплывае на становішча навакольных частак старонкі. Яны так і застануцца на сваіх месцах, хоць адносна пазіцыянаваны блок можа іх перакрыць. Само па сабе ўласцівасць выкарыстоўваецца рэдка. Звычайна яго ўжываюць у спалучэнні з наступным варыянтам.

абсалютная пазіцыянаванне

Адзін з самых цікавых і найбольш часта выкарыстоўваюцца варыянтаў. Пры выкарыстанні ўласцівасці Position absolute положение компонента страницы будет высчитываться относительно окна браузера. са значэннем absolute становішча кампанента старонкі будзе вылічвацца адносна вокны браўзэра. элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. Іншыя элементы (якія не з'яўляюцца абсалютна пазіцыянаваць) нібы «забудуцца» пра існаванне «субрата» з Position: absolute і зоймуць яго месца ў патоку. : fixed, но есть и серьезные различия. Здавалася б, усё сапраўды гэтак жа, як у выпадку з Position: fixed, але ёсць і сур'ёзныя адрозненні.

top/right/bottom/left. Па-першае, становішчам элемента можна свабодна кіраваць - для гэтага выкарыстоўваюцца ўласцівасці top / right / bottom / left. bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Напрыклад, калі вы задасце значэнне bottom: 100px, блок «адштурхне» ад ніжняй часты старонкі на 100 пікселяў. Па-другое, пры скролінг «абсалютны» кампанент застанецца на сваім месцы, замест таго, каб перамяшчацца са старонкай.

Узаемадзеянне абсалютных блокаў з бацькоўскімі элементамі

Можна дамагчыся яшчэ больш дакладнага кантролю над абсалютна пазіцыянаваць кампанентам. : fixed, relative или absolute. Для гэтага трэба задаць яго бацьку ўласцівасць Position: fixed, relative або absolute.

Разгледзім прыклад. div с классом relative-div, внутри которого размещается div с классом absolute-div. У вас ёсць div з класам relative-div, усярэдзіне якога размяшчаецца div з класам absolute-div. : absolute. Задаем ўнутранаму блоку ўласцівасць Position: absolute. Той адразу ж «вылятае» з патоку і аказваецца, аднекуль зверху, бо зараз яго размяшчэнне пралічваецца адносна вокны браўзэра. relative-div свойство Position : relative и «блудный сын» возвращается на место. Цяпер задаем блоку з класам relative-div ўласцівасць Position: relative і «блудны сын" вяртаецца на месца. Амаль. На самай справе, ён аказваецца ў верхнім левым куце бацькоўскага элемента.

Чаму так адбываецца? : absolute. Справа ў спецыфіцы ўласцівасці Position: absolute. static, позиция начинает зависеть от родительского элемента. Па змаўчанні яго становішча залежыць ад акна браўзэра, але калі «бацька» таксама пазіцыянаваны як-то акрамя static, пазіцыя пачынае залежаць ад бацькоўскага элемента. Гэта вельмі зручна, таму што можна размясціць кампанент у любым месцы, не пралічваючы вялізныя лічбы адносна вокны браўзэра. Прыём часта выкарыстоўваецца для размяшчэння абразкоў, кнопак і іншых невялікіх элементаў.

Position CSS па цэнтры

Адна з галоўных цяжкасцяў пачаткоўцаў складаецца ў тым, каб Цэнтраваць элемент вертыкальна і гарызантальна. , сделать это проще простого. Пісьменна выкарыстоўваючы ўласцівасць Position, зрабіць гэта прасцей простага. CSS Position: absolute па цэнтры усталёўваецца наступным чынам. iv с классом absolute-div, который находится в «диве» с классом relative-div. Дапусцім, у вас ёсць d iv з класам absolute-div, які знаходзіцца ў «дзіве» з класам relative-div. «Бацька» пазіцыянаваны адносна і яго шырыня роўная шырыні ўсёй старонкі. и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. «Нашчадак» мае шырыню і вышыню 400 px, абсалютная пазіцыянаванне і па змаўчанні размяшчаецца ў верхнім левым куце бацькоўскага элемента.

top: 50 % и left: 50 %. Усё, што трэба зрабіць - гэта задаць абсалютнай кампаненту top: 50% і left: 50%. Амаль гатова! сдвинулся с места и оказался почти в центре, но не совсем. Absolute-div ссунуўся з месца і апынуўся амаль у цэнтры, але не зусім. Сярэдзіны "бацькі" тычацца яго краю, а нам трэба, каб у цэнтры блока апынуўся цэнтр «нашчадка». margin-left и margin-right со значениями -200 px. Для гэтага трэба задаць яму margin-left і margin-right са значэннямі -200 px. Тым самым мы зрушылі абсалютна пазіцыянаваны блок на палову яго вышыні і шырыні. Усе, ён у цэнтры!

перакрываць кампанентаў

Праблемай можа стаць няпростае, на першы погляд, «накладанне» пазіцыянаваных элементаў на іх «суседзяў». : fixed будет перекрывать все, что расположено на странице. Напрыклад, кампанент з Position: fixed будзе перакрываць усе, што размешчана на старонцы. z-index, однако помните, что оно работает только для позиционированных элементов. Выправіць сітуацыю можна з дапамогай ўласцівасці z-index, аднак памятаеце, што яно працуе толькі для пазіцыянаваных элементаў. Адпаведна, калі вы хочаце размяшчаць блок-над фіксавана пазіцыю элемента, гэтаму блоку прыйдзецца таксама задаць пазіцыянаванне. Напрыклад, адноснае.

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. Л учший спосаб асвоіць пазіцыянаванне - разглядаць прыклады Position CSS, эксперыментаваць і спрабаваць нешта сваё. calc() – это даст возможность более гибко настраивать расположение. Паспрабуйце навучыцца выкарыстоўваць яго ў спалучэнні з функцыяй calc () - гэта дасць магчымасць больш гнутка наладжваць размяшчэнне. Аднак памятайце, што гэта ўласцівасць не прызначана для выбудоўвання ўсёй «сеткі» старонкі. З яго дапамогай трэба перамяшчаць адносна невялікія элементы, інакш можна занадта лёгка заблытацца.