РасполоТСниС элСмСнтов Π½Π° страницС html

РасполоТСниС элСмСнтов Π½Π° страницС html

Бвойство position

Бвойство position позволяСт ΡΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ элСмСнт со своСго ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ мСста. ЦСль этой Π³Π»Π°Π²Ρ‹ – Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π½ΠΎ ΠΈ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ряд частых Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠΉ ΠΈ Π³Ρ€Π°Π±Π»Π΅ΠΉ.

position: static

БтатичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ производится ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π² Ρ‚ΠΎΠΌ случаС, Ссли свойство position Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ.

Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ явно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· CSS-свойство:

Вакая запись встрСчаСтся Ρ€Π΅Π΄ΠΊΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для пСрСопрСдСлСния Π΄Ρ€ΡƒΠ³ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ position .

Π—Π΄Π΅ΡΡŒ ΠΈ Π΄Π°Π»Π΅Π΅, для ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚:

Π’ этом Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ сСйчас всС элСмСнты ΠΎΡ‚ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ статичСски, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½ΠΈΠΊΠ°ΠΊ.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с position: static Π΅Ρ‰Ρ‘ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ.

position: relative

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ сдвигаСт элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ полоТСния.

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ элСмСнту CSS-свойство position: relative ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ left/right/top/bottom .

Π­Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ сдвинСт элСмСнт Π½Π° 10 пиксСлСй ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ:

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹

Для сдвига ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹:

  • top – сдвиг ΠΎΡ‚ Β«ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉΒ» Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹
  • bottom – сдвиг ΠΎΡ‚ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹
  • left – сдвиг слСва
  • right – сдвиг справа

НС Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ top ΠΈ bottom , left ΠΈ right . НуТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΈΠ· ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ°Ρ€Ρ‹.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния. НапримСр, left: 10% сдвинСт элСмСнт Π½Π° 10% Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π²ΠΏΡ€Π°Π²ΠΎ, Π° left: -10% – Π²Π»Π΅Π²ΠΎ. ΠŸΡ€ΠΈ этом Ρ‡Π°ΡΡ‚ΡŒ элСмСнта ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ ΠΎΠΊΠ½Π°:

Бвойства left/top Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ для position:static . Если ΠΈΡ… всС ΠΆΠ΅ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΡ… ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚. Π­Ρ‚ΠΈ свойства ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ элСмСнтами.

position: absolute

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π΅Π»Π°Π΅Ρ‚ Π΄Π²Π΅ Π²Π΅Ρ‰ΠΈ:

  1. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ исчСзаСт с Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΈ позиционируСтся Π·Π°Π½ΠΎΠ²ΠΎ. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты, Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ этого элСмСнта Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±Ρ‹Π»ΠΎ.
  2. ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ top/bottom/left/right для Π½ΠΎΠ²ΠΎΠ³ΠΎ мСстополоТСния ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ блиТайшСго ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ родитСля, Ρ‚.Π΅. родитСля с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚ static . Если Ρ‚Π°ΠΊΠΎΠ³ΠΎ родитСля Π½Π΅Ρ‚ – Ρ‚ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.
  • Π¨ΠΈΡ€ΠΈΠ½Π° элСмСнта с position: absolute устанавливаСтся ΠΏΠΎ содСрТимому. Π”Π΅Ρ‚Π°Π»ΠΈ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° вычислСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ описаны Π² стандартС.
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ display:block , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ display (см. Relationships between β€ždisplayβ€œ, β€žpositionβ€œ, and β€žfloatβ€œ).

НапримСр, ΠΎΡ‚ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² ΠΏΡ€Π°Π²ΠΎΠΌ-Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

Π’Π°ΠΆΠ½ΠΎΠ΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ relative : Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ элСмСнт удаляСтся со своСго ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ мСста, Ρ‚ΠΎ элСмСнты ΠΏΠΎΠ΄ Π½ΠΈΠΌ ΡΠ΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ, занимая освободившССся пространство. Π­Ρ‚ΠΎ Π²ΠΈΠ΄Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅: строки ΠΈΠ΄ΡƒΡ‚ ΠΎΠ΄Π½Π° Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ position:absolute Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ° устанавливаСтся ΠΏΠΎ содСрТимому, Ρ‚ΠΎ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«ΡΡŠΡ‘ΠΆΠΈΠ»ΡΡΒ» Π΄ΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Π² ΡƒΠ³Π»Ρƒ.

Иногда Π±Ρ‹Π²Π°Π΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ элСмСнту position Π½Π° absolute , Π½ΠΎ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнты Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅ сдвигались. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, это Π΄Π΅Π»Π°ΡŽΡ‚, мСняя сосСдСй – Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ margin/padding ΠΈΠ»ΠΈ Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ пустой элСмСнт с Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ.

Π’ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ элСмСнтС ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

РасполоТСниС div ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ тонкости позиционирования

Если Ρ€Π°Π·Ρ€Π΅Π·Π°Ρ‚ΡŒ любой сайт, созданный Π½Π° основС html , Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ прСдстанСт нСкая послойная структура. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ своим внСшним Π²ΠΈΠ΄ΠΎΠΌ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ схоТа со слоСным ΠΏΠΈΡ€ΠΎΠ³ΠΎΠΌ. Если Π²Π°ΠΌ Ρ‚Π°ΠΊ каТСтся, Ρ‚ΠΎ вСроятнСС всСго Π²Ρ‹ Π΄Π°Π²Π½ΠΎ Π½Π΅ Π΅Π»ΠΈ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ сначала ΡƒΡ‚ΠΎΠ»ΠΈΡ‚Π΅ свой Π³ΠΎΠ»ΠΎΠ΄, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ ΠΏΠΎΠ²Π΅Π΄Π°Π΅ΠΌ Π²Π°ΠΌ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ слой div ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ вашСго сайта:

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° вСрстки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π°

БущСствуСт Π΄Π²Π° основных Ρ‚ΠΈΠΏΠ° построСния структуры сайта:

  • Вабличная;
  • Блочная.

Вабличная вСрстка Π±Ρ‹Π»Π° Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΉ Π΅Ρ‰Π΅ Π½Π° Π·Π°Ρ€Π΅ зароТдСния ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. К Π΅Π΅ прСимущСствам ΠΌΠΎΠΆΠ½ΠΎ отнСсти Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ позиционирования. Но, Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ½Π° ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ явными нСдостатками. Π“Π»Π°Π²Π½Ρ‹ΠΌΠΈ ΠΈΠ· Π½ΠΈΡ… являСтся ΠΎΠ±ΡŠΠ΅ΠΌΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° ΠΈ низкая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

ΠšΡ€ΠΎΠΌΠ΅ высокой скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠ΅ построСниС сайта позволяСт Π² нСсколько Ρ€Π°Π· ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ объСм ΠΊΠΎΠ΄Π° html . Π’ Ρ‚ΠΎΠΌ числС ΠΈ Π·Π° счСт использования классов CSS .

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΡƒΡŽ вСрстку слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для структуризации отобраТСния Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° страницС. ΠšΠ»Π°ΡΡΠΈΡ‡Π΅ΡΠΊΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Π΅Π΅ примСнСния являСтся ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†.

Π‘Π»ΠΎΡ‡Π½ΠΎΠ΅ построСниС Π½Π° основС Ρ‚Π΅Π³ΠΎΠ²

Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ послойным, Π° сами Π±Π»ΠΎΠΊΠΈ слоями. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ использовании ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойств ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ слоям Π² Photoshop.

БрСдства позиционирования

Π’ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ слоСв Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ срСдств каскадных Ρ‚Π°Π±Π»ΠΈΡ† стилСй. ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌ свойством CSS, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠΌ Π·Π° располоТСниС

, являСтся float.
Бинтаксис свойства:
float: left | right | none | inherit ,
Π“Π΄Π΅:
  • left – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ элСмСнта ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ экрана. ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ элСмСнтами происходит справа;
  • right – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ справа, ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ элСмСнтами – слСва;
  • none – ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π½Π΅ допускаСтся;
  • inherit – наслСдованиС значСния Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Рассмотрим ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ позиционирования Π±Π»ΠΎΠΊΠΎΠ² div с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого свойства:

БрСдства позиционирования

Π’Π΅ΠΏΠ΅Ρ€ΡŒ постараСмся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΆΠ΅ свойства Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ div ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ страницы. Но, ΠΊ соТалСнию, Ρƒ float Π½Π΅Ρ‚ значСния center . А ΠΏΡ€ΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ Π½ΠΎΠ²ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ значСния выравнивания Π²ΠΏΡ€Π°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ ΠΎΠ½ сдвигаСтся Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΡƒΡŽ сторону. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ остаСтся лишь всСм Ρ‚Ρ€Π΅ΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ float: left :

БрСдства позиционирования - 2

Но ΠΈ это Π½Π΅ являСтся ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. ΠŸΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° всС слои Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄ΠΈΠ½ ряд ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π° ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² – ΠΏΡ€ΠΈΠ»ΠΈΠΏΠ°ΡŽΡ‚ ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΎΠΊΠ½Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π½ΡƒΠΆΠ΅Π½ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½Ρ‹ΠΉ способ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ div ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ слоСв

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ слой-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ размСстим ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты. Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ смСщСния Π±Π»ΠΎΠΊΠΎΠ² Π΄Ρ€ΡƒΠ³ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³Π° ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π°. Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° посрСдинС осущСствляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ задания свойствам margin Π½ΡƒΠ»Π΅Π²ΠΎΠ³ΠΎ значСния отступам ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края ΠΈ auto ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ( margin: 0 auto ):

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ слоСв

Π­Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ²Π°Ρ‚ΡŒ div ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. А Ссли Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания Π±Π»ΠΎΠΊΠΎΠ². Для этого Π½ΡƒΠΆΠ½ΠΎ лишь ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄Π»ΠΈΠ½Ρƒ слоя-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ( ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π΅Π³ΠΎ ). Π’ΠΎ Π΅ΡΡ‚ΡŒ послС рСдактирования Π΅Π³ΠΎ css класс Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

ПослС измСнСния всС Π±Π»ΠΎΠΊΠΈ выстроятся строго Π² ряд посрСдинС. И ΠΈΡ… ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ измСнится ΠΏΡ€ΠΈ Π»ΡŽΠ±Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит Ρ‚Π°ΠΊΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ div ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ:

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ слоСв - 2

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ для цСнтрирования слоСв Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΌΡ‹ использовали ряд Π½ΠΎΠ²Ρ‹Ρ… свойств css :

ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС свойств css ΠΈ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ использовали Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ для цСнтрирования div Π²Π½ΡƒΡ‚Ρ€ΠΈ div :

  • display: inline-block – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт Π² строку ΠΈ обСспСчиваСт Π΅Π³ΠΎ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтом;
  • vertical-align: middle – Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ элСмСнт посрСдинС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ;
  • margin-left – устанавливаСт отступ слСва.

Как ΠΈΠ· слоя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылку

Как Π½ΠΈ странно Π·Π²ΡƒΡ‡ΠΈΡ‚, Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Иногда div Π±Π»ΠΎΠΊ ΠΊΠ°ΠΊ ссылка ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ вСрсткС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² мСню. Рассмотрим практичСский ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ слоя-ссылки:

Как ΠΈΠ· слоя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылку

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ строки display: block ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ ссылкС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта. А Ρ‡Ρ‚ΠΎΠ±Ρ‹ вся высота Π±Π»ΠΎΠΊΠ° div стала ссылкой, установили height : 100%.

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов

Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ большС возмоТностСй для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π° интСрфСйса, Ρ‡Π΅ΠΌ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ°Ρ табличная вСрстка. Часто Π±Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта являСтся ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΡ‹ΠΌ. Но Π·Π° Ρ‚Π°ΠΊΠΎΠΉ эксклюзив ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π΅Ρ…Π²Π°Ρ‚ΠΊΠΎΠΉ свободного мСста.

ОсобСнно это касаСтся Π³Π»Π°Π²Π½ΠΎΠΉ страницы, ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ размСщСния Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ являСтся самой высокой. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΈ появляСтся ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΡƒΠ΄Π° Π±Ρ‹ Β« Π²ΠΏΠΈΡ…Π½ΡƒΡ‚ΡŒ Β» Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΉ Π±Π°Π½Π½Π΅Ρ€. И Ρ‚ΡƒΡ‚ ΡƒΠΆ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ div ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ страницы Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΎΡ‚Π΄Π΅Π»Π°Π΅ΡˆΡŒΡΡ!

Π‘ΠΎΠ»Π΅Π΅ Ρ€Π°Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ являСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π±Π»ΠΎΠΊ ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ. Π’ΠΎΡ‚ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ:

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ располоТСниС div Π±Π»ΠΎΠΊΠΎΠ² Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ мСняСтся. Π—Π΄Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ°Ρ функция JavaScript , ΠΌΠ΅Π½ΡΡŽΡ‰Π°Ρ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства css display послС наТатия Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ( событиС onclick ).

Бинтаксис display :
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Π΄Π°Π½Π½ΠΎΠ΅ свойство ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ мноТСство Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ являСтся ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для позиционирования элСмСнтов. Π’ ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ( inline-block ) ΠΌΡ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ div Π²Π½ΡƒΡ‚Ρ€ΠΈ div ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Для скрытия ΠΈ ΠΏΠΎΠΊΠ°Π·Π° слоя ΠΌΡ‹ использовали Π΄Π²Π° значСния свойства display :

  • none – Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ удаляСт Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт со страницы;
  • block – ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ элСмСнт ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ срСдством css , ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΌ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ элСмСнт, являСтся свойство visibility . Но ΠΎΠ½ΠΎ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ большим нСдостатком.

ΠœΡ‹ с Π²Π°ΠΌΠΈ рассмотрСли всС основныС слои настоящСго сайта. НадССмся, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания позволят Π²Π°ΠΌ Β« ΠΈΡΠΏΠ΅Ρ‡ΡŒ Β» ΠΏΠΎ-настоящСму вкусный рСсурс.

РасполоТСниС элСмСнтов Π½Π° страницС html

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS каТСтся довольно простым. Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ ΠΈ Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ. Однако всё Π½Π΅ Ρ‚Π°ΠΊ просто, ΠΊΠ°ΠΊ каТСтся Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд. Π•ΡΡ‚ΡŒ нСсколько ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ². Π’Ρ‹ смоТСтС ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ ΠΈΠ· позиционирования Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС ΠΏΠΎΠ»ΡŒΠ·Ρ‹, Ссли Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘Ρ‚Π΅ΡΡŒ ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Box-модСль Π² CSS ΠΈ Ρ‚ΠΈΠΏΡ‹ позиционирования.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ, ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ Π²Π°ΠΌ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ Box-модСль Π² CSS. Π’ Π΄Π²ΡƒΡ… словах: ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π² html — это ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΈ Π²Π½Π΅ΡˆΠ½ΠΈΡ… отступов, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ, которая раздСляСт ΠΈΡ….

Π‘Ρ…Π΅ΠΌΡ‹ позиционирования ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ этот ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° элСмСнты Π²ΠΎΠΊΡ€ΡƒΠ³ сСбя.

Бвойство position Π² CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

  • absolute
  • relative
  • fixed
  • static
  • inherit

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ static ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π›ΡŽΠ±ΠΎΠΉ элСмСнт с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ static находится Π² ΠΎΠ±Ρ‰Π΅ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ΠŸΡ€Π°Π²ΠΈΠ»Π° для Π΅Π³ΠΎ размСщСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Box-модСлью. Для Ρ‚Π°ΠΊΠΈΡ… элСмСнтов, свойства top, right, bottom ΠΈ left Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти свойства, ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнта Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ (absolute), ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ (relative) ΠΈΠ»ΠΈ фиксированным (fixed).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ inherit, ΠΊΠ°ΠΊ ΠΈ Π²ΠΎ всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… свойствах CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнт использовал Ρ‚ΠΎΠΆΠ΅ самоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт.

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ удаляСт элСмСнт ΠΈΠ· ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π§Ρ‚ΠΎ касаСтся элСмСнтов Π²ΠΎΠΊΡ€ΡƒΠ³, Ρ‚ΠΎ Π² этом случаС ΠΎΠ½ΠΈ просто ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ искомый, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ Π΅ΠΌΡƒ установлСно свойство display: none;. Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎΠ±Ρ‹ пространство для Ρ‚Π°ΠΊΠΎΠ³ΠΎ элСмСнта заполнялось Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами, Ρ‚ΠΎ Π²Π°ΠΌ Π½Π°Π΄ΠΎ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.

Π’Ρ‹ устанавливаСтС располоТСниС элСмСнта с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства top, left, right ΠΈ bottom. Π’Π°ΠΌ достаточно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄Π²Π° ΠΈΠ· Π½ΠΈΡ…, top ΠΈΠ»ΠΈ bottom ΠΈ left ΠΈΠ»ΠΈ right. Если Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ свойства Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Ρ‚ΠΎ устанавливаСтся 0 для ΠΏΠ°Ρ€Ρ‹ top-left.

ΠšΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π² Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ — это ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ являСтся Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ отсчёта. Если свойству top ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 20px, Ρ‚ΠΎ ΠΎΡ‚ΠΊΡƒΠ΄Π° ΠΈΡ… Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ.

ΠžΡ‚Π²Π΅Ρ‚ прост: Ρ‚Π°ΠΊΠΈΠ΅ элСмСнты ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ блиТайшСго Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ static. Если Ρ‚Π°ΠΊΠΎΠ³ΠΎ элСмСнта Π½Π΅Ρ‚, Ρ‚ΠΎ элСмСнт позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ основного Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈ установки Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования, CSS сообщаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ посмотрСл Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт ΠΈ, Ссли Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ статичСскоС, Ρ‚ΠΎ Π½Π°Π΄ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π³ΠΎ.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π° основС своСй ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ сдвиг ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ располоТСния. Π­Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ элСмСнту внСшниС отступы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства margin. Однако Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ сущСствСнноС Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅: сосСдниС элСмСнты, Π² случаС использования позиционирования, Π½Π΅ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ этот сдвиг.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС это Ρ‚Π°ΠΊ: Π½Π΅ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ сдвигаСтся, Π° Π½Π° Π΅Π³ΠΎ мСстС остаётся «ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊ», всС элСмСнты Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ этого «ΠΏΡ€ΠΈΠ·Ρ€Π°ΠΊΠ°». Π­Ρ‚ΠΎ позволяСт Π½Π°ΠΌ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ элСмСнты Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, элСмСнты с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, взяты ΠΈΠ· Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° элСмСнта, Π½ΠΎ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ влияниС Π½Π° располоТСниС сосСдних элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Π΄ΡƒΡ‚ сСбя Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ исходный элСмСнт всё Π΅Ρ‰Ρ‘ находится Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π’ этом случаС ΠΌΡ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ вопрос ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‡Π΅Π³ΠΎ здСсь позиционируСтся элСмСнт. ΠžΡ‚Π²Π΅Ρ‚ всСгда: Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ΠžΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ внСшний отступ ΠΊ элСмСнту, Π½ΠΎ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя Π½Π΅ повлияли Π½Π° сосСдниС элСмСнты.

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ дСйствуСт ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌΡƒ, с нСбольшими различиями.

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, элСмСнт с фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ всСгда располагаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ элСмСнты ΠΏΡ€ΠΈ этом ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ.

Π’Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ исходит ΠΈΠ· Π΅Π³ΠΎ названия. ЀиксированныС элСмСнты зафиксированы Π½Π° страницС. Они Π½Π΅ ΡΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π΅Ρ‘ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠΈ.

Z-index

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° сайта Π΄Π²ΡƒΠΌΠ΅Ρ€Π½Π°. Π£ Π½Π΅Ρ‘ Π΅ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота. Z-index добавляСт Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅, Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ.

Π§Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ этот индСкс Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π½Π° страницС располоТСн элСмСнт. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅Π³ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄ΠΈΠ½ элСмСнт располагался ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ — ноль. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Ρ‚Π°ΠΊΠΆΠ΅ допустимы.

На самом Π΄Π΅Π»Π΅, z-index Π³ΠΎΡ€Π°Π·Π΄ΠΎ слоТнСС, Ρ‡Π΅ΠΌ я Π΅Π³ΠΎ здСсь ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽ, Π½ΠΎ это Ρ‚Π΅ΠΌΠ° для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ. БСйчас, Π³Π»Π°Π²Π½ΠΎΠ΅ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ саму идСю Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅Π³ΠΎ измСрСния ΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это свойство.

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ позиционирования.

Рассмотрим нСсколько ΠΎΠ±Ρ‰ΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, связанных с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ нСсколько слов ΠΎΠ± ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ.

    Π’Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство position ΠΈ свойство float для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ элСмСнта. Оба эти свойства Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ элСмСнта, поэтому ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π±ΡƒΠ΄Π΅Ρ‚ свойство, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ послСдним.

ΠžΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ position:relative ΠΈ float.

Когда ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ указываСтся position:absolute ΠΈ float, Ρ‚ΠΎ примСняСтся Π½Π΅ послСднСС ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ свойство. Π’ этом случаС, нСзависимо ΠΎΡ‚ порядка слСдования этих стилСй, примСняСтся position:absolute, Π° ΠΈΡ‚ΠΎΠ³ΠΎΠ²ΠΎΠ΅ (ΠΈΠ»ΠΈ вычислСнноС) Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства float устанавливаСтся Π² none, нСзависимо ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ значСния, Ρ‚.Π΅. игнорируСтся.

Π’ IE6 ΠΈ IE7 Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄Π½Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с z-index-ΠΎΠΌ. IE смотрит Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт для опрСдСлСния Π² ΠΊΠ°ΠΊΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΠ΅ элСмСнтов находится Π²Π΅Ρ€ΡˆΠΈΠ½Π° стСка, ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ контСкст. НапримСр:

ΠœΡ‹ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π²Ρ‹ΡˆΠ΅, Ρ‡Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π΅Π³ΠΎ z-index большС. Однако IE6 ΠΈ IE7 Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ Π²Ρ‹ΡˆΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ находятся Π² Ρ€Π°Π·Π½Ρ‹Ρ… стСках Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Один стСк для div, Π²Ρ‚ΠΎΡ€ΠΎΠΉ для img, Π° Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ z-index Π²Ρ‹ΡˆΠ΅, Ρ‡Π΅ΠΌ Ρƒ div-Π°.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Бвойство position устанавливаСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ располоТСния элСмСнта Π² соотвСтствии с ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· схСм позиционирования. ДоступныС значСния свойства: absolute, relative, fixed, static (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) ΠΈ inherit.

Π‘Ρ…Π΅ΠΌΡ‹ позиционирования ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»Π° размСщСния элСмСнта Π½Π° web-страницС, Π° Ρ‚Π°ΠΊΠΆΠ΅ влияниС Π½Π° располоТСниС сосСдних элСмСнтов.

Бвойство z-index ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для элСмСнтов с установлСнным свойством position. Оно добавляСт Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ Π½Π° страницС ΠΈ устанавливаСт порядок стСка элСмСнтов.

Бвойство position каТСтся Π»Ρ‘Π³ΠΊΠΈΠΌ для восприятия, Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°Ρ‡Π΅, Ρ‡Π΅ΠΌ каТСтся с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда. Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π΄ΡƒΠΌΠ°ΡŽΡ‚ Ρ‡Ρ‚ΠΎ ΠΈΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, хотя скорСС всСго Π½Π°Π΄ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅. Π’ основном ΠΏΡ€ΠΈ вёрсткС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ свойство float, Π° свойство position Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ «Π²Ρ‹Ρ€Π²Π°Ρ‚ΡŒ» ΠΈΠ· ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π˜Π·ΡƒΡ‡Π°Π΅ΠΌ CSS-ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π° 10 шагов

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ β€” ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… понятий Π² Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС. Π Π°Π·ΠΎΠ±Ρ€Π°Π²ΡˆΠΈΡΡŒ с Π½ΠΈΠΌ, Π²Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ станСт понятно, Π° вСрстка ΠΈΠ· ΡˆΠ°ΠΌΠ°Π½ΡΡ‚Π²Π° прСвратится Π² осмыслСнный процСсс. Π˜Ρ‚Π°ΠΊ, Ρ€Π΅Ρ‡ΡŒ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ ΠΎ CSS-свойствах position ΠΈ float.

1. position: static

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ всС элСмСнты Π½Π° страницС ΠΈΠΌΠ΅ΡŽΡ‚ статичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (position: static), это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ элСмСнт Π½Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½, ΠΈ появляСтся Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Π½Π° своСм ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ мСстС, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ порядкС, ΠΊΠ°ΠΊ ΠΈ Π² html-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅.

НСт нСобходимости ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ это свойство ΠΊΠ°ΠΊΠΎΠΌΡƒ-Π»ΠΈΠ±ΠΎ элСмСнту, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΌ Π½Π΅ трСбуСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π½Π΅Π΅ установлСнноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½ΠΎΠ΅.

2. position:relative

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (position: relative) позволяСт Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойства: top, bottom, left ΠΈ right, для располоТСния элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Π±Ρ‹ ΠΎΠ½ появился ΠΏΡ€ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ пСрСмСстим #content Π½Π° 20 пиксСлСй Π²Π½ΠΈΠ·, ΠΈ Π½Π° 40 пиксСлСй Π²Π»Π΅Π²ΠΎ:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° Ρ‚ΠΎΠΌ мСстС, Π³Π΄Π΅ Π±Ρ‹ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Π» находится наш Π±Π»ΠΎΠΊ #content, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π»ΠΎΡΡŒ пустоС пространство. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ #content, Π±Π»ΠΎΠΊ #footer Π½Π΅ пСрСмСстился Π½ΠΈΠΆΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ, #content ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ своС мСсто Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡƒΠ»ΠΈ Π΅Π³ΠΎ.

На Π΄Π°Π½Π½ΠΎΠΌ этапС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π½ΠΎ, Π½Π΅ ΡΠΏΠ΅ΡˆΠΈΡ‚Π΅ с Π²Ρ‹Π²ΠΎΠ΄Π°ΠΌΠΈ, Π΄Π°Π»Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅, Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, для Ρ‡Π΅Π³ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

3. position: absolute

ΠŸΡ€ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ (position: absolute), элСмСнт удаляСтся ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΈ появляСтся Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Π΅ΠΌΡƒ скаТСтС.

Π”Π°Π²Π°ΠΉΡ‚Π΅, для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, пСрСмСстим Π±Π»ΠΎΠΊ #div-1a Π² Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ, ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» страницы:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° этот Ρ€Π°Π·, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±Π»ΠΎΠΊ #div-1a Π±Ρ‹Π» ΡƒΠ΄Π°Π»Π΅Π½ ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ элСмСнты Π½Π° страницС Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡŒ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ: #div-1b, #div-1c ΠΈ #footer ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΈΡΡŒ Π²Ρ‹ΡˆΠ΅, Π½Π° мСсто ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. А сам Π±Π»ΠΎΠΊ #div-1a, располоТился Ρ‚ΠΎΡ‡Π½ΠΎ Π² ΠΏΡ€Π°Π²ΠΎΠΌ, Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΡƒΠ³Π»Ρƒ страницы.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любой элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ страницы, ΠΎΠ΄Π½Π°ΠΊΠΎ этого Π½Π΅ достаточно. На самом Π΄Π΅Π»Π΅, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ #div-1a ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° #content. И Π½Π° этом этапС, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ вновь вступаСт Π² ΠΈΠ³Ρ€Ρƒ.

4. position: fixed

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (position: fixed), являСтся ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования. ЕдинствСнноС Π΅Π³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ всСгда находится Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области экрана, ΠΈ Π½Π΅ двигаСтся Π²ΠΎ врСмя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы. Π’ этом ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ, ΠΎΠ½ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° фиксированноС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π’ IE с position: fixed Π½Π΅ всС Ρ‚Π°ΠΊ Π³Π»Π°Π΄ΠΊΠΎ, ΠΊΠ°ΠΊ Π±Ρ‹ Π½Π°ΠΌ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ, Π½ΠΎ сущСствуСт #content < position:relative; >#div-1a

6. Π”Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

Π’ΠΎΠΎΡ€ΡƒΠΆΠΈΠ²ΡˆΠΈΡΡŒ знаниями ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… шагов, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования.

Одним ΠΈΠ· прСимущСств Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования, являСтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ элСмСнты Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ΠΈ располоТСны Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Π±Π»ΠΎΠΊ #div-1b располоТСн ΠΏΠ΅Ρ€Π΅Π΄ Π±Π»ΠΎΠΊΠΎΠΌ #div-1a.

А сСйчас Ρƒ вас Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Π» Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ вопрос: β€œΠ ΠΊΡƒΠ΄Π° ΠΆΠ΅ дСлись ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΈΠ· нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°?”. Они ΡΠΊΡ€Ρ‹Π»ΠΈΡΡŒ ΠΏΠΎΠ΄ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ располоТСнными Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ.

7. Π”Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с фиксированной высотой

Одно ΠΈΠ· Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ – Π·Π°Π΄Π°Ρ‚ΡŒ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ, содСрТащСму ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.

РСшСниС Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ подходящСС, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π½Π°Π΅ΠΌ Π·Π°Ρ€Π°Π½Π΅Π΅, ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкст, Π±ΡƒΠ΄Π΅Ρ‚ располоТСн Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ…, ΠΈ ΠΊΠ°ΠΊΠΎΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ использован.

8. Float

Для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ высотой, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

Назначив Π±Π»ΠΎΠΊΡƒ float, ΠΌΡ‹ максимально Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Ρ‚ΠΎΠ»ΠΊΠ½Π΅ΠΌ Π΅Π³ΠΎ ΠΊ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ (ΠΈΠ»ΠΈ Π»Π΅Π²ΠΎΠΌΡƒ) ΠΊΡ€Π°ΡŽ, Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ тСкст, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ Π΅Π³ΠΎ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΈΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Π½ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для Π±ΠΎΠ»Π΅Π΅ слоТной Π·Π°Π΄Π°Ρ‡ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это СдинствСнный инструмСнт, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉΡΡ Π² нашСм распоряТСнии.

9. β€œΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅β€ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

Если Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ float: left, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ float: left, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² приТмСтся ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, ΠΈ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, с ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ высотой.

Π’Π°ΠΊΠΆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ float, Π² этом случаС, ΠΎΠ½ΠΈ распрСдСлятся ΠΏΠΎ краям ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Но Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас появилась другая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° – ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ выходят Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Ρ‚Π΅ΠΌ самым ломая всю вСрстку. Π­Ρ‚Π° самая распространСнная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ², хотя Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΎΠ½Π° довольно просто.

10. ΠžΡ‡ΠΈΡΡ‚ΠΊΠ° float

Чистку Ρ„Π»ΠΎΠ°Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ двумя способами. Если послС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈΠ΄Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ, достаточно Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ clear: both.

Или ΠΆΠ΅ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ свойство overflow: hidden

Π’ любом случаС, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

БСгодня Π±Ρ‹Π»ΠΈ рассмотрСны Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ позиционирования, ΠΈ самыС простыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹. Π’Π°ΠΊΠΆΠ΅, Π² ΠΏΠΎΠΌΠΎΡ‰ΡŒ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌ я всСгда Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Ρ†ΠΈΠΊΠ» статСй Ивана Π‘Π°Π³Π°Π»Π°Π΅Π²Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² своС врСмя ΠΌΠ½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов: Ρ€Π°Π·Π±ΠΎΡ€ всСх Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ position Π² CSS

position css relative sticky

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚, мСня Π·ΠΎΠ²ΡƒΡ‚ Анна Π‘Π»ΠΎΠΊ, ΠΈ эта ΡΡ‚Π°Ρ‚ΡŒΡ Π±ΡƒΠ΄Π΅Ρ‚ посвящСна довольно «острой» Ρ‚Π΅ΠΌΠ΅, которая связана с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ элСмСнтов. ΠœΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚Π°ΠΊΠΎΠΌ свойствС ΠΊΠ°ΠΊ position ΠΈ Π΅Π³ΠΎ значСниях: relative, absolute ΠΈ fixed. Π’Π°ΠΊΠΆΠ΅ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚Π°ΠΊΠΎΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ ΠΊΠ°ΠΊ static, Π½ΠΎ ΠΏΠΎ большСй стСпСни нас Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ пСрвая Β«Ρ‚Ρ€ΠΎΠΈΡ†Π°Β», Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½Π° Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° сайтах.

Если Ρ‚Ρ‹ постоянно задаСшься вопросом, ΠΊΠ°ΠΊΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΉ ситуации Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚ΠΎ эта ΡΡ‚Π°Ρ‚ΡŒΡ для тСбя. Π Π°Π·Π±ΠΎΡ€ Π½Π°Ρ‡Π½Ρ‘ΠΌ с Ρ‚Π΅ΠΎΡ€ΠΈΠΈ ΠΈ послС Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΎΡ‚Ρ€Π°ΠΆΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½Π° сайтС Codepen.

Position

Бвойство position устанавливаСт способ позиционирования элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π½Π° web-страницС. БСйчас Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ это свойство ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ 5 Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ: absolute, fixed, relative, static ΠΈ sticky.

Relative

Π­Ρ‚ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов устанавливаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ исходного мСста, ΠΏΡ€ΠΈ этом Ссли ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ‚Π°ΠΊΠΈΠ΅ свойства ΠΊΠ°ΠΊ: left, top, right ΠΈ bottom, Ρ‚ΠΎ ΠΌΡ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ элСмСнта ΠΈ сдвинСм Π΅Π³ΠΎ Π² Ρ‚Ρƒ ΠΈΠ»ΠΈ ΠΈΠ½ΡƒΡŽ сторону Π² зависимости ΠΎΡ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

Absolute

Π­Ρ‚ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Когда ΠΌΡ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π΄Π°Π½Π½ΠΎΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚ΠΎ ΠΌΡ‹ Π΄Π°Π΅ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½. ΠŸΡ€ΠΈ этом Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° Π²Π΅Π±-страницС Ρ‚Π°ΠΊ, словно этого Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования Π½Π° страницС Π½Π΅Ρ‚. Если Ρƒ элСмСнта стоит position: absolute , Ρ‚ΠΎ ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΅Π³ΠΎ мСстополоТСниС ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΊΠ°ΠΊΠΈΡ… свойств ΠΊΠ°ΠΊ: left, top, right ΠΈ bottom.

Static

Π­Ρ‚ΠΎ статичноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π’ этом случаС элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ. ИспользованиС Ρ‚Π°ΠΊΠΈΡ… свойств ΠΊΠ°ΠΊ: left, top, right ΠΈ bottom Π½Π΅ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ Π½ΠΈ ΠΊΠ°ΠΊΠΈΠΌ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°ΠΌ.

Fixed

Π­Ρ‚ΠΎ фиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ мСстополоТСниСм ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ left, top, right ΠΈ bottom, Π½ΠΎ ΠΏΡ€ΠΈ этом ΠΎΠ½ своС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° страницС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π² скролл страницы.

Sticky

Π­Ρ‚ΠΎ сочСтаниС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ фиксированного позиционирования. Когда ΠΌΡ‹ пишСм position: sticky , Ρ‚ΠΎ элСмСнт рассматриваСтся ΠΊΠ°ΠΊ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ пСрСсСкаСт ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ ΠΏΠΎΡ€ΠΎΠ³, послС Ρ‡Π΅Π³ΠΎ ΠΎΠ½ ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ фиксированный. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Ρ‚Π°ΠΊΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ примСняСтся для фиксации Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΌ мСстС Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° содСрТимоС, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ относится Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, прокручиваСтся Π½Π° страницС.

Π‘Ρ‚ΠΎΠΈΡ‚ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ свойство position поддСрТиваСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΡƒΠΆΠ΅ довольно Π΄Π°Π²Π½ΠΎ, Π½ΠΎ Π½Π° Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»Π°ΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Ρ€ΠΈ свойства: static, relative ΠΈ absolute ΠΈ ΡƒΠΆΠ΅ начиная с IE 7, появилась ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° fixed. Но ΠΏΡ€ΠΈ этом ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ sticky Π½Π΅ поддСрТиваСтся Internet Explorer-ΠΎΠΌ совсСм ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρƒ Edge начинаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚ΠΎΠΉ вСрсии. Π’ΠΎ всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Ρ‚Π°ΠΊΠΎΠ΅ свойство, ΠΊΠ°ΠΊ position поддСрТиваСтся Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅, ΠΈ я ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ Π½Π° Π΄Π΅Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ эти свойства. Π’ HTML Π·Π°Π΄Π°Π΄ΠΈΠΌ Π±Π»ΠΎΠΊ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ box ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ установим элСмСнт ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ item.

Для box ΠΌΡ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Π΄ΠΈΠΌ пространство, Π·Π°Π΄Π°Π² Π΅ΠΌΡƒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ.

Π”Π°Π»Π΅Π΅ ΠΌΡ‹ стилизуСм item. Π’Π°ΠΊΠΆΠ΅ установим для Π½Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, высоту, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ скруглСниС ΡƒΠ³ΠΎΠ»ΠΎΠ² Π±Π»ΠΎΠΊΠ°.

Π˜Ρ‚Π°ΠΊ, ΠΈΠΌΠ΅Π½Π½ΠΎ с этим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΌΡ‹ сСйчас Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ рассмотрим, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ вСсти сСбя элСмСнты ΠΏΡ€ΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… значСния position.

Absolute

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΡ€ΡƒΠ³ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС, ΠΊΠ°ΠΊ это ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΎ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅. Как это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Если Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΎΡ€ΠΈΡŽ, Ρ‚ΠΎ Ρ‚Π°ΠΌ Π±Ρ‹Π»ΠΎ сказано, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ свойство, ΠΊΠ°ΠΊ position: absolute Π·Π°Π΄Π°Π΅Ρ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ для элСмСнта, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊ ΠΈ поступим.
Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρƒ item Π΄ΠΎΠ±Π°Π²ΠΈΠΌ position: absolute. Однако для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ наш position Ρ€Π°Π±ΠΎΡ‚Π°Π», Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π² связкС с Ρ‚Π°ΠΊΠΈΠΌΠΈ свойствами, ΠΊΠ°ΠΊ: left, top, right ΠΈ bottom. Π’ зависимости полоТСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠ΅ свойство. Π’ нашСм случаС Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ сторон ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°.

И Ρ‚ΡƒΡ‚ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΈ β€” ΠΊΡ€ΡƒΠ³ Π²Ρ‹ΡˆΠ΅Π» Π·Π° ΠΏΡ€ΠΈΠ΄Π΅Π»Ρ‹ Π±Π»ΠΎΠΊΠ° box. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Π² CSS Π½Π΅ ΡƒΠΊΠ°Π·Π°Π»ΠΈ, ΠΊΠ°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ являСтся Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΌ (ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ элСмСнт), Ρ‚ΠΎ ΠΎΠ½ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ всСго Ρ‚Π΅Π³Π° body. Π Π΅ΡˆΠ°Π΅Ρ‚ΡΡ эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ свойства relative для Π±Π»ΠΎΠΊΠ° box.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ это сдСлали, наша Ρ‚ΠΎΡ‡ΠΊΠ° Π²Π΅Ρ€Π½ΡƒΠ»Π°ΡΡŒ Π½Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ мСсто.

ΠžΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ с HTML ΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΡƒΡ‚:

Fixed
Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π±Π»ΠΎΠΊ box тСкста, Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ автоматичСский скролл Π½Π° страницС.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ наша Π·Π°Π΄Π°Ρ‡Π° ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ наша Ρ‚ΠΎΡ‡ΠΊΠ° «прСслСдовала» нас, ΠΈ всС врСмя Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»Π°ΡΡŒ Π² ΠΎΠ΄Π½ΠΎΠΉ части экрана, ΠΊΠ°ΠΊ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅.

position fixed

Для этого Π±Π»ΠΎΠΊΡƒ item Π·Π°Π΄Π°Π΅ΠΌ position: fixed ΠΈ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΊΠ°ΠΊ Π±Ρ‹ Β«Π²Ρ‹ΠΏΠ°Π΄Π°Π΅Ρ‚Β» ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π΅ΠΉ ΠΏΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠ΅ свойства, ΠΊΠ°ΠΊ top: 0 ΠΈ left: 0 . Но ΠΏΡ€ΠΈ этом, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, ΠΌΡ‹ ΠΈΡ… всСгда ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ, Ссли ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ значСния

И Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π² ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ скролим страницу эта Ρ‚ΠΎΡ‡ΠΊΠ° Β«ΠΈΠ΄Π΅Ρ‚Β» Π·Π° Π½Π°ΠΌΠΈ, ΠΎΠ½Π° Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π»Π°ΡΡŒ Π² ΠΎΠ΄Π½ΠΎΠΉ части экрана.

ΠžΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ с HTML ΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΡƒΡ‚:

Static
Π― скопировала всС стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ нас ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡŒ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ position: static . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ссли для элСмСнта Π²Ρ‹ Π½Π΅ устанавливаСтС position , Ρ‚ΠΎ автоматичСски Ρƒ Π½Π΅Π³ΠΎ подразумСваСтся Ρ‚Π°ΠΊΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ position: static . Π”Π°Π²Π°ΠΉΡ‚Π΅ прСдставим, Ρ‡Ρ‚ΠΎ Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Π°ΠΌ прСдстоит Π·Π°Π½ΡΡ‚ΡŒΡΡ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²ΠΎΠΌ сайта. ВСроятнСС всСго, Π²Π°ΠΌ потрСбуСтся ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρƒ Π±Π»ΠΎΠΊΠ° box.

Π‘ этими значСниями Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ любой ΡˆΠΈΡ€ΠΈΠ½Π΅ экрана, Π½ΠΎ ΠΏΡ€ΠΈ этом position Ρƒ Π±Π»ΠΎΠΊΠ° item ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ position: static .

И ΠΊΠ°ΠΊ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, ΠΎΠ½ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ всС, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ писали Ρ€Π°Π½Π΅Π΅, это right ΠΈ bottom. Π”Π°ΠΆΠ΅, Ссли ΠΌΡ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ значСния, сдСлаСм ΠΈΡ… большС ΠΈΠ»ΠΈ мСньшС это Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ повлияСт Π½Π° располоТСниС Π΄Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ position: static сбрасываСт всС это. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ стили, Ρ‚ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ достаточно ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ position: static ΠΈ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС right , bottom , left , top ΠΌΠ΅Π½ΡΡ‚ΡŒ Π² @media Π½Π΅ потрСбуСтся.

ΠžΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ с HTML ΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΡƒΡ‚:

Sticky
Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π’ Π½Π΅ΠΌ ΠΌΡ‹ создадим Π±Π»ΠΎΠΊ header, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ содСрТится тСкст. Рядом создадим Π±Π»ΠΎΠΊ main, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ размСсти Π±Π»ΠΎΠΊ side с тСкстом, Ρ‡Ρ‚ΠΎ Π±Ρ‹ Π½Π° страницС появился скрол ΠΈ Π±Π»ΠΎΠΊ sticky с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. Под Π±Π»ΠΎΠΊΠΎΠΌ main размСстим Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ ΠΈ Π½Π°Π·ΠΎΠ²Π΅ΠΌ Π΅Π³ΠΎ footer с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ тСкста.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ чистая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML. Π•Π΅ ΠΌΡ‹ ΠΈ Π±ΡƒΠ΄Π΅ΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ. НачнСм с Π±Π»ΠΎΠΊΠ° side, установив Π΅ΠΌΡƒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

Π”Π°Π»Π΅Π΅ стилизуСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π·Π°Π΄Π°Π² Π΅ΠΌΡƒ Ρ†Π²Π΅Ρ‚ тСкста ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°.

Π”Π°Π»Π΅Π΅ Π³Π»Π°Π²Π½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ sticky Π΄ΠΎΠ±Π°Π²ΠΈΠΌ position: sticky . Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΊΠ° Ρƒ нас Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ измСнилось, Π½ΠΎ ΠΏΡ€ΠΈ этом, Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΠΎΠ½ Β«Π²Ρ‹ΠΏΠ°Π»Β» ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² связкС с float , поэтому добавляСм Π΅ΠΌΡƒ float: right . Как ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, ΠΏΡ€ΠΈ скролС ΠΎΠ½ Ρƒ нас Π½Π΅ цСпляСтся Π½Π°Π²Π΅Ρ€Ρ…, поэтому Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ top: 0 ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈ скролС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ цСпляСтся ΠΊ Π²Π΅Ρ€Ρ…Ρƒ ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Β«ΠΈΠ΄Ρ‚ΠΈΒ» Π·Π° Π½Π°ΠΌΠΈ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ слСдования ΠΏΠΎ страницС.

ΠžΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ с HTML ΠΈ CSS ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΡƒΡ‚:

ВмСсто Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ

НадСюсь, данная ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠΌΠΎΠ³Π»Π° Ρ‚Π΅Π±Π΅ Ρ€Π°ΡΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π°Π΄ i ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ всСх Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ примСняСмых Π² свойствС position . К соТалСнию, ΡΡ‚Π°Ρ‚ΡŒΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Ρ€Π°Π·ΠΈΡ‚ΡŒ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ ΠΎΡ‚Ρ€Π°Π·ΠΈΡ‚ΡŒ всС дСйствия ΠΎΡ‚ ΠΈ Π΄ΠΎ ΠΏΡ€ΠΈ создании ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², поэтому ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотри Π²ΠΈΠ΄Π΅ΠΎ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π½ΠΈΠΆΠ΅.

НС Π·Π°Π±Ρ‹Π²Π°ΠΉ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ свои вопросы ΠΏΠΎ вёрсткС ΠΈΠ»ΠΈ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρƒ профСссионалов Π½Π° FrontendHelp Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½.

Π Π΅ΠΉΡ‚ΠΈΠ½Π³
( Пока ΠΎΡ†Π΅Π½ΠΎΠΊ Π½Π΅Ρ‚ )
ΠŸΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ ΡΡ‚Π°Ρ‚ΡŒΡ? ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ:
Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Adblock
detector