ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Как ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ div справа, ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅, ΠΏΡ€ΠΈΠΌΠ΅Ρ€

Бвойство Π±Π»ΠΎΠΊΠ° float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ right. Бвойство right со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 0.

О ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ° div справа.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ Π±Π»ΠΎΠΊΠ° справа свойство float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ right

float:right;/* ПолоТСниС справа */

background: #fd0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */

width: 300px; /* Π¨ΠΈΡ€ΠΈΠ½Π° */

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ:

Π­Ρ‚ΠΎΡ‚ тСкст написан Π²Ρ‹ΡˆΠ΅ Π±Π»ΠΎΠΊΠ°.

Π”Π°Π»Π΅Π΅ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ написан, Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π½ΠΈΠΆΠ΅ Π±Π»ΠΎΠΊΠ°, ΠΊΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΡ‚ тСкст, Ρ‡Ρ‚ΠΎ написан Π½ΠΈΠΆΠ΅ Π±Π»ΠΎΠΊΠ° Π΄ΠΈΠ² Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ наш Π±Π»ΠΎΠΊ слСва. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π΄Π΅ΠΊΠΎΡ€Π°Ρ†ΠΈΠΈ страницы, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ располоТСниС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π² Π²ΠΈΠ΄Π΅ ΠΏΡ€Π΅Π²ΡŒΡŽ!

И ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСкст Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ всю высоту, Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится справа, Ρ‚ΠΎ тСкст Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΆΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

Div располоТСн справа свойство float Π±Π΅Π· обтСкания.

Π‘Π°ΠΌΠΎΠ΅ простоС, с ΠΌΠΎΠ΅ΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния, ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ наш Π΄ΠΈΠ² с классом «sprava» Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π΄ΠΈΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΡƒΡŽ высоту, Ρ‡Ρ‚ΠΎ ΠΈ класс sprava, Ρ‚.Π΅. 100px.

И Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π°ΡˆΠ΅ΠΌΡƒ Π½Π°Ρ€ΡƒΠΆΠ½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ «border: 1px solid;», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ Π΅Π³ΠΎ смогли ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ!

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ располоТСния Π±Π»ΠΎΠΊΠ° справа:

Как Π²ΠΈΠ΄ΠΈΠΌ, наш Π±Π»ΠΎΠΊ располоТился справа, ΠΈ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ написан Π½ΠΈΠΆΠ΅, ΠΈ располоТился Π½ΠΈΠΆΠ΅ Π±Π»ΠΎΠΊΠ°.

Div справа с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства margin-left

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π΅Ρ‰Ρ‘ Ρ€Π°Π· Π½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ². Π‘ Π½ΠΎΠ²Ρ‹ΠΌ классом.

background: #fd0; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */

width: 300px; /* Π¨ΠΈΡ€ΠΈΠ½Π° */

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ:

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ. Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ ΡƒΡ‡Π»ΠΈ Ρ‚ΠΎΡ‡ΠΊΡƒ отсчСта ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π° ΠΎΠ½Π° располагаСтся Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ. НашСго Π±Π»ΠΎΠΊΠ°.

Как Π²ΠΈΠ΄ΠΈΠΌ, наш Π±Π»ΠΎΠΊ справа Π½Π΅ зашСл Π·Π° края Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

Div справа Π² ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΏΡ€Π°Π²ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²Ρ‹ΠΉ Π±Π»ΠΎΠΊΠ° ΠΈ Π½ΠΎΠ²Ρ‹ΠΉ класс:

Π”Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ находится ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π½Π° этих словах, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° Π½Π΅Π³ΠΎ.!

Если Π²Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π°, Π΄ΠΎ ΠΌΠ΅Π½Π΅Π΅ Ρ‡Π΅ΠΌ 740(ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°), Ρ‚ΠΎ Π±Π»ΠΎΠΊ Π½Π°Π΅Π΄Π΅Ρ‚ Π½Π° тСкст.

Когда Π΄Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Π΅Π·ΠΆΠ°Ρ‚ΡŒ Π½Π° основной Π±Π»ΠΎΠΊ с тСкстом?!

Π‘Π΄Π΅Π»Π°Π΅ΠΌ скрин, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана мСньшС 1080 ΠΈ поставим Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ «border», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π΅Π³ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ.

Если Π²Ρ‹ Ρ‡ΠΈΡ‚Π°Π»ΠΈ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ†ΠΈΡ„Ρ€Ρ‹ Π½Π΅ Π±ΡŒΠ΅Ρ‚ΡΡ.

Π“Π»Π°Π²Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ » div » = 740px.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ мСньшС 1080, наш Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Π΅Π·ΠΆΠ°Ρ‚ΡŒ Π½Π° основной Π±Π»ΠΎΠΊ «main_text».

Div справа Π² ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΏΡ€Π°Π²ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°

Когда ΠΌΡ‹ рассматривали ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π±Π»ΠΎΠΊΠ° справа с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ «margin-left: 440px;», Π½ΠΎ Ссли ваш Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ‚ΠΎ этот Π±Π»ΠΎΠΊ справа, Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΅Π·ΠΆΠ°Ρ‚ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ, ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ основного ΠΈ Π²Π»Π΅Π²ΠΎ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ.

И Π΄Π°Π»Π΅Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ справа, Π² любой ситуации.

Div справа с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства right

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΈ помСстим Π΅Π³ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π±Π»ΠΎΠΊ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ Π΅ΠΌΡƒ свойства:

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

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

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² 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. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² cssРис. 2. ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ элСмСнтов

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

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

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

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

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

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

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

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² cssРис. 3. ПолоТСниС элСмСнтов вдоль оси Z

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

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

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

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

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

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

css ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ div1 ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒ ΠΊ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ div2

Π•ΡΡ‚ΡŒ div1, Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ div2.
Как div2 ΠΏΡ€Π°Π²Ρ‹ΠΌ ΠΊΡ€Π°Π΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ div2.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Ρ‡Π΅Ρ€Π΅Π· 34 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹
Π±Ρ€Ρ€Ρ€.)))
text-align: right
Π² сво-Π²Π°Ρ… css div1.

ΠŸΡ€ΠΈΠΆΠ°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΊ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ
Начал ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ css ΠΈ Π½Π΅ получаСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Ρ…ΠΎΡ‡Ρƒ, ΠΏΠΎΠΌΠΎΠ³ΠΈΡ‚Π΅ поТалуйста ΠΏΡ€ΠΈΠΆΠ°Ρ‚ΡŒ синий Π±Π»ΠΎΠΊ ΠΊ.

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² cssΠŸΡ€ΠΈΠΆΠ°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ
ЗдравствуйтС! Π’ Π±Π»ΠΎΠΊΠ΅ содСрТится ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Π°. Π’Π°Π±Π»ΠΈΡ†Π° ΡˆΠΈΡ€Π΅ Ρ‡Π΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΈ, соотвСтствСнно.

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² cssΠŸΡ€ΠΈΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ
Кнопка приТимаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Π½ΠΈΠ·Ρƒ, Π½ΠΎ слСва, Π² Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°? 11

Если я ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ понял ΡΡƒΡ‚ΡŒ, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ

Alorian’Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ. Π° насчёт позиционирования Ρ„Π»ΠΎΠ°Ρ‚ΠΎΠΌ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π» ΠΈ Π½Π΅ Π΄ΡƒΠΌΠ°Π» Ρ‡Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π—.Π«. ΠΌΠΎΠ΄Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹, Ссли Ρ‡Ρ‚ΠΎ ΠΈΠ·Π²ΠΈΠ½ΠΈΡ‚Π΅. ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ это сообщСниС)

xxxNEIxxx, Π£ тСбя ΠΌΠ°Π»ΠΎ постов нСдорос Π΅Ρ‰Π΅ πŸ™‚ Если я Π½Π΅ ошибаюсь Π½Π°Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ 200 постов. ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈ Π² Ρ‚Π΅ΠΌΠ΅ Ρ‡Ρ‚ΠΎ Π°Π΄ΠΌΠΈΠ½ создал Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ дискусия ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π°Π²Π°Ρ‚Π°Ρ€ΠΎΠ² ΠΈ Ρ‚.Π΄.

этот способ Π² Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ вёрсткС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ! Π° насчёт Ρ„Π»ΠΎΠ°Ρ‚Π°, ΠΏΠΎ ΠΈΠ΄Π΅ΠΈ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ Ссли Π² Π΄ΠΈΠ²Π΅ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π΄ΠΈΠ²! Ссли Π² Π΄ΠΈΠ²Π΅ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π΄Π²Π° Π΄ΠΈΠ²Π° Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ.

я Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ практичСски Π½Π° Π½ΡƒΠ»Π΅, Π½ΠΎ Π² вёрсткС ΡˆΠ°Ρ€ΡŽ достаточно Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Π—.Π«. 200 постов это всмыслС Ρ€Π΅ΠΏΡƒΡ‚Π°Ρ†ΠΈΠΈ? Ρ‚Ρ‹ мСня Π½Π°Π²Π΅Ρ€Π½ Π½Π΅ ΠΏΡ€Π°Π²Π΅Π»ΡŒΠ½ΠΎ понял, я Π³ΠΎΠ²Ρ€ΠΈΠ» Π·Π° эту Ρ†Ρ‹Ρ‚Π°Ρ‚Ρƒ Ρƒ тСбя: ΠžΠΏΡ‹Ρ‚ β€” это имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ своим ошибкам.

ΠŸΠΎΡ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, ΠΈΠ»ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ экспСримСнт Ссли Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π½Π΅ Π²Π΅Ρ€ΠΈΡ‚Π΅. На самом Π΄Π΅Π»Π΅ сталкивался ΠΏΠ°Ρ€Ρƒ Ρ€Π°Π· с Ρ‚Π΅ΠΌ Ρ‡Ρ‚ΠΎ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π½Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΈΡˆΡƒΡ‚, Π½ΠΎ этот Π½Π΅ Ρ‚ΠΎΡ‚ случай.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Ρ‡Π΅Ρ€Π΅Π· 14 ΠΌΠΈΠ½ΡƒΡ‚
ΠΏΠΏΡ†, я ΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΡŽ, насчёт ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ способа я ΡƒΠ²Π΅Ρ€Π΅Π½ Ρ‡Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сам Ρ‚Π°ΠΊ дСлаю!
Π° насчёт Ρ„Π»ΠΎΠ°Ρ‚Π° я знаю ΠΊΠ°ΠΊ с Π½ΠΈΠΌ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ! Π½ΠΎ Ссли Π² Π΄ΠΈΠ²Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠžΠ”Π˜Π Π΄ΠΈΠ² ΠΈ для Π½Π΅Π³ΠΎ float: right, Ρ‚ΠΎ я Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½ Ρ‡Ρ‚ΠΎ ΠΎΠ½ просто станСт с ΠΏΡ€Π°Π²ΠΎΠΉ стороны, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ! Π½ΠΎ я Π² этом Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½, поэтому ΠΈ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΡŽ Π½ΠΈΡ‡Π΅Π³ΠΎ прямо Π·Π° Ρ„Π»ΠΎΠ°Ρ‚.

Π—.Π«. твоя Ρ†Ρ‹Ρ‚Π°Ρ‚Π° с htmlbook Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π·Π° ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π·Π° ΠΎΠ΄ΠΈΠ½ Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚!

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

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ позиционирования элСмСнтов Π² CSS

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

НапримСр, элСмСнты, ΠΈΠΌΠ΅ΡŽΡ‰Π΅Π΅ Π±Π»ΠΎΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ( display: block ) ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ ΠΊΠ°ΠΊ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅ области, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… Π½Π° Π½ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ свСрху Π²Π½ΠΈΠ·.

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

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ со строчным ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ( display: inline ) выводятся ΠΈΠ½Π°Ρ‡Π΅. Они Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΈ ΠΎΡ‚ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов Π½Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π½Π° Π½ΠΎΠ²ΠΎΠΉ строкС, Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ слСво Π½Π°ΠΏΡ€Π°Π²ΠΎ. Если пространство справа Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ ΠΎΠ½ΠΈ пСрСносятся Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строку, Π° Π½Π΅ Π½Π° Π½ΠΎΠ²ΡƒΡŽ линию ΠΊΠ°ΠΊ элСмСнты с Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

Π’ CSS Π΅ΡΡ‚ΡŒ свойства, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… элСмСнты ΠΌΠΎΠΆΠ½ΠΎ Β«Π²Ρ‹Ρ€Π²Π°Ρ‚ΡŒΒ» ΠΈΠ· основного ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠΌ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π½Π΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° элСмСнтов.

CSS-свойство position

CSS свойство position β€” это ΠΎΠ΄Π½ΠΎ ΠΈΠ· свойств с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ элСмСнтов Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Π΄Π°Π½Π½ΠΎΠ΅ свойство позволяСт Β«Π²Ρ‹Π΄Π΅Ρ€Π½ΡƒΡ‚ΡŒΒ» любой элСмСнт ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π½Π° Π²Π΅Π±-страницС.

Бвойство position ΠΈΠΌΠ΅Π΅Ρ‚ 5 Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

static β€” это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Оно ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ элСмСнт находится Π² Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Но ΠΎΠ±Π»Π°ΡΡ‚ΡŒ элСмСнта Π½Π΅ всСгда сохраняСтся Π·Π° Π½ΠΈΠΌ ΠΏΡ€ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.

Π‘Ρ‚Π°Ρ‚ΠΈΡ‡Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (static)

Явная установка элСмСнту CSS-свойства position: static ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ position установлСнноС элСмСнту.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ выстраивания статично ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

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

НапримСр, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнт ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΅Π³ΠΎ исходного полоТСния ΠΊ Π½Π΅ΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ CSS свойство top ΠΈΠ»ΠΈ bottom :

Для сдвига элСмСнта Π²ΠΏΡ€Π°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ CSS свойство left ΠΈΠ»ΠΈ right :

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ 2 элСмСнту установим ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ смСстим Π΅Π³ΠΎ Π½Π° 20px Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π»Π΅Π²ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ исходного полоТСния:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

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

Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ позиционирования позволяСт Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнт ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ выполняСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ блиТайшСго ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ°.

Если Π΄Π°Π½Π½Ρ‹ΠΉ элСмСнт Π½Π΅ Π±Ρ‹Π» Π±Ρ‹ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ, Ρ‚ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ #id-3 Π²Ρ‹ΠΏΠΎΠ»Π½ΡΠ»ΠΎΡΡŒ Π±Ρ‹ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ #id-1 :

ΠŸΡ€ΠΈ этом Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π΅Π³ΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ располоТСны Π½Π° страницС, Π½Π΅ обращая Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ.

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ (высоту) Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ установки Π΅ΠΌΡƒ Π΄Π²ΡƒΡ… ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ top ΠΈ bottom ( left ΠΈ right ).

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ примСняСтся ΠΎΡ‡Π΅Π½ΡŒ часто совмСстно с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π² дизайнСрских цСлях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ для создания Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… мСню, Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ сайта ΠΈ Ρ‚.Π΄.

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

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

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΈ ΠΎΡ‚ Π½Π΅Π³ΠΎ ΠΎΠ½ΠΎ всСгда привязываСтся ΠΊ краям ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° (viewport), ΠΈ остаётся Π² Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ скроллингС страницы.

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ примСняСтся для закрСплСния Π½Π° страницС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… мСню, ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π²Π²Π΅Ρ€Ρ…Β», ΠΏΠ°Π½Π΅Π»Π΅ΠΉ с ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

БовмСстноС использованиС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‡Π΅Π½ΡŒ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ вмСстС с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

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

Π‘Π»ΠΎΠ³ Vaden Pro

Бпособы размСщСния Π±Π»ΠΎΠΊΠΎΠ² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ

Часто Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ приходится Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ группирования ΠΈ выравнивания ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° срСдствами CSS. БСгодня ΠΌΡ‹ рассмотрим основныС способы размСщСния элСмСнтов Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ряд.

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΏΡ€ΠΈΠ·Π²Π°Π½ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ Π² освоСнии ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² вСрстки web-страниц.

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Из Ρ‡Π΅Π³ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹

БущСствуСт нСсколько способов располоТСния структурных элСмСнтов Π² ряд Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ плоскости. НаиболСС ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ, с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния практичСского примСнСния, ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈΠΌΠ΅Π΅Ρ‚ свои прСимущСства, области примСнСния ΠΈ нСдостатки. Рассмотрим ΠΈΡ… ΠΏΠΎ порядку.

«Для Ρ€Ρ‹Π²ΠΊΠ°Β» ΠΈΠ»ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚Π΅ΠΎΡ€ΠΈΠΈ

ВсС структурныС элСмСнты HTML ΠΌΠΎΠΆΠ½ΠΎ условно Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π°:

Π˜Π½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅ (встроСнныС) – Ρ‚ΠΈΠΏΠ° img, span ΠΈ ΠΈΠΌ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅. Π£ нас Π½Π΅Ρ‚ возмоТности ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… Ρ„ΠΎΠ½ ΠΈ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠΌ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ – Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰ΠΈΠ΅ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, всСгда Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ с Π½ΠΎΠ²ΠΎΠΉ строки – p, h, div.

Наглядный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ встроСнных ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… структур ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

ΠœΠ΅Ρ‚ΠΎΠ΄ Β«FloatΒ»

Как ΡƒΠΆΠ΅ извСстно (см. Π²Ρ‹ΡˆΠ΅), Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт размСщаСтся с Π½ΠΎΠ²ΠΎΠΉ строки Π²Π½Π΅ зависимости ΠΎΡ‚ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Π΅ΠΌΡƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ (width). По этому, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ div-Π°, Π² рядок Π±Π»ΠΎΡ‡ΠΊΠΈ Π½Π΅ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ.

НаиболСС популярный (особСнно срСди Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ²), ΠΌΠ΅Ρ‚ΠΎΠ΄ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ это использованиС свойства float.

CSS свойство float ΠΎΠ±Ρ€Π΅Π»ΠΎ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Ρ†Π΅Π½Π½ΠΎΡΡ‚ΡŒ послС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ способа вСрстки ΠΊ Π±Π»ΠΎΡ‡Π½ΠΎΠΌΡƒ.

Float: left (right) трансформируСт Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт Π² ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ (ΠΏΡ€Π°Π²ΠΎΠΌΡƒ) ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ устанавливаСт ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ справа (слСва) тСкстом ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами.

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, создадим Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² ряд:

И внСшнюю Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй с ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ содСрТимым:

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π±Π»ΠΎΠΊΠ°, располоТСнныС Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ряд ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Π΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Иногда Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ Π±Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. ИзмСним ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Ρ€Π²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ элСмСнтов с ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ мСста, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ строчку:

Π’ рассмотрСнном Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΌΡ‹ Π·Π°Π΄Π°Π²Π°Π»ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ отступа margin-right. Но Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Ρƒ вас ΠΏΡ€ΠΈ вСрсткС страницы Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° Π·Π°Π΄Π°Ρ‡Π°: Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ Π² ряд, Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…, Π΄Π° ΠΈ Π΅Ρ‰Π΅ Ρ‡Ρ‚ΠΎΠ±Ρ‹ отступы Π±Ρ‹Π»ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ снаруТи?

Алгоритм дСйствий ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρƒ:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Ну Ρ‡Ρ‚ΠΎ ΠΆΠ΅, всСх практичСских ситуаций Π½Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΠΈΡˆΡŒ, ΠΏΠΎ этому ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΎΠ±Ρ‰ΠΈΠΌ особСнностям.

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

ΠœΠ΅Ρ‚ΠΎΠ΄ Β«Inline-blockΒ»

Как строчныС Ρ‚Π°ΠΊ ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты ΠΈΠΌΠ΅ΡŽΡ‚ свои прСимущСства ΠΈ нСдостатки Π² контСкстС ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ Ρ€Π΅ΡˆΠ°Π΅ΠΌΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ. А Ρ‡Ρ‚ΠΎ Ссли ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΈΡ… прСимущСства?

ВстрСчайтС, гвоздь ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ – свойство display: inline-block.

display: inline-block Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π±Π»ΠΎΡ‡Π½ΠΎ-строчный элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎ сути являСтся строчным, Π½ΠΎ сохраняСт Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ свойства – позволяСт ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ поля, отступы ΠΈ Ρ‚.Π΄.

Π‘Π»ΠΎΡ‡Π½ΠΎ-строчный элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства:

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания простого Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню, содСрТащСго ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ ссылку.

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‚Π°ΠΊΡƒΡŽ ΠΌΠ΅Π½ΡŽΡˆΠΊΡƒ:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Как Π²ΠΈΠ΄ΠΈΠΌ, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ ΠΊΡ€ΠΈΠ²ΠΎΠ²Π°Ρ‚ΠΎ. Но Ρ€Π°ΡΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΌΡ‹ Π½Π΅ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Ρ‹, ΠΏΠΎ-этому примСняСм ΠΊ нашим Π΄ΠΈΠ²Π°ΠΌ CSS свойство vertical-align (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ см. Π½ΠΈΠΆΠ΅):

Π’Π΅ΠΏΠ΅Ρ€ΡŒ наша навигационная панСль Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΠ»Π°ΡΡŒ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π»ΠΈΠ½ΠΈΠΈ:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ являСтся ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ, Π½ΠΎ я ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Π½Π° Π΅Π³ΠΎ основС Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ настоящий ΡˆΠ΅Π΄Π΅Π²Ρ€.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Π°:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

Π•ΡΡ‚ΡŒ нСсколько способов ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π·Π°Π·ΠΎΡ€Ρ‹:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ примСнСния любого ΠΈΠ· Π²Ρ‹ΡˆΠ΅ пСрСчислСнных ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ структура:

ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css. Π€ΠΎΡ‚ΠΎ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² css

ΠœΠ΅Ρ‚ΠΎΠ΄ Β«TableΒ»

Π’Π°Π±Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя Π±Ρ‹Π» стандартом вСрстки, Ρ‡Ρ‚ΠΎ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ объяснялось простотой ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΠΎΠ½ΡΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, ΠΈΠΌΠ΅Π½Π½ΠΎ это ΠΈ послуТило ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ появлСния Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ форматирования Π² CSS.

Бвойства display: table (table-cell, inline-table), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов Π±Π΅Π· примСнСния HTML Ρ‚Π°Π±Π»ΠΈΡ†.

Для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ размСщСния Π±Π»ΠΎΠΊΠΎΠ² Π½Π°ΠΌ понадобится Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ свойство display: table, ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты (ячСйки), ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ свойство display: table-cell:

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

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

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