Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Как ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡŽΡ‚ Π² CSS?

6 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²

position: relative; большС всСго достигнСт Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Π’ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ установитС вмСсто этого, зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ. Π•ΡΡ‚ΡŒ 4 Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… значСния (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ).

position: static; Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ: статичСский; Π½Π΅ позиционируСтся ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ особым ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ; ΠΎΠ½ всСгда располагаСтся Π² соотвСтствии с ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ страницы. Π­Ρ‚ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

position: relative; Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ; позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния. Установка свойств top, right, bottom ΠΈ left ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ Π΅Π³ΠΎ ΠΎΡ‚ΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΡŽ ΠΎΡ‚ Π΅Π³ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния. Π”Ρ€ΡƒΠ³ΠΎΠ΅ содСрТимоС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π² любой ΠΏΡ€ΠΎΠ±Π΅Π», оставлСнный элСмСнтом.

position: fixed; Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ: исправлСно; располоТСн ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ всСгда остаСтся Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС, Π΄Π°ΠΆΠ΅ Ссли страница прокручиваСтся. Бвойства top, right, bottom ΠΈ left ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для позиционирования элСмСнта.

position: absolute; Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ: absolute; позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ блиТайшСго располоТСнного ΠΏΡ€Π΅Π΄ΠΊΠ° (вмСсто ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° просмотра, ΠΊΠ°ΠΊ фиксированный).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ position являСтся position: static Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ это, вСроятно, Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ:

Π’Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ inline-css с! Π’Π°ΠΆΠ½Ρ‹ΠΌ. Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ Π»ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Бвойство position

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

position: static

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

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

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

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

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

position: relative

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

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

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

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

position: absolute

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

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

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

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

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

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ растянСт Ρ‚Π°ΠΊΠΎΠΉ элСмСнт Π΄ΠΎ Π³Ρ€Π°Π½ΠΈΡ†.

Как Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°?

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΉΡ‚ΠΈ Π² Π³ΠΎΠ»ΠΎΠ²Ρƒ:

Но это Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ лишь Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Ρƒ страницы Π½Π΅ появится скроллинг!

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠ· ΠΈΡ„Ρ€Π΅ΠΉΠΌ:

Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ Ρ„ΠΎΠ½ оканчиваСтся Π·Π°Π΄ΠΎΠ»Π³ΠΎ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² CSS 100% относится ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π΅ внСшнСго Π±Π»ΠΎΠΊΠ° (Β«containing blockΒ»). А ΠΊΠ°ΠΊΠΎΠΉ внСшний Π±Π»ΠΎΠΊ имССтся Π² Π²ΠΈΠ΄Ρƒ здСсь, вСдь элСмСнт ΠΈΠ·ΡŠΡΡ‚ со своСго ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ мСста?

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΈΠΌ являСтся Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ («Β«initial containing blockΒ»»), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ являСтся ΠΎΠΊΠ½ΠΎ, Π° Π½Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

Π’ΠΎ Π΅ΡΡ‚ΡŒ, ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π°, Π° Π½Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, получится Ρ‚Π°ΠΊ?

Π‘ Π²ΠΈΠ΄Ρƒ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ, Π½ΠΎ Π½Π΅Ρ‚, Π½Π΅ получится!

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ top/right/left/bottom Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ bottom: 0 – ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π° ΠΎΠΊΠ½Π°, Π° Π½Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π±Π»ΠΎΠΊ растянСтся Π΄ΠΎ Π½Π΅Ρ‘. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎ ΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

position: absolute Π² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅

Если Ρƒ элСмСнта Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€Π΅Π΄ΠΎΠΊ, Ρ‚ΠΎ position: absolute Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π³ΠΎ, Π° Π½Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ position для размСщСния элСмСнта управлСния:

Π§Π°ΡΡ‚ΡŒ тСкста пСрСкрываСтся. Кнопка Π±ΠΎΠ»Π΅Π΅ Π½Π΅ участвуСт Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ float для размСщСния элСмСнта управлСния:

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ освобоТдаСт мСсто справа, тСкст пСрСнСсён. Кнопка ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅, просто сдвинута.

position: fixed

Π­Ρ‚ΠΎ ΠΏΠΎΠ΄Π²ΠΈΠ΄ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования.

Π Π°Π·Π½ΠΈΡ†Π° Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… словах:

Когда страницу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚, фиксированный элСмСнт остаётся Π½Π° своём мСстС ΠΈ Π½Π΅ прокручиваСтся вмСстС со страницСй.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ссылка #top всСгда остаётся Π½Π° своём мСстС.

Π˜Ρ‚ΠΎΠ³ΠΎ

Π’ΠΈΠ΄Ρ‹ позиционирования ΠΈ ΠΈΡ… особСнности.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ пСрСносит элСмСнт Π½Π° Π½ΠΎΠ²ΠΎΠ΅ мСсто.

НовоС мСсто вычисляСтся ΠΏΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌ left/top/right/bottom ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ блиТайшСго ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ родитСля. Если Ρ‚Π°ΠΊΠΎΠ³ΠΎ родитСля Π½Π΅Ρ‚, Ρ‚ΠΎ ΠΈΠΌ считаСтся ΠΎΠΊΠ½ΠΎ.

Подвид Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ элСмСнт привязываСтся ΠΊ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌ ΠΎΠΊΠ½Π°, Π° Π½Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΎΠ½ остаётся Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС.

ΠŸΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ

CSS-ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ-настоящСму Π³Π»ΡƒΠ±ΠΎΠΊΠΎ Π² спСцификации Visual Formatting Model, 9.3 ΠΈ Π½ΠΈΠΆΠ΅.

Π•Ρ‰Ρ‘ Π΅ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ руководство CSS Positioning in 10 steps, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ основныС Ρ‚ΠΈΠΏΡ‹ позиционирования.

Π—Π°Π΄Π°Ρ‡ΠΈ

МодальноС окно

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ DIV’Ρƒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ поставлСн Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅:

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: всС основныС, IE8+. Π”ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΎΠΊΠ½Π° (ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅).

МоТно, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΡƒΠ·Π½Π°Ρ‚ΡŒ эту высоту ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ JavaScript, Π½ΠΎ CSS Π΄Π°Ρ‘Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ. Π‘ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ position:fixed :

Бвойство z-index Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€Π΅Π²ΠΎΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ всС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты управлСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π»ΠΈΡΡŒ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

2.4. CSS-ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

CSS рассматриваСт ΠΌΠ°ΠΊΠ΅Ρ‚ html-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΊΠ°ΠΊ Π΄Π΅Ρ€Π΅Π²ΠΎ элСмСнтов. Π£Π½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅Ρ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта, называСтся ΠΊΠΎΡ€Π½Π΅Π²Ρ‹ΠΌ элСмСнтом. ΠœΠΎΠ΄ΡƒΠ»ΡŒ CSS-ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ описываСт, ΠΊΠ°ΠΊ любой ΠΈΠ· элСмСнтов ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ нСзависимо ΠΎΡ‚ порядка Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (Ρ‚.Π΅. ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½ ΠΈΠ· Β«ΠΏΠΎΡ‚ΠΎΠΊΠ°Β»).

Π’ CSS2 ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π² Π΄Π΅Ρ€Π΅Π²Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ноль ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π±Π»ΠΎΠΊΠΎΠ² Π² соотвСтствии с Π±Π»ΠΎΡ‡Π½ΠΎΠΉ модСлью. ΠœΠΎΠ΄ΡƒΠ»ΡŒ CSS3 дополняСт ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ схСму позиционирования. РасполоТСниС этих Π±Π»ΠΎΠΊΠΎΠ² рСгулируСтся:

Π‘Ρ…Π΅ΠΌΡ‹ позиционирования

Π’ CSS Π±Π»ΠΎΠΊ элСмСнта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ располоТСн Π² соотвСтствии с трСмя схСмами позиционирования:

ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ

ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅

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

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΎΠΌ Β«Π²Π½Π΅ ΠΏΠΎΡ‚ΠΎΠΊΠ°Β» ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ элСмСнт.

1. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ

2. Π’Ρ‹Π±ΠΎΡ€ схСмы позиционирования: свойство position

Бвойство position опрСдСляСт, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠΎΠ² позиционирования ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для вычислСния полоТСния Π±Π»ΠΎΠΊΠ°.

Бвойство Π½Π΅ наслСдуСтся.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ сохраняСт свои Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°Π·Ρ€Ρ‹Π²Ρ‹ строк ΠΈ пространство, ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ для Π½Π΅Π³ΠΎ.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ создаСт Π½ΠΎΠ²Ρ‹ΠΉ содСрТащий Π±Π»ΠΎΠΊ для Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ².

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ margin Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ ΡΡ…Π»ΠΎΠΏΡ‹Π²Π°ΡŽΡ‚ΡΡ.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ. ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ содСрТимоС Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΠΈΠ»ΠΈ сами ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ скрыты), Π² зависимости ΠΎΡ‚ значСния z-index ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ Π±Π»ΠΎΠΊΠΎΠ².stickyПолоТСниС Π±Π»ΠΎΠΊΠ° рассчитываСтся Π² соотвСтствии с Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ. Π—Π°Ρ‚Π΅ΠΌ Π±Π»ΠΎΠΊ смСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго блиТайшСго ΠΏΡ€Π΅Π΄ΠΊΠ° с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° просмотра, Ссли Π½ΠΈ Ρƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡ€Π΅Π΄ΠΊΠΎΠ² Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Β«Π›ΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² случаС пСрСполнСния.

Β«Π›ΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ сохраняСт свои Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°Π·Ρ€Ρ‹Π²Ρ‹ строк ΠΈ пространство, ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ для Π½Π΅Π³ΠΎ.

Β«Π›ΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ создаСт Π½ΠΎΠ²Ρ‹ΠΉ содСрТащий Π±Π»ΠΎΠΊ для Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ².fixedЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌΡƒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, с ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ΠΌ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ для содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ устанавливаСтся ΠΎΠΊΠ½ΠΎ просмотра. Π’Π°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ удаляСтся ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ части Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ЀиксированныС Π±Π»ΠΎΠΊΠΈ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ этом ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° фиксированныС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния.

ΠŸΡ€ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ фиксированныС Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС, содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ для Π½ΠΈΡ… устанавливаСтся ΠΎΠ±Π»Π°ΡΡ‚ΡŒ страницы. Π‘Π»ΠΎΠΊΠΈ с фиксированным ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ большС области страницы, ΠΎΠ±Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ.initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ cssРис. 1. Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ статичным, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

3. Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°: свойства top, right, bottom, left

top
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:
autoВлияниС значСния зависит ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
Π΄Π»ΠΈΠ½Π°Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° фиксированном расстоянии ΠΎΡ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ края. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
%ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ высоты содСрТащСго Π±Π»ΠΎΠΊΠ°. Для Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β€” ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ высоты ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Бвойство top Π·Π°Π΄Π°Π΅Ρ‚ расстояниС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΡ€Π°ΠΉ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Π΅Π³ΠΎ margin ) смСщаСтся Π½ΠΈΠΆΠ΅ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°. Для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² опрСдСляСт смСщСниС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края самого Π±Π»ΠΎΠΊΠ° (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΡƒ задаСтся позиция Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅, Π° Π·Π°Ρ‚Π΅ΠΌ смСщСниС ΠΎΡ‚ этой ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² соотвСтствии с этим свойством).

right
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:
autoВлияниС значСния зависит ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
Π΄Π»ΠΈΠ½Π°Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° фиксированном расстоянии ΠΎΡ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ края. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
%ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°. Для Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β€” ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Бвойство right ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ расстояниС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Π΅Π³ΠΎ margin ) смСщСн Π²Π»Π΅Π²ΠΎ ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°. Для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² опрСдСляСт смСщСниС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края самого Π±Π»ΠΎΠΊΠ°.

bottom
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:
autoВлияниС значСния зависит ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
Π΄Π»ΠΈΠ½Π°Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° фиксированном расстоянии ΠΎΡ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ края. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
%ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ высоты содСрТащСго Π±Π»ΠΎΠΊΠ°. Для Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β€” ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ высоты ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Бвойство bottom ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ расстояниС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡ€Π°ΠΉ Π±Π»ΠΎΠΊΠ° смСщСн Π²Π²Π΅Ρ€Ρ… ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°. Для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² опрСдСляСт смСщСниС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края самого Π±Π»ΠΎΠΊΠ°.

left
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:
autoВлияниС значСния зависит ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° элСмСнта. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
Π΄Π»ΠΈΠ½Π°Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° фиксированном расстоянии ΠΎΡ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ края. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
%ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°. Для Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β€” ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ.
initialУстанавливаСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Бвойство left ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ расстояниС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π»Π΅Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ смСщСн Π²ΠΏΡ€Π°Π²ΠΎ ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°. Для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² опрСдСляСт смСщСниС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края самого Π±Π»ΠΎΠΊΠ°.

ΠŸΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния ΡΠΌΠ΅Ρ‰Π°ΡŽΡ‚ элСмСнт Π²Π½ΡƒΡ‚Ρ€ΡŒ содСрТащСго Π±Π»ΠΎΠΊΠ°, Π° ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ β€” Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹.

4. ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅: свойство float

ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ позволяСт Π±Π»ΠΎΠΊΠ°ΠΌ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строкС. Β«ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊΒ» смСщаСтся Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π΅Π³ΠΎ внСшний ΠΊΡ€Π°ΠΉ Π½Π΅ коснСтся края содСрТащСго Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ внСшнСго края Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. Если имССтся Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ, внСшняя вСрхняя Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° выравниваСтся с Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

ΠŸΡ€ΠΈ использовании свойства float для элСмСнтов рСкомСндуСтся Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Π’Π΅ΠΌ самым Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ создаст мСсто для Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ содСрТимого. Если для ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ элСмСнта нСдостаточно мСста ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π²Π½ΠΈΠ· Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ умСстится. ΠŸΡ€ΠΈ этом ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты уровня Π±Π»ΠΎΠΊΠ° Π±ΡƒΠ΄ΡƒΡ‚ Π΅Π³ΠΎ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π° элСмСнты уровня строки Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π²ΠΏΡ€Π°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ, освобоТдая для Π½Π΅Π³ΠΎ пространство ΠΈ обтСкая Π΅Π³ΠΎ.

Бвойство Π½Π΅ наслСдуСтся.

float
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:
noneΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΠΈΠ΅ обтСкания. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
leftΠ­Π»Π΅ΠΌΠ΅Π½Ρ‚ пСрСмСщаСтся Π²Π»Π΅Π²ΠΎ, содСрТимоС ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ.
rightΠ­Π»Π΅ΠΌΠ΅Π½Ρ‚ пСрСмСщаСтся Π²ΠΏΡ€Π°Π²ΠΎ, содСрТимоС ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ своСго содСрТимого с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… отступов ΠΈ Ρ€Π°ΠΌΠΎΠΊ. Π’Π΅Ρ€Ρ…Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ отступы margin ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов Π½Π΅ ΡΡ…Π»ΠΎΠΏΡ‹Π²Π°ΡŽΡ‚ΡΡ.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ cssРис. 2. ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ элСмСнтов

5. Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ рядом с ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ элСмСнтами: свойство clear

Бвойство clear ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊΠΈΠ΅ стороны Π±Π»ΠΎΠΊΠ°/Π±Π»ΠΎΠΊΠΎΠ² элСмСнта Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠ»Π΅Π³Π°Ρ‚ΡŒ ΠΊ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ, находящСмся Π²Ρ‹ΡˆΠ΅ Π² исходном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. Π’ CSS2 ΠΈ CSS 2.1 свойство примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Π½Π΅ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ элСмСнтам уровня Π±Π»ΠΎΠΊΠ°.

Бвойство Π½Π΅ наслСдуСтся.

clear
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅:
noneΠžΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ отсутствиС ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ². Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
leftΠ‘ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ элСмСнт Π²Π½ΠΈΠ· ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края любого ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ слСва элСмСнта, находящСмся Π²Ρ‹ΡˆΠ΅ Π² исходном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.
rightΠ‘ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ элСмСнт Π²Π½ΠΈΠ· ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края любого ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ справа элСмСнта, находящСмся Π²Ρ‹ΡˆΠ΅ Π² исходном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.
bothΠ‘ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ элСмСнт Π²Π½ΠΈΠ· ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края любого ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ слСва ΠΈ справа элСмСнта, находящСмся Π²Ρ‹ΡˆΠ΅ Π² исходном Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.
inheritНаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Для прСдотвращСния ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΈΠ»ΠΈ Π³Ρ€Π°Π½ΠΈΡ† ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ элСмСнтами ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ .

6. ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ контСкста налоТСния: свойство z-index

Π’ CSS ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π² Ρ‚Ρ€Π΅Ρ… измСрСниях. Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ полоТСнию, Π±Π»ΠΎΠΊΠΈ Π²Ρ‹ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ вдоль оси Z Π΄Ρ€ΡƒΠ³ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ. ПолоТСниС вдоль оси Z особСнно Π²Π°ΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π±Π»ΠΎΠΊΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ cssРис. 3. ПолоТСниС элСмСнтов вдоль оси Z

ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΄Π΅Ρ€Π΅Π²ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° отрисовываСтся Π½Π° экранС, описываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ контСкста налоТСния. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΎΠ΄Π½ΠΎΠΌΡƒ контСксту налоТСния. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π² Π΄Π°Π½Π½ΠΎΠΌ контСкстС налоТСния ΠΈΠΌΠ΅Π΅Ρ‚ цСлочислСнный ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° оси Z ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ контСкстС налоТСния.

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

Бвойство Π½Π΅ наслСдуСтся.

6.1. ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ налоТСния

Если для элСмСнтов свойства z-index ΠΈ position Π½Π΅ Π·Π°Π΄Π°Π½Ρ‹ явно, контСкст налоТСния Ρ€Π°Π²Π΅Π½ порядку ΠΈΡ… располоТСния Π² исходном ΠΊΠΎΠ΄Π΅ ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ элСмСнты Π½Π° страницС Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Как ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ position: absolute Π² CSS

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

ΠŸΠ°Ρ€Ρƒ мСсяцСв Π½Π°Π·Π°Π΄ Π°Π²Ρ‚ΠΎΡ€Π° этого ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° спросили ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅, которая Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·-Π·Π° этой строки CSS. Π’ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ свойства position Π½Π΅ оказалось Π²ΠΎΠΎΠ±Ρ‰Π΅.

Пока Ρƒ нас стартуСт Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ курса ΠΏΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Ρƒ, рассказываСм ΠΎ случаях, ΠΊΠΎΠ³Π΄Π° position: absolute Π²ΠΏΠΎΠ»Π½Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΠΌ соврСмСнным CSS.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

ВСрнёмся Π½Π° 5 Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄. Π’ΠΎΠ³Π΄Π° CSS flexbox Π±Ρ‹Π» Π½ΠΎΠ²ΠΈΠ½ΠΊΠΎΠΉ ΠΈ Π½Π΅ ΠΌΠΎΠ³ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° 100 %, Π° CSS grid Π½Π΅ поддСрТивался. ΠœΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS. Но сСгодня ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Ρ‚Π΅Ρ… Π»Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS flexbox ΠΈΠ»ΠΈ grid.

НалоТСниС ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

Когда Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°, содСрТащая тСкст ΠΏΠΎΠ²Π΅Ρ€Ρ… изобраТСния, ΠΌΡ‹ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ position: absolute для размСщСния содСрТимого ΠΏΠΎΠ²Π΅Ρ€Ρ… изобраТСния. Π­Ρ‚ΠΎ большС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈ использовании CSS grid.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π’ΠΎΡ‚ типичная ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° с тСкстом Π½Π°Π΄ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ:

НСт Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΠ»ΠΎΡ…ΠΎΠ³ΠΎ Π² position: absolute ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Ρ‹ΡˆΠ΅, Π½ΠΎ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π½Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅? ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ шаг β€” Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ display: grid ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ card. Π—Π°Π΄Π°Π²Π°Ρ‚ΡŒ столбцы ΠΈΠ»ΠΈ строки Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ:

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ CSS grid создаёт строки автоматичСски, Π½Π° основС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’ нашСй ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅ основных элСмСнтов Π΄Π²Π°, ΠΈ поэтому получится Π΄Π²Π΅ строки ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΎΠ±Π° элСмСнта Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΉ области сСтки:

А Π»ΡƒΡ‡ΡˆΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ сокращСниСм grid-area :

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

ΠœΠ΅Ρ‚ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ (must try)

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ заполнСния, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΊΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π½Π°Ρ‡Π°Π»Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°:

ΠŸΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ, которая позиционируСтся Π½Π°Π΄ своим Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΌ Π±Π΅Π· position: absolute :

Π Π°Π·Π΄Π΅Π» Hero

Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ β€” Ρ€Π°Π·Π΄Π΅Π» hero с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

ΠŸΠΎΡ…ΠΎΠΆΠ΅ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ, Π½ΠΎ с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стилизациСй содСрТимого. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ соврСмСнному способу, Π½Π° ΠΌΠΈΠ½ΡƒΡ‚Ρƒ вспомним, ΠΊΠ°ΠΊ это дСлаСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования. Π£ нас Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ слоя:

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ hero рСализуСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования. Но ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

ΠŸΡ€ΠΎΠΉΠ΄Ρƒ ΠΏΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹ΠΌ строкам, ΠΎΠ½ΠΈ Π²Π°ΠΆΠ½Ρ‹:

НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ object-fit: cover ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с изобраТСниями.

Π― использовал min-height: 0 для изобраТСния Π½Π° случай, Ссли ΠΎΠ½ΠΎ окаТСтся большим. Π­Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ grid ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ height: 100% ΠΈ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ большС, Ρ‡Π΅ΠΌ сСкция hero, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎ минимальном Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² CSS grid.

Π—Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ стало Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Ρ‡ΠΈΡ‰Π΅?

CSS display: contents

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π’ΠΎΡ‚ HTML-ΠΊΠΎΠ΄ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Π”ΠΎ сих ΠΏΠΎΡ€ Π½ΠΈΡ‡Π΅Π³ΠΎ странного. На ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах хочСтся Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚Π°ΠΊΠΎΠ³ΠΎ располоТСния:

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ располоТСно ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ описаниСм. Как Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ? МоТно ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ:

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ согласно оТиданиям, Π° Π½Π° дСсктопС Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ справа. Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π½ΠΎ Π΅ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ с display: contents ΠΈ ΠΎΠ½ΠΎ ΠΏΡ€ΠΎΡ‰Π΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Π³ΠΎ, вСрнёмся ΠΊ исходной Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅:

И Π²ΠΎΡ‚ всё, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² CSS:

ΠŸΡ€ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ display: contents β€” это мощная Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π΅Ρ‰Ρ‘ нСсколько Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄ Π±Ρ‹Π»ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ со стилями дСсктопа:

УпорядочиваСм элСмСнты ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

НиТС ΠΊΠΎΠ΄ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π³Π΄Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ размСщаСтся Π² Π΅Ρ‘ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π½Π° HTML:

Π²Π²Π΅Ρ€Ρ…Ρƒ? Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования:

Однако это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ слишком Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π­Ρ‚ΠΎ происходит ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ находится Π²Π½Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, Π° Π·Π½Π°Ρ‡ΠΈΡ‚, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½Π΅ Π²Π°ΠΆΠ½Π° Π΅Π³ΠΎ Π΄Π»ΠΈΠ½Π°. ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ display: contents ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ большСго:

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π•ΡΡ‚ΡŒ нСбольшая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°: ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ padding: 1rem ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту, поэтому ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ»ΠΈΠΏΠ°Ρ‚ΡŒ ΠΊ краям. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ:

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π― написал ΠΏΠΎΠ»Π½ΠΎΠ΅ руководство ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π² CSS.

Π‘ΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон изобраТСния

НовоС свойство CSS aspect-ratio сСгодня поддСрТиваСтся Π²ΠΎ всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ бокс ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ΅ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон, Ρ€Π°Π½ΡŒΡˆΠ΅ ΠΌΡ‹ использовали этот Ρ…Π°ΠΊ с padding :

Π‘ aspect-ratio ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΡ‰Π΅:

Иногда Π»ΡƒΡ‡ΡˆΠ΅ position: absolute

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ содСрТимоС (Π°Π²Π°Ρ‚Π°Ρ€, имя ΠΈ ссылка) пСрСкрываСтся ΠΎΠ±Π»ΠΎΠΆΠΊΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ. Π£ нас Π΅ΡΡ‚ΡŒ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°:

position: absolute для ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ;

ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ margin для содСрТимого.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π½Π° Π΄Π²Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. КакоС ΠΈΠ· Π½ΠΈΡ… большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для нашСго случая?

ИспользованиС Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

Π’Π°ΠΊ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ, Π° Π·Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ padding: 1rem ΠΊ содСрТимому ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ:

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π»ΠΎΠΆΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ±Ρ€Π°Π½Π°, Π½Π°ΠΌ Π½Π΅ придётся ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ CSS.

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

ИспользованиС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ margin

Π’ этом Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° Π½Π΅ позиционируСтся Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ. ВмСсто этого содСрТимоС ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ margin ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π°:

Π₯отя это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π»ΠΎΠΆΠΊΠ° Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π΅ΡΡ‚ΡŒ, ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ:

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π°Π²Π°Ρ‚Π°Ρ€ находится Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ своСго родитСля (ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ). Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ это, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ CSS ΠΈ ΡƒΠ±Π΅Ρ€Ρ‘ΠΌ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ margin :

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹

Π Π°ΠΉΠ°Π½ Маллиган ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π» ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-grid.

Π‘Ρ‚Π΅Ρ„Π°Π½ΠΈ Π­ΠΊΠ»Π· написала Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΎΠ± использовании CSS-grid для построСния Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² hero.

Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² соврСмСнном CSS Π²Ρ‹ смоТСтС Π½Π° Π½Π°ΡˆΠΈΡ… курсах:

Как ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ css

    Π”Ρ€ΡƒΠ³ΠΈΠ΅ профСссии ΠΈ курсы

    Data Science ΠΈ Machine Learning

    Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

    Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

    Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *