Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position | CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΠ°ΡΠΈΡΠ½ΠΎ. Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ, ΡΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π½Π° ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° background position CSS: relative, absolute, fixed, sticky.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΡΠΈ ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ, Π² CSS3 Π±ΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π΅ΡΠ΅ Π΄Π²Π° Π½ΠΎΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°: page ΠΈ center.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ (Π±ΡΠ»ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ Π½Π΅ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅), Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ: top, right, bottom, ΠΈ left. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (position: relative) ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΈΡ
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΡ
ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Π΅Ρ ΡΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π²ΠΈΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. Π’ΠΎΡΠΊΠΎΠΉ ΠΎΡΡΡΠ΅ΡΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΡΠ³Π»Π°:
Β
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊ Π½Π΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position: relative. ΠΡΠ½ΠΊΡΠΈΡΠ½ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ½ΡΡ Π½Π° 35 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΈ 35 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
Β
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ ΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠ²ΡΠΉ Π½ΠΎΠΌΠ΅Ρ Π² Β«ΡΡΠ΅ΠΊΠ΅Β» ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈ Π»ΡΠ±ΠΎΠ΅ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ, Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ΅ Π²ΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΡΠ»Π΅ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ (position: absolute), ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠΆΠ΅ Π·Π°Π΄Π°Π½Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS position relative Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (position: relative). ΠΠ°ΡΠ°Π»ΠΎΠΌ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. Π ΠΎΠ·ΠΎΠ²ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΌΠ΅ΡΠ΅Π½ Π²Π»Π΅Π²ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π» Π΅Π³ΠΎ:
Β
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Β
Π‘Π΅ΡΡΠΉ ΠΊΠΎΠ½ΡΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°. ΠΠ»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ position: relative, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ Π·Π°Π΄Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ·ΠΎΠ²ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΠΎΠ½ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ΅ΠΊΡΡ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° Π½ΠΈΠΊΠΎΠ³Π΄Π° ΠΈ Π½Π΅ Π±ΡΠ»ΠΎ Π² ΠΏΠΎΡΠΎΠΊΠ΅:
Β
Π ΠΎΠ·ΠΎΠ²ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ (ΡΠ΅ΡΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ). ΠΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ: top: 30px, right: 40px.
Β
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈ Π½ΠΈ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position, ΡΠΎ ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ CSS position fixed ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ½ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ, ΡΡΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ: ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. ΠΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ: ΠΎΠ½ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π² ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π° Π²ΠΈΠ΄Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° sticky, center ΠΈ page Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠΎ ΡΠ»Π°Π±ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Β«ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠΈΠΌΒ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ (position: sticky) ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π³ΠΈΠ±ΡΠΈΠ΄ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
.element { position: sticky; top: 70px; }
ΠΠ°Π΄Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ ΠΈΠΌΠ΅Π» position: relative, ΠΏΠΎΠΊΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΡΠΊΠΈ Π² 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²ΡΡΠ΅, ΡΠΎ ΠΎΠ½ Π·Π°ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π² 70 ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΎΡ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ, ΠΏΠΎΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Β«ΠΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠΈΠΉΒ» ΡΡΡΠ΅ΠΊΡ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript, ΠΈ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ sticky ΡΡΠ°Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS.
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠΌΠ΅Π½Ρ: Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Β«ΠΏΠΎΡΠΎΠ³Β» Π΄Π»Ρ Β«ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠ΅Π³ΠΎΒ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΈ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ Π² ΡΠΎΡΠ½ΠΎΡΡΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ center ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ ΡΠ΄Π°Π»Π΅Π½ ΠΈΠ· Β«ΡΡΠ΅ΠΊΠ°Β» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π²ΠΈΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π΅Π³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ page ΡΠ²ΠΎΠΉΡΡΠ²Π° position Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ Π½Π΅ΡΡΠ½ΠΎ. ΠΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΠΏΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΌ Π²ΡΠ²ΠΎΠ΄ΠΎΠΌ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Regions.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ CSS position absolute, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΡΡΠΏΡ (margins),ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°ΠΉΠΌΠ΅Ρ ΡΡΠΎΠ»ΡΠΊΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ, ΠΈ ΠΎΠ½ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ (width) Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ Π»Π΅Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π½Π° Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π° ΠΏΡΠ°Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ β Π½Π° ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ right ΠΈ left:
position: absolute; left: 0; right: 0;
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΡΡΠ½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² top ΠΈ bottom:
position: relative; top: 0; bottom: 0;
Π ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ CSS Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, ΡΠΎ:
- Π΅ΡΠ»ΠΈ ΠΎΠ±Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° top ΠΈ bottom ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, ΡΠΎ top ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΠΈΠ»Ρ;
- Π΅ΡΠ»ΠΈ right ΠΈ left ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, left Π²ΡΠΈΠ³ΡΡΠ²Π°Π΅Ρ;
- Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ direction ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ rtl (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°ΡΠ°Π±ΡΠΊΠΈΠΉ), ΡΠΎ Β«ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅ΡΒ» right.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ. Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
position: static | relative | absolute | sticky | center | page | fixed
ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: static.
ΠΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ: Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π°Π½ΠΈΠΌΠ°ΡΠΈΡΡ : Π½Π΅Ρ.
ΠΠ»Π³ΠΎΡΠΈΡΠΌ CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ»ΠΎΠΊ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ.
ΠΠΎΠ·ΠΈΡΠΈΡ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΠ±ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position: relative ΠΊ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ:
- table-row-group, table-header-group, table-footer-group ΠΈ table-row ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅ΠΉ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠ°Π±Π»ΠΈΡΡ. ΠΡΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ, ΡΠΎ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ΅ΠΉΠΊΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ;
- table-column-group, table-column Π½Π΅ ΡΠΌΠ΅ΡΠ°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΡΠΎΠ»Π±Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: relative;
- table-caption ΠΈ table-cell ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π²Π½ΡΡΡΠΈ ΡΠ°Π±Π»ΠΈΡΡ. ΠΡΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΠ° ΡΠ°Π±Π»ΠΈΡΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈΠ»ΠΈ ΡΡΡΠΎΠΊ, ΡΠΎ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΡΡ ΡΠΎΡΡΠ°Π²Π½Π°Ρ ΡΡΠ΅ΠΉΠΊΠ°.
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top, right, bottom ΠΈ left, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈΠ·ΡΠΌΠ°ΡΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π²Π»ΠΈΡΠ½ΠΈΡ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΡΡΠΏΡ, Π΅ΡΠ»ΠΈ ΡΡΠΈ ΠΎΡΡΡΡΠΏΡ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ
ΠΠΎΠ·ΠΈΡΠΈΡ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΊΡ (ΠΊΠ°ΠΊ position: relative). ΠΠ»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΈ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Β«ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π½ΠΈΠ΅ΠΌΒ», ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ Π±Π΅Π· ΡΡΠ΅ΡΠ° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡ ΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ position: sticky ΠΊ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΡ position: relative.
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top, right, bottom ΠΈ left. ΠΠ»ΠΎΠΊ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈΠ·ΡΠΌΠ°ΡΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΊΠ°ΠΊ ΠΈ absolute). Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΡΡΠΏΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ.
ΠΠΎΠ·ΠΈΡΠΈΡ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΡΡ. Π ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³ΠΈΠΎΠ½Π° Π²Π½Π΅ΡΠ½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.
ΠΠ½Π°ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ.
ΠΠ°ΠΊ ΠΈ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΎΡΡΡΡΠΏΡ Π±Π»ΠΎΠΊΠ° Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΠΈΠΊΠ°ΡΡΡΡ Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ.
.parent { position: relative; } .child { position: absolute; top: 10px; left: 30px; } /* ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° Π²ΠΈΠ΄Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° */ header { position: fixed; top: 0; left: 0; right: 0; } /* ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 100 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ */ .sticky { position: sticky; top: 100px; }
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ Π΄Π΅ΠΌΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠ΅ΡΡΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: relative, absolute, fixed ΠΈ Π΄Π°ΠΆΠ΅ sticky:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ : Chrome, Firefox, Safari, Opera, Internet Explorer, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π° Android ΠΈ iOS.
ΠΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ fixed ΠΈ sticky ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ ΡΡΠ΅Π΄ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠΎΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Π΄Π»Ρ ΡΡΠΈΡ Π΄Π²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
<iframe src="http://caniuse.com/css-fixed/embed/" align="left" scrolling="no"> </iframe>
Π Internet Explorer ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π΅ΡΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ:
<iframe src="http://caniuse.com/css-sticky/embed/" align="left" scrolling="no"> </iframe>
Β«ΠΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠ΅Π΅Β» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Firefox 26 (Gecko 26) ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° layout.css.sticky.enabled Π² about:config Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ true.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ center ΠΈ page Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½ΠΈ ΠΎΠ΄Π½ΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.
Π Gecko, Π΅ΡΠ»ΠΈ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <table> Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ <div>, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position: absolute, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠΉΡΡ Π²Π½ΡΡΡΠΈ ΡΠ°Π±Π»ΠΈΡΡ, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ <div>, Π° Π½Π΅ ΡΠ°Π±Π»ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ. ΠΡΠΎ ΠΎΡΠΈΠ±ΠΊΠ°, ΠΈ ΠΎΠ½Π° Π½Π΅ Π±ΡΠ»Π° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π°.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position: absolute Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div> Ρ display: table-cell Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ <div>, ΡΡΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠΌΡ Π²ΡΡΠ΅.
Β
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«PositionΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄ΡΡΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.ΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position | CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ).
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ°ΠΊΠΈΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠ°ΠΊ top, right, bottom ΠΈ left, ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΠΈΠΆΠ΅ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
- position: relative (ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ (ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΠΏΡΠ°Π²ΠΎ). ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ left: 200px;
- position: absolute (ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° (ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΠΏΡΠ°Π²ΠΎ), ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ΅Π΄ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — static, ΠΈΠ½Π°ΡΠ΅ ΠΎΡΡΡΡΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΊΠ°ΠΊ ΠΏΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ position fixed). ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ left: 40px.
- position: fixed (ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΠΏΡΠ°Π²ΠΎ). ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ left: 40px.
- position: static (ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ — ΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ). ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° left Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅ CSS Π² ΡΡΠ°ΡΡΠ΅ «ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS».
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
CSS ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
position:"static | absolute | fixed | relative | initial | inherit" ;
JavaScript ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
object.style.position = "absolute"
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
absolute | ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ΅Π΄ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — static, ΠΈΠ½Π°ΡΠ΅ ΠΎΡΡΡΡΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΊΠ°ΠΊ ΠΏΡΠΈ position: fixed). |
fixed | Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. |
static | Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΠΏΠΎΡΠΎΠΊΠ΅ HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
relative | ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΠ΅ΡΡΠΈΡ CSS
CSS2ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ
ΠΠ΅Ρ.ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅
ΠΠ΅Ρ.ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
<!DOCTYPE html> <html> <head> <title>ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position</title> <style> body { background-color:khaki; /* Π·Π°Π΄Π°ΡΠΌ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΡΠ²Π΅ΡΠ° Ρ Π°ΠΊΠΈ */ height:2000px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ } h2 { position:static; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ } .relative { position:relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ left : 200px; * Π·Π°Π΄Π°ΡΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π»Π΅Π²ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ */ width 200px; /* Π·Π°Π΄Π°ΡΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° */ height: 250px; /* Π·Π°Π΄Π°ΡΠΌ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° */ border 5px solid; /* Π·Π°Π΄Π°ΡΠΌ ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π³ΡΠ°Π½ΠΈΡ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½Ρ 5px */ background-color:orange; /* Π·Π°Π΄Π°ΡΠΌ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° */ } .absolute { position:absolute; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ left : 40px; * Π·Π°Π΄Π°ΡΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π»Π΅Π²
position | CSS | WebReference
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | static |
---|---|
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ?
position: absolute | fixed | relative | static | sticky
ΠΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΡΠΈΠΌΠ΅Ρ | |
---|---|---|
<ΡΠΈΠΏ> | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. | <ΡΠ°Π·ΠΌΠ΅Ρ> |
AΒ &&Β B | ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. | <ΡΠ°Π·ΠΌΠ΅Ρ> && <ΡΠ²Π΅Ρ> |
A | B | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½Π°Π΄ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΡ (A ΠΈΠ»ΠΈ B). | normal | small-caps |
A || B | ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. | width || count |
[ ] | ΠΡΡΠΏΠΏΠΈΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. | [ crop || cross ] |
* | ΠΠΎΠ²ΡΠΎΡΡΡΡ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·. | [,<Π²ΡΠ΅ΠΌΡ>]* |
+ | ΠΠΎΠ²ΡΠΎΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·. | <ΡΠΈΡΠ»ΠΎ>+ |
? | Π£ΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠΈΠΏ, ΡΠ»ΠΎΠ²ΠΎ ΠΈΠ»ΠΈ Π³ΡΡΠΏΠΏΠ° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ. | inset? |
{A, B} | ΠΠΎΠ²ΡΠΎΡΡΡΡ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ A, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ B ΡΠ°Π·. | <ΡΠ°Π΄ΠΈΡΡ>{1,4} |
# | ΠΠΎΠ²ΡΠΎΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π· ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ. | <Π²ΡΠ΅ΠΌΡ># |
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- absolute
- ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ»ΠΎΠ²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅Ρ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom, ΡΠ°ΠΊΠΆΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊ, Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ static ΠΈΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΠΎΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄ΡΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ relative, ΡΠΎ ΠΎΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄ΡΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- fixed
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ absolute, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom ΡΠΎΡΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
- relative
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
- static
- Π‘ΡΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ.
- sticky
- ΠΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ. ΠΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΈΠΌΠ΅Ρ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style>
.layer1 {
position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
background: #f0f0f0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
height: 200px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */
}
.layer2 {
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
bottom: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ */
right: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src="image/girl.jpg" alt="ΠΠ΅Π²ΠΎΡΠΊΠ°">
</div>
</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
ΠΠ±ΡΠ΅ΠΊΡ.style.position
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΡΠ°ΡΠ·Π΅Ρ Safari ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ -webkit-sticky.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ?
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
ΠΠ°ΠΆΠ΄Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π΄ΠΈΠΉ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ.
- Recommendation (Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½Π° W3C ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡ.
- Candidate Recommendation (ΠΠΎΠ·ΠΌΠΎΠΆΠ½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π³ΡΡΠΏΠΏΠ°, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ°Ρ Π·Π° ΡΡΠ°Π½Π΄Π°ΡΡ, ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΠΌ ΡΠ΅Π»ΡΠΌ, Π½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
- Proposed Recommendation (ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π° ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΠΎΠ½ΡΡΠ»ΡΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ²Π΅ΡΠ° W3C Π΄Π»Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ.
- Working Draft (Π Π°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) β Π±ΠΎΠ»Π΅Π΅ Π·ΡΠ΅Π»Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ° ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΏΡΠ°Π²ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ.
- Editor’s draft (Π Π΅Π΄Π°ΠΊΡΠΎΡΡΠΊΠΈΠΉ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ) β ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ° ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΎΠΊ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
- Draft (Π§Π΅ΡΠ½ΠΎΠ²ΠΈΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ) β ΠΏΠ΅ΡΠ²Π°Ρ ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
ΠΡΠ°ΡΠ·Π΅ΡΡ ?
static, relative, absolute | 4 | 12 | 1 | 4 | 1 | 1 |
fixed | 7 | 12 | 1 | 4 | 1 | 1 |
sticky | 16 | 56 | 42 | 6.1 | 32 |
static, relative, absolute | 1 | 1 | 6 | 1 |
fixed | 1 | 1 | 6 | 1 |
sticky | 32 | 6.1 |
ΠΡΠ°ΡΠ·Π΅ΡΡ
Π ΡΠ°Π±Π»ΠΈΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ.
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ;
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½Π΅ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ;
- Β β ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π»ΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ Π²ΡΠ΅ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π΅ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
Π§ΠΈΡΠ»ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΓΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 29.08.2017
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
position | CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
12.0+ | 7.0+ | 1.0+ | 1.0+ | 4.0+ | 1.0+ |
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π³ΠΎ, ΠΏΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, left, right, bottom ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 0, ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ auto, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | static |
---|---|
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ: | ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ: | Π½Π΅Ρ |
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ: | Π½Π΅Ρ |
ΠΠ΅ΡΡΠΈΡ: | CSS2 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | object.style.position=»absolute» |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: static | absolute | fixed | relative | inherit;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
static | ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² ΠΊΠΎΠ΄Π΅ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² top, left, right ΠΈ bottom ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ Π΄Π°ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. |
absolute | ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ, ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π° Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ½ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΡΠ»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ (Π½Π΅ static) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠ΅Π΄ΠΊΠ°. ΠΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Ρ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ (relative, absolute ΠΈΠ»ΠΈ fixed), ΡΠΎΠ³Π΄Π° ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. |
fixed | ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ, ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π° Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ½ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΡΠ»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅, Ρ. Π΅. Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. |
relative | ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΡΠ°ΡΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅. ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ½ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΡΠ»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΎΠ΄Π½Π°ΠΊΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, Π½Π° Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΡΠ°ΡΡΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. |
inherit: | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΡΠΈΠΌΠ΅Ρ
div#myDIV {
width: 100px;
height: 100px;
background: red;
left: 10px;
top: 100px;
position: static;
}
5 Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π½Π΅ Π·Π½Π°Π»ΠΈ ΠΎ ΡΠΈΠΏΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ°Π»ΠΎΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ Π°ΡΠΏΠ΅ΠΊΡΠΎΠ², ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS. ΠΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ ΡΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π’Π°ΠΊΠΈΠ΅, ΠΊΠ°ΠΊ CSS position relative.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS position ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°ΡΡ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Static β ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π’ΠΎ Π΅ΡΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π·Π°Π΄Π°Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠΈΠΏ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
- position relative CSS;
- absolute;
- fixed;
- sticky.
Π’ΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½ΡΠΆΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
- top;
- right;
- bottom;
- left.
ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² β auto.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ absolute ΠΈΠ»ΠΈ fixed, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ Π² ΡΡΠ΅ΠΊΠ΅.
ΠΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
- ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. Π‘ΠΎΡΠ΅Π΄Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΠΎΠ²Π½Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ;
- ΠΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ CSS position relative ΠΈΠ»ΠΈ stickily ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΈΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. Π‘ΠΎΡΠ΅Π΄Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. ΠΠΎ ΠΏΠΎΠ΄ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΎΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΌΠ΅ΡΡΠ°. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ, ΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°;
- fixed (ΠΏΠΎΠ΄ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ) β Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅;
- sticky β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ»ΠΎΡΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ, ΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΡΠ΅ ΡΡΠΈ ΡΠΈΠΏΡ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ Π΄Π΅ΠΌΠΎ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ sticky ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π» (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, stickyfill), ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ ΡΠΈΠΏ absolute, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ static. ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΡΡΡΠ΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΡΠΎΠ³Π΄Π° ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎ-Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ Π·Π΅Π»Π΅Π½ΠΎΠΌΡ ΠΏΠΎΠ»Ρ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ absolute ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ bottom:0 ΠΈ left:0. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π΅Π³ΠΎ ΠΏΡΡΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ (ΠΊΡΠ°ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅).
Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ jumbotron. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ absolute ΠΈΠ»ΠΈ fixed, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ°Π²Π½ΡΠΌ none. ΠΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ position relative CSS, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π½ΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π΄Π²Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΊΡΠ°ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΠΎΠ½ΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float. Π ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π΅Π»Π΅Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΊΠ°ΠΊ absolute ΠΈΠ»ΠΈ fixed, ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ°Π΅Ρ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π΄Π²Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΅ΡΠ²ΡΠΉ ΠΈΠ· Π½ΠΈΡ (Π·Π΅Π»Π΅Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅) ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (Ρ.Π΅. div). ΠΡΠΎΡΠΎΠΉ (ΠΊΡΠ°ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅) ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (span). ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Ρ Π½Π°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π΅Π»Π΅Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅.
ΠΡΠ°ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° width ΠΈ height, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π±Π»ΠΎΡΠ½ΡΠΌ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. Π ΡΡΠΎ ΠΏΡΡΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Ρ.Π΅. ΠΎΠ½ Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΠΈΠ»ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²).
ΠΡΠ»ΠΈ ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ absolute ΠΈΠ»ΠΈ fixed, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π΄Π²Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»Ρ ΡΠΎΠΏΡΠΈΠΊΠ°ΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, ΠΎΠ½ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠ΅Π΅ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΡΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ. Π’Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»Π΅ΠΉ.
ΠΠΎΠ»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Π½ΠΈ Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎ-Π²Π΅ΡΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»Ρ 20px. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ Π΅Π³ΠΎ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΡΡΡ Ρ Π²Π΅ΡΡ Π½ΠΈΠΌ ΠΏΠΎΠ»Π΅ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π²Π½ΠΎ 20px. ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π²Π΅ΡΡ Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅ΡΡΡ Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΏΠΎΠ»Π΅ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, Π° Π½Π΅ CSS position relative top left.
Π§ΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅ΠΉ, Π½ΡΠΆΠ΅Π½ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΡΡΡΡΠΏ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΊΠ°. ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΠΈΠ»ΠΈ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΡΠ³ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ clearfix (Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅) Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ CSS position relative ΠΏΠΎ ΡΠ΅Π½ΡΡΡ? ΠΡΠ»ΠΈ Π΄Π°, ΡΠΎ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSS (ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ²), ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅.
ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΡΠ²Π»ΡΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ:
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ β ΡΡΠΎ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ (Π΄Π»Ρ left ΠΈΠ»ΠΈ right) ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ (Π΄Π»Ρ top ΠΈ bottom) Π±Π»ΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ stickily ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ (left ΠΈΠ»ΠΈ right) ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ (Π΄Π»Ρ top ΠΈ bottom) ΠΎΠΊΠ½Π°. ΠΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ (Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ left ΠΈΠ»ΠΈ right) ΠΈ Π²ΡΡΠΎΡΡ (Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ top ΠΈ bottom) Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π½ΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎ ΠΈΠ»Π»ΡΡΡΡΠΈΡΡΠ΅Ρ ΡΡΡ ΡΠ°Π·Π½ΠΈΡΡ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠΎΠ³Π΄Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½ΠΎ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ.
ΠΠΎ ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΏΡΠΎΡΠ΅Π½ΡΡ, ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΡΠΈΡΡΠ½ΠΊΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ CSS position relative (Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ):
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ transform (Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ translate) ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², Π° Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΉ).
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π²Π°ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS.
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«5 Things You Might Not Know About the CSS Positioning TypesΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄ΡΡΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.ΡΡ
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
CSS ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: static | absolute | fixed | relative | initial | inherit;
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
static | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. |
absolute | ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠ»ΠΎΠ²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π½Π΅Ρ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom, ΡΠ°ΠΊΠΆΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ static ΠΈΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ fixed, relative ΠΈΠ»ΠΈ absolute, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
fixed | ΠΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ absolute, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom ΡΠΎΡΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. |
relative | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π° «left: 20px» Π΄ΠΎΠ±Π°Π²ΠΈΡ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊ Π»Π΅Π²ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
inherit | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
ΠΡΠΈΠΌΠ΅Ρ
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <h3>
h3 {
position: absolute;
left: 100px;
top: 150px;
}
position Π² CSS | Π£ΡΠ΅Π±Π½ΡΠ΅ ΠΊΡΡΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position β ΡΡΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ ΠΌΠΎΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ. ΠΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ΅ΡΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- static (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- relative
- absolute
- fixed
Π§Π°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π°ΡΡΠ΄Ρ Ρ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ:
static
ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: ΡΡΠ°ΡΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΊΡ. ΠΡΠ±ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ left, right, top ΠΈΠ»ΠΈ bottom Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π²Π»ΠΈΡΠ½ΠΈΡ.
relative
ΠΠΎΠ³Π΄Π° position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
HTML
<p>ΠΠ΄Π²Π° ΠΌΡ ΡΠΏΡΡΡΠ°Π»ΠΈ Π»ΠΎΠ΄ΠΊΡ, ΠΠΆΠ° ΡΠ²Π»ΡΠΊ ΠΌΠ΅Π½Ρ Π² Π΄ΠΆΡΠ½Π³Π»ΠΈ, ΠΈ Π²ΡΠΊΠΎΡΠ΅ ΠΌΡ
Π²ΡΡΠ»ΠΈ Π½Π° ΡΠ·ΠΊΡΡ, Ρ
ΠΎΡΠΎΡΠΎ ΡΡΠΎΠΏΡΠ°Π½Π½ΡΡ ΡΡΠΎΠΏΡ.</p>
<p>Π― ΡΠΈΠ½ΡΠ»ΡΡ Π²Π²Π΅ΡΡ
, ΠΏΡΡΠ°ΡΡΡ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΡΠΈΠ»ΠΈΠΈ
Π΄ΠΎΡΡΠ½ΡΡΡΡΡ Π΄ΠΎ ΡΡΠΊΠΈ ΠΠΆΠ°, Π½ΠΎ ΡΠΈΡΠΈΠΊ Ρ ΡΠ°ΠΊΠΎΠΉ ΡΠΈΠ»ΠΎΠΉ ΡΠ²Π°Π½ΡΠ» ΠΊΠΎΠΏΡΡ Π½Π° ΡΠ΅Π±Ρ,
ΡΡΠΎ ΠΎΠ½ΠΎ Π²ΡΡΠ²Π°Π»ΠΎΡΡ ΠΈΠ· ΡΡΠΊ ΠΌΠ΅Π·ΠΎΠΏΠ°, Π΅Π΄Π²Π° Π½Π΅ ΡΠΎΡΠ²Π°Π²ΡΠ΅Π³ΠΎΡΡ ΡΠΎ ΡΠΊΠ°Π»Ρ,
Π° Ρ, Π²ΡΡ Π΅ΡΡ ΡΠ΅ΠΏΠ»ΡΡΡΡ Π·Π° Π΄ΡΠ΅Π²ΠΊΠΎ, ΠΏΠΎΠ»Π΅ΡΠ΅Π» Π²Π½ΠΈΠ·, ΠΏΡΡΠΌΠΎ Π²
ΡΠ°ΡΠΊΡΡΡΡΡ ΠΏΠ°ΡΡΡ Π·Π²Π΅ΡΡΠ³ΠΈ.</p>
<p>ΠΠ½ ΡΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΡΠ» Π½Π° Π±Π΅Π³, Π·Π°ΠΌΠ°Ρ
ΠΈΠ²Π°ΡΡΡ Π½Π° Ρ
ΠΎΠ΄Ρ ΡΡΠΆΡΠ»ΡΠΌ ΠΊΠΎΠΏΡΡΠΌ.</p>
CSS
p { border: 1px solid blue; }
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ Π²ΡΠΎΡΠΎΠΉ Π°Π±Π·Π°Ρ:
.second { position: relative; border-color: red; left: 20px; top: 10px; }
ΠΡΠ°ΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π½Π° 20px ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ ΠΈ Π½Π° 10px ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π³Π΄Π΅ ΠΎΠ½ ΠΏΠΎΠ»Π°Π³Π°Π»ΡΡ Π±ΡΡΡ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΈΠ½ΠΈΠ΅ Π°Π±Π·Π°ΡΡ Π½Π΅ ΡΠ΄Π²ΠΈΠ½ΡΠ»ΠΈΡΡ Π²ΠΎΠΎΠ±ΡΠ΅. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΡΠ°ΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ, Π½Π΅ Π½Π°ΡΡΡΠ°Ρ ΠΌΠ°ΠΊΠ΅Ρ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΌΠ΅ΡΡΠ°, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ.
absolute
ΠΠΎΠ³Π΄Π° position ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ? Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ?
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ β ΡΡΠΎ ΡΠΎΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ relative, absolute ΠΈΠ»ΠΈ fixed. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡΡΡΠΏΠ°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΡΡΡΠ° Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ ΠΏΡΠΎΡΡΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ:
HTML
<section>
Π― ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ.
<p>
Π― ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ!
</p>
</section>
CSS
section {
background: gold;
height: 200px;
padding: 10px;
position: relative; /* ΠΡΠ΅Π²ΡΠ°ΡΠ°Π΅Ρ <section> Π² ΡΠΎΡΠΊΡ ΠΎΡΡΡΡΡΠ° Π΄Π»Ρ <p> */
}
p {
background: limegreen;
color: white;
padding: 10px;
position: absolute; /* ΠΠ΅Π»Π°Π΅Ρ <p> ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌΡΠΌ */
bottom: 10px; /* 10px ΡΠ½ΠΈΠ·Ρ */
left: 20px; /* 20px ΡΠ»Π΅Π²Π° */
}
ΠΡΠ»ΡΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 200px, Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ relative, ΡΡΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅Ρ Π΅Π³ΠΎ Π² ΡΠΎΡΠΊΡ ΠΎΡΡΡΡΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΅Π»ΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΊΠ°ΠΊ absolute ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΆΡΠ»ΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠ² ΠΎΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ left ΠΈ bottom, ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ Π΅Π³ΠΎ Π² Π»Π΅Π²ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΠ³ΠΎΠ».
Π§ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ left ΠΈ right?
ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° Π½Π΅ Π·Π°Π΄Π°Π½Π°, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ left: 0 ΠΈ right: 0 ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΎ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ left: 0 ΠΈ width: 100%.
ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π°, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ right ΠΎΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ.
fixed
ΠΠΎΠ³Π΄Π° position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ fixed, ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ»Π΅Π²Π°/ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ²Π΅ΡΡ Ρ/ΡΠ½ΠΈΠ·Ρ.
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΎΡΠΊΠΎΠΉ ΠΎΡΡΡΡΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, ΠΎΠ½ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ Π·Π°Π΄Π°Π½ΠΈΡΠΌ