Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ 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
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π΅Π»Π°Π΅Ρ Π΄Π²Π΅ Π²Π΅ΡΠΈ:
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΡΡΠ΅Π·Π°Π΅Ρ Ρ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π·Π°Π½ΠΎΠ²ΠΎ. ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ»ΠΎ.
- ΠΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ 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 :

ΠΠΎ ΠΈ ΡΡΠΎ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ. ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° Π²ΡΠ΅ ΡΠ»ΠΎΠΈ Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π° ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² β ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π°. ΠΠΎΡΡΠΎΠΌΡ Π½ΡΠΆΠ΅Π½ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ div ΠΏΠΎ ΡΠ΅Π½ΡΡΡ.
Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠ΅Π²
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠΉ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ ΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π΄ΡΡΠ³ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³Π° ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π°. Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ margin Π½ΡΠ»Π΅Π²ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠ°ΠΌ ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΈ auto ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ( margin: 0 auto ):

ΠΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ΅Π½ΡΡΠΎΠ²Π°ΡΡ div ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. Π Π΅ΡΠ»ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π»ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ ΡΠ»ΠΎΡ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ( ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π΅Π³ΠΎ ). Π’ΠΎ Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΅Π³ΠΎ css ΠΊΠ»Π°ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π²ΡΡΡΡΠΎΡΡΡΡ ΡΡΡΠΎΠ³ΠΎ Π² ΡΡΠ΄ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅. Π ΠΈΡ
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΠΏΡΠΈ Π»ΡΠ±ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ div ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ:

Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠ΅Π² Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΡΠ΄ Π½ΠΎΠ²ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² 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 ΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
: 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 ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΊΡΠΎΠ»Π» Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎ Π±Ρ Π½Π°ΡΠ° ΡΠΎΡΠΊΠ° Β«ΠΏΡΠ΅ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»Π°Β» Π½Π°Ρ, ΠΈ Π²ΡΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»Π°ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, ΠΊΠ°ΠΊ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅.

ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΡ 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 Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠΈΠΏΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΡΡΡΡΠΊΡΡΡΡ ΡΠ°ΠΉΡΠ°:
- Π’Π°Π±Π»ΠΈΡΠ½Π°Ρ;
- ΠΠ»ΠΎΡΠ½Π°Ρ.
Π’Π°Π±Π»ΠΈΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° Π±ΡΠ»Π° Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅ΠΉ Π΅ΡΠ΅ Π½Π° Π·Π°ΡΠ΅ Π·Π°ΡΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. Π Π΅Π΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ½Π΅ΡΡΠΈ ΡΠΎΡΠ½ΠΎΡΡΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΎ, ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ½Π° ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ ΡΠ²Π½ΡΠΌΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°ΠΌΠΈ. ΠΠ»Π°Π²Π½ΡΠΌΠΈ ΠΈΠ· Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΌΠ½ΠΎΡΡΡ ΠΊΠΎΠ΄Π° ΠΈ Π½ΠΈΠ·ΠΊΠ°Ρ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
ΠΡΠΎΠΌΠ΅ Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π±Π»ΠΎΡΠ½ΠΎΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π° html . Π ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΈ Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² CSS .
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ Π²Π΅ΡΡΡΠΊΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΡΡΡΠΊΡΡΡΠΈΠ·Π°ΡΠΈΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ Π΅Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡ.
ΠΠ»ΠΎΡΠ½ΠΎΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅Π³ΠΎΠ²
Π‘ΡΠ΅Π΄ΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠ΅Π² Π»ΡΡΡΠ΅ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ΅Π΄ΡΡΠ² ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ. ΠΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ CSS, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠΌ Π·Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
float: left | right | none | inherit ,
ΠΠ΄Π΅:
- left β Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΊΡΠ°Π½Π°. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΏΡΠ°Π²Π°;
- right β Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°Π²Π°, ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ β ΡΠ»Π΅Π²Π°;
- none β ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ;
- inherit β Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² div Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΡΠ°ΡΠ°Π΅ΠΌΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΡΠ΅ΡΠΈΠΉ div ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Ρ float Π½Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ center . Π ΠΏΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ Π½ΠΎΠ²ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ ΠΎΠ½ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠΎΡΡΠΎΠΌΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π»ΠΈΡΡ Π²ΡΠ΅ΠΌ ΡΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ Π·Π°Π΄Π°ΡΡ float: left :
ΠΠΎ ΠΈ ΡΡΠΎ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ. ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° Π²ΡΠ΅ ΡΠ»ΠΎΠΈ Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΡΠ΄ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π° ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² β ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π°. ΠΠΎΡΡΠΎΠΌΡ Π½ΡΠΆΠ΅Π½ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ div ΠΏΠΎ ΡΠ΅Π½ΡΡΡ.
Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠ΅Π²
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠΉ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ ΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π΄ΡΡΠ³ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³Π° ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π°. Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ margin Π½ΡΠ»Π΅Π²ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠ°ΠΌ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΈ auto ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ( margin: 0 auto ):
ΠΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ΅Π½ΡΡΠΎΠ²Π°ΡΡ div ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. Π Π΅ΡΠ»ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π»ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ ΡΠ»ΠΎΡ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ( ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π΅Π³ΠΎ ). Π’ΠΎ Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΅Π³ΠΎ css ΠΊΠ»Π°ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π²ΡΡΡΡΠΎΡΡΡΡ ΡΡΡΠΎΠ³ΠΎ Π² ΡΡΠ΄ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅. Π ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΠΏΡΠΈ Π»ΡΠ±ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ div ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ:
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠ΅Π² Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΡΠ΄ Π½ΠΎΠ²ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² 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 ΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ : 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 ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΊΡΠΎΠ»Π» Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎ Π±Ρ Π½Π°ΡΠ° ΡΠΎΡΠΊΠ° Β«ΠΏΡΠ΅ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»Π°Β» Π½Π°Ρ, ΠΈ Π²ΡΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»Π°ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, ΠΊΠ°ΠΊ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΡ 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 Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½.