background-position-y | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
7.0 | 8.0+ | 1.0+ | 1.0+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | 0 |
---|---|
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
ΠΡΠΎΡΠ΅Π½ΡΠ½Π°Ρ Π·Π°ΠΏΠΈΡΡ | ΠΠ° |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
ΠΠ΅ΡΡΠΈΠΈ CSS
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠ°Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-position-y ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΠΈ Π½Π΅ Π²Ρ ΠΎΠ΄ΠΈΡ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
background-position-y: top | center | bottom | ΠΏΡΠΎΡΠ΅Π½ΡΡ | Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- top
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ½ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ. ΠΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ Π·Π°ΠΏΠΈΡΠΈ 0 ΠΈΠ»ΠΈ 0%.
- center
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ½ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ. ΠΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ Π·Π°ΠΏΠΈΡΠΈ 50%.
- bottom
- ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ½ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΊΡΠ°Ρ. ΠΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ Π·Π°ΠΏΠΈΡΠΈ 100%.
- ΠΏΡΠΎΡΠ΅Π½ΡΡ
- ΠΠ°Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ 0% ΠΈΠ»ΠΈ 0 Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ 100% Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ ΡΠΈΡΡΠ½ΠΊΠ° ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
- ΠΠ°Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π² Π»ΡΠ±ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π΄Π»Ρ CSS Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ Β β ΠΏΠΈΠΊΡΠ΅Π»Ρ (px), ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΡ (cm), em ΠΈ Π΄Ρ. ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-position-y</title> <style> html { height: 100%; /* ΠΡΡΠΎΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ */ } body { background: url(images/mybg.png) no-repeat; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠΎΠ½Π° */ background-position-y: bottom; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° */ } </style> </head> <body> <p>...</p> </body> </html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. Β 1.
Π ΠΈΡ. 1. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(«elementID»).style.backgroundPositionY
ΠΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ (stacking context) — CSS
ΠΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ (stacking context) ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΡΡΡ ΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎΒ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡΒ HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΊΡΠ°Π½ΠΎΠΌ.Β HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΡΠΎ ΠΌΠ΅ΡΡΠΎ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠΌΡ Π½Π° Π°ΡΡΠΈΠ±ΡΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Β« CSS Β« Understanding CSS z-index
Β
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β Β ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΒ z-index, ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ DIVs ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π·Π°Π²ΠΈΡΠ΅Π» ΠΎΡ ΠΈΡ Β z-index Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠΎΠΌΡ, ΡΡΠΎ Ρ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ ΠΈΡ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ (Β stacking context ).
ΠΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π»ΡΠ±ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ:Β
- ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (HTML),
- ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ (position:absolute)Β ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΒ (position:relative) Ρ z-index Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ «auto»,
- flex ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ z-index ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ Β «auto», ΡΠ΅ΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ display: flex|inline-flex,
- ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Β
opacity
ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΠΌΒ 1. (Π‘ΠΌ.Β the specification for opacity), - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Β
transform
ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ «none», - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
mix-blend-mode
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ «normal», - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
filter
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ «none», - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
isolation
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π² Β «isolate», position: fixed
- Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°ΡΡΠΈΠ±ΡΡΒ Β
Β ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡ Π΅ΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΒ (Π‘ΠΌ.Β this post)will-change
- ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
-webkit-overflow-scrolling
(en-US) ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π²Β «touch»
ΠΠ½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌΠΈ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌΠΈ ΡΠ°Π½Π΅Π΅. ΠΠ°ΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΠΈΡΡΡΡΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, Π±ΡΠ΄ΡΡ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ Π°ΡΠΎΠΌΠ°ΡΠ½ΠΎ, ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Π‘ΡΠΌΠΌΠΈΡΡΠ΅ΠΌ:
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π½ΠΈΠ΅Β HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, (ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡΒ opacity ΠΌΠ΅Π½ΡΡΠ΅ 1).
- ΠΠΎΠ½ΡΠ΅ΠΊΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.Β
- ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΡΠ΅Π΄Π°: ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄ΡΠΈΠ½ΡΠ½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΏΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
Note: ΠΠ΅ΡΠ°ΡΡ ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° positionΒ ΠΈ z-index. ΠΠ΅ΡΠ°ΡΡ ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎΒ DIV #4, DIV #5 ΠΈ DIV #6 ΡΠ²Π»ΡΡΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ Π΄Π»Ρ DIV #3, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.
Notes:
- DIV #4 ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄Β DIV #1, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎΒ z-index (5) DIV #1 Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»Π΅Π½ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ°Β Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊΒ z-index (6)Β DIV #4 Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»Π΅Π½ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡΒ DIV #3. ΠΠΎΡΡΠΎΠΌΡ,Β DIV #4 Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π½ΠΈΠΆΠ΅Β DIV #1, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ DIV #4 ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ DIV #3, ΠΊΠΎΡΠΎΡΡΠΉ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄ΡΒ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅Π½ΡΡΠΈΠΉ z-index(ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ .DIV #1).
- ΠΠΎ ΡΡΠΈΠΌ ΠΆΠ΅ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ DIV #2 (z-index 2) ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ΄Β DIV#5 (z-index 1), ΡΠ°ΠΊ ΠΊΠ°ΠΊ DIV #5 ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ DIV #3, ΡΠ΅ΠΉ z-index Π±ΠΎΠ»ΡΡΠ΅(Β ΡΠ΅ΠΌ z-index DIV #2).
- Π£ DIV #3 Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index 4, Π½ΠΎ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ z-index’ΠΎΠ² DIV #4, DIV #5 ΠΈ DIV #6, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°ΡΒ ΠΎΠ½ΠΈ ΡΠ°Π·Π½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°ΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
- An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a «version number» of sorts, where child elements are minor version numbers underneath their parent’s major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1).
- Root
- DIV #2 — z-index is 2
- DIV #3 — z-index is 4
- DIV #5 — z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1
- DIV #6 — z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
- DIV #4 — z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6
- DIV #1 — z-index is 5
- Root
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Understanding CSS z-index: The Stacking Context: Example Source</title> <style type="text/css"> * { margin: 0; } html { padding: 20px; font: 12px/20px Arial, sans-serif; } div { opacity: 0.
7; position: relative; } h2 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px; background-color: #ddf; text-align: center; } </style> </head> <body> <div> <h2>Division Element #1</h2> <code>position: relative;<br/> z-index: 5;</code> </div> <div> <h2>Division Element #2</h2> <code>position: relative;<br/> z-index: 2;</code> </div> <div> <div> <h2>Division Element #4</h2> <code>position: relative;<br/> z-index: 6;</code> </div> <h2>Division Element #3</h2> <code>position: absolute;<br/> z-index: 4;</code> <div> <h2>Division Element #5</h2> <code>position: relative;<br/> z-index: 1;</code> </div> <div> <h2>Division Element #6</h2> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> </body> </html>
Division Element #1
position: relative;
z-index: 5;
232″>Division Element #2position: relative;
z-index: 2;
Division Element #3
position: absolute;
z-index: 4;
Division Element #4
position: relative;
z-index: 6;
Division Element #5
position: relative;
z-index: 1;
Division Element #6
position: absolute;
z-index: 3;
Original Document Information
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSSΒ β ΡΡΠΎ ΠΌΠΎΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, ΡΠ»ΠΎΠ²Π½ΠΎ ΡΠ»ΠΎΠΈ, ΠΈ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΡΠΈΡ ΡΠ»ΠΎΠ΅Π² ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ.
ΠΠ° ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ Π½Π°ΠΊΠΎΠ½Π΅Ρ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌ Π²Π°Ρ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΆΠ΅ Π½Π΅ΠΎΠ΄Π½ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅. Π Π΅ΡΡ ΠΏΠΎΠΉΠ΄Π΅Ρ ΠΎ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π΅ position
.
CSS position
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ Π½ΠΈΠΆΠ΅.
absolute
Β β Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π§ΡΠΎ ΡΡΠΎ Π·Π½Π°ΡΠΈΡ? ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΠΎΡ ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ΄ΡΡ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, Π±ΡΠ΄ΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ. ΠΠΎ-Π²ΡΠΎΡΡΡ , Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°) ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²top
,right
,bottom
ΠΈleft
(ΠΎ Π½ΠΈΡ ΠΌΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠΆΠ΅ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΡΠΎΠΊΠ΅).relative
Β β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠΎ Π΅ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ. ΠΠΎ Π·Π°ΡΠ΅ΠΌ, ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈtop
,right
,bottom
ΠΈleft
, ΠΌΠΎΠΆΠ½ΠΎ Π΄Π²ΠΈΠ³Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π½ΡΠΆΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ ΠΎΡΡΡΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°). ΠΡΠΎ ΡΠ΅ΠΌ-ΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΡΠ½ΠΊΡΠΈΡ translate() ΡΠ²ΠΎΠΉΡΡΠ²Π° transform.fixed
Β β ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΠ°Π·Π½ΠΈΡΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ (Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ΅Π±Ρ Π²Π΅Π΄Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅).sticky
Β β ΡΡΠΎ ΠΌΠΈΠΊΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π² ΡΠ°ΠΌΠΊΠ°Ρ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π° 2017 Π³ΠΎΠ΄ Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π΅Π½Π΄ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡΠ°-webkit-
.static
(Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)Β β ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π’Π°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. Π‘Π²ΠΎΠΉΡΡΠ²Π°top
,right
,bottom
ΠΈleft
Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
ΠΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π»ΠΈΠ±ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΡΠΎ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top
, right
, bottom
ΠΈ left
ΡΠΎΡΠΊΠ° ΠΎΡΡΡΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΡΡ ΠΎΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅Π΄Π΅Ρ ΡΠ²ΠΎΠΉ ΠΎΡΡΡΠ΅Ρ ΠΎΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π΄Π΅Π»Ρ, Π·Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ Π²ΡΡ
ΠΎΠ΄ΠΈΡ.
ΠΠ°Π»Π΅Π΅ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²Π° top, left, bottom ΠΈ right Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
HTML ΠΈ CSS Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
/* Keyword values */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
/* Global values */
position: inherit;
position: initial;
position: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
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
- ΠΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ. ΠΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΡΠ°ΡΠ·Π΅Ρ Safari ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ -webkit-sticky
.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: static
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
position: fixed
:
Can I Use css-fixed? Data on support for the css-fixed feature across the major browsers from caniuse. com.
position: sticky
:
Can I Use css-sticky? Data on support for the css-sticky feature across the major browsers from caniuse.com.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ
<!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>
Π‘ΡΡΠ»ΠΊΠΈ
CSS: position.
ΠΡΠΈΠΌΠ΅ΡΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
- static — Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ (ΡΡΠ°ΡΠΈΡΠ½ΠΎΠ΅) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- relative β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- absolute β Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- filxed β ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- sticky β Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ, ΡΠ°ΠΊ ΡΡΠΎ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΅Π³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ²Π½ΠΎ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ relative, absolute ΠΈΠ»ΠΈ fixed.
Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎ. ΠΡΠΎΠ±Π»Π΅ΠΌΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ. ΠΡΠ»ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ, ΡΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ Π·Π°Π±ΡΠ²Π°ΡΡΡΡ ΠΈ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π·Π°Π½ΠΎΠ²ΠΎ Π²ΡΠΏΠΎΠΌΠΈΠ½Π°ΡΡ ΡΠΎΠ½ΠΊΠΎΡΡΠΈ. ΠΡΠ° ΡΡΠ°ΡΡΡ ΠΈ Π½Π°ΠΏΠΈΡΠ°Π½Π° Π΄Π»Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»ΡΡΠ°Π΅Π².
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΡ — ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΡΡΠΈ Π±Π»ΠΎΠΊΠ°.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{
background-color: gray;
width: 400px;
}
.child{
height: 50px;
}
.child-one {
background-color:aqua;
}
.child-two {
background-color: honeydew;
}
.child-three{
background-color: burlywood;
}
</style>
</head>
<body>
<div>
I am a parent
<div>First Child</div>
<div>Second Child</div>
<div>Third Child</div>
</div>
</body>
</html>
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: static
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ (ΡΡΠ°ΡΠΈΡΠ½ΠΎΠ΅) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ Π² ΠΊΠΎΠ΄Π΅ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·. ΠΠ³ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΎ ΡΡΠΎΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° position: static ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΎΠΉ Π²ΠΈΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΠΎΠ±ΡΡΠΈΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΡΠ΅Π½Π°ΡΠΈΡΡ JavaScript ΠΈΠ»ΠΈ Π² ΡΡΡΠ΅ΠΊΡΠ°Ρ CSS Π΄Π»Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ° ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ :hover).
ΠΠ»Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠ½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ:
- ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ²ΠΎΠ΄ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΠΏΠΈΡΠ°Π½Ρ Π² ΠΊΠΎΠ΄Π΅
- ΡΠ²ΠΎΠΉΡΡΠ²Π° left, right, top, bottom, z-index Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΈΡ Π½Π΅Ρ ΡΠΌΡΡΠ»Π°
ΠΠ°ΡΠ° Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΠ° ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π·Π΄Π΅ΡΡ Π²ΡΡ ΠΏΠΎΠ½ΡΡΠ½ΠΎ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: relative
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊ β position: relative. ΠΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π·Π°Π΄Π°ΡΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ, ΠΊΠ°ΠΊ ΠΈ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ — left, right, top, bottom. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ Π½Π΅ Π²ΡΠΏΠ°Π΄Π°Π΅Ρ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° β ΠΏΠΎΠ΄ Π½Π΅Π³ΠΎ ΠΎΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΡΡΠΎ.
Π Π°Π±ΠΎΡΡ ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²Π½ΠΈΡΡ Ρ visibility: hidden, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΠ΄ Π½Π΅Π³ΠΎ ΠΎΡΡΠ°ΡΡΡΡ Π½Π΅ΡΡΠΎΠ½ΡΡΡΠΌ. ΠΠ»ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π²ΠΈΠ³Π°ΡΡ ΠΊΡΠ΄Π° ΡΠ³ΠΎΠ΄Π½ΠΎ, Π½ΠΎ ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΠ΄ Π½Π΅Π³ΠΎ ΠΎΡΡΠ°ΡΡΡΡ ΠΏΡΡΡΡΠΌ ΠΈ Π΅Π³ΠΎ Π½Π΅ Π·Π°ΠΉΠΌΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ°ΡΡΠΈ.
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π½Π΅ ΠΎΡ ΠΊΡΠ°ΡΠ² ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° ΠΎΡ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΡΠΎΡΠ» Π±Π»ΠΎΠΊ.
ΠΠΎΠΏΡΡΡΠΈΠΌ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ ΠΈ Π²Π½ΠΈΠ·.
.child-one {
background-color:aqua;
position: relative;
left: 20px;
top: 10px;
}
ΠΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ ΡΠ΄Π²ΠΈΠ½Π΅ΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ Π΅Π³ΠΎ ΠΏΡΠ°Π²Π°Ρ ΡΠ°ΡΡΡ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π° Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ Π½Π°Π»Π΅Π·Π°Π΅Ρ Π½Π° Π²ΡΠΎΡΠΎΠΉ Π±Π»ΠΎΠΊ, ΡΠ°ΡΡΠΈΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Ρ Π΅Π³ΠΎ. ΠΡΡΠ°ΡΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: absolute
ΠΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΡΡΠ°ΡΡ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΡΠ°ΡΠ² Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°.
Π¨ΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Π½Π΅ Π·Π°Π΄Π°Π½Π° ΡΠ²Π½ΠΎ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΡΡΡΡΠΎΠΌ padding, border ΠΈ margin. ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ² right, left, top ΠΈ bottom. ΠΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΈ right ΡΠΎΡΠΌΠΈΡΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ width Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ. ΠΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ right Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΎ. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Ρ Π²ΡΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² top, bottom ΠΈ height.
Π‘Π²ΠΎΠΉΡΡΠ²Π° left ΠΈ top ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ right ΠΈ bottom. ΠΡΠ»ΠΈ left ΠΈ right ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ right ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΈ bottom.
ΠΡΠ»ΠΈ left Π·Π°Π΄Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΉΠ΄ΡΡ Π·Π° Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½ΠΎ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ top, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ.
ΠΡΠ»ΠΈ left Π·Π°Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΈΠ»ΠΈ ΡΠΊΠ°Π·Π°ΡΡ right Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΡΠΎ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΈ Ρ top — ΠΏΠΎΡΠ²ΠΈΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΏΡΠΈ Π΅Π³ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΏΡΠΈ ΡΡΠΎΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΡΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ ΡΠ°ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Ρ left: -9999px, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π°Π»Π΅ΠΊΠΎ Π²Π»Π΅Π²ΠΎ Π·Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΡΠΎΡ ΠΏΡΠΈΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΡΠΊΡΡΠ²Π°ΡΡ Π½Π°ΡΡΠΎΡΡΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ, Π° Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ label, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ Ρ input ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΠΈΠΌ Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌ Π±Π»ΠΎΠΊΡ.
.child-one {
position: absolute;
}
ΠΠ»ΠΎΠΊ ΡΠ΅ΡΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΠΏΡΠΈΠ²ΡΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠΏΠ°Π΄Π°Π΅Ρ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ°. ΠΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΡΠ°ΡΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΡ Π΅Π³ΠΎ, Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π·Π°Π½ΠΈΠΌΠ°Ρ Π»Π΅Π²ΡΡ Π²Π΅ΡΡ Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΠΈ ΡΠΆΠΈΠΌΠ°ΡΡΡ.
ΠΠΎ Π·Π΄Π΅ΡΡ Π½Π°Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄ΡΡΠ΅ΡΠ΅Π³Π°ΡΡ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎΡΡΡ. ΠΠΎΠΏΡΡΡΠΈΠΌ, ΠΌΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΡΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΏΡΠ°Π²ΠΎ ΠΈ Π²Π½ΠΈΠ·, ΠΊΠ°ΠΊ ΠΌΡ ΡΡΠΎ ΡΠΆΠ΅ Π΄Π΅Π»Π°Π»ΠΈ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
.child-one {
position: absolute;
top: 5px;
left: 5px;
}
Π‘ΡΡΠΏΡΠΈΠ·! ΠΠ»ΠΎΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° Π½Π΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π±Π»ΠΎΠΊ Π²ΡΠΏΠ°Π» ΠΈΠ· Π½Π΅Π³ΠΎ. ΠΡΠΎ ΡΠΏΡΠ°Π²Π΅Π΄Π»ΠΈΠ²ΠΎ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (static), ΠΊΠΎΡΠΎΡΠΎΠ΅ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠΏΡΡΠ΅Π½ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΡΠ»ΠΈ ΠΆΠ΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π²ΡΡ-ΡΠ°ΠΊΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈ Π²ΡΡΠΈΡΠ»ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΎ ΡΠΎΠ³Π΄Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ Π±Π»ΠΎΠΊΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
.parent{
position: relative;
}
ΠΠ°ΠΏΠΎΠΌΠΈΠ½Π°Π΅ΠΌ ΡΠ²ΡΠ·ΠΊΡ: ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ (ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅) — Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ (Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅). ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎΡΠΎΠ½ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½ΠΎ Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π½ΠΎ position: relative, ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ ΡΠΌΠ΅Π½Π° ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ padding Π½Π΅ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ.
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΠΌΠΎΠ³ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΡΠΎΠΌΠ΅ static. ΠΡΠ»ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ²ΡΠ·ΠΊΡ absolute-absolute, ΡΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΡΠ½ΠΎΠΉ ΡΠ°ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π Π°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ³Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
.child-one {
position: absolute;
right: 2px;
bottom: 2px;
width: 40px;
height: 40px;
}
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: fixed
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ½Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»ΠΎΠ²Π½ΠΎ ΠΏΡΠΈΠΊΠ»Π΅ΠΈΠ²Π°Π»ΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΌΠ΅ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ:
.child-one {
position: fixed;
top: 5px;
left: 5px;
}
ΠΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡ ΠΎΠΆΠ΅ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠΏΠ°Π΄Π°Π΅Ρ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎ ΠΎΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π°Π΅ΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΎΠΎΠ±ΡΠ΅ Π΅Π³ΠΎ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΡ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΡΠΌΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π΅ΡΡ Π½ΠΈΠ΅, Π½ΠΈΠΆΠ½ΠΈΠ΅, Π±ΠΎΠΊΠΎΠ²ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΈΡΡΠ΅Π·Π°ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΈ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π½Π° Π²ΠΈΠ΄Ρ.
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΡΡ ΠΎΠΊΠΎΠ½ — ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π²Π΅ΡΡ ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, ΠΎΠ½ΠΎ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΠΌΠ΅ΡΡΠ΅.
ΠΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — sticky
ΠΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ ΡΡ ΠΎΠ΄ΠΈΡ Π²Π²Π΅ΡΡ , ΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠ°ΠΊΠΆΠ΅ ΡΡ ΠΎΠ΄ΠΈΡ Ρ Π½ΠΈΠΌ. ΠΡΠΎ Π»ΡΡΡΠ΅ ΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
.child-one {
position: sticky;
top: 5px;
left: 5px;
}
Π Π΅ΠΊΠ»Π°ΠΌΠ°
Position (absolute, relative ΠΈ fixed) β ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Html ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS (ΠΏΡΠ°Π²ΠΈΠ»Π° left, right, top ΠΈ bottom)
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ 10 ΡΠ½Π²Π°ΡΡ 2021- Position relativeΒ β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- Position absoluteΒ β Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS
- Π‘Π²ΡΠ·ΠΊΠ° position absolute ΠΈ relative Π² Div Π²Π΅ΡΡΡΠΊΠ΅
- Position fixedΒ β ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Html ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΏΡΠ°Π²ΠΈΠ» Position (ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ absolute, relative ΠΈ fixed) ΠΈ ΡΠ²ΠΎΠΉΡΡΠ², Π·Π°Π΄Π°ΡΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ left, right, top ΠΈ bottom. ΠΠΈΠ΄ΠΈΡΠ΅ Π·Π²Π΅Π·Π΄ΠΎΡΠΊΡ Π² Π»Π΅Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ? ΠΠΎΡΠΈΡΠ°Π² ΡΡΠ°ΡΡΡ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ°, Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΊΠ°ΠΊ ΠΎΠ½Π° ΡΡΠ΄Π° ΠΏΠΎΠΏΠ°Π»Π°.
Π ΠΏΡΠΎΡΠ»ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΏΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»Π°Π³Π°ΡΡΠΈΡ CSS ΠΏΡΠ°Π²ΠΈΠ» Float, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π·ΠΎΡΠ²Π°ΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΠΈΠ΄ΡΡΠΈΡ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ Π² Html ΠΊΠΎΠ΄Π΅ ΡΡΠ³ΠΎΠ². ΠΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡ Π±Π»ΠΎΡΠ½ΡΡ Div Π²Π΅ΡΡΡΠΊΡ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ΅ΠΉΡΠ°Ρ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΈ Π±Π°Π·ΠΈΡΡΠ΅ΡΡΡ ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅. ΠΠΎ Π½Π΅ Float Π΅Π΄ΠΈΠ½ΡΠΌ…
Position relativeΒ β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΡΡ Π΅ΡΠ΅ ΠΈ Position, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ² ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ ΡΠ°Π±Π»ΠΈΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΠΎΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΡΡΠ²Π°ΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ. Π ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠ»ΠΎΠΆΠ½Π΅Π΅ ΡΠ°Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ float, Π½ΠΎ, Π΄ΡΠΌΠ°Ρ, ΠΌΡ ΡΠΏΡΠ°Π²ΠΈΠΌΡΡ.
Π£ Π½Π΅Π³ΠΎ ΠΈΠΌΠ΅Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ (static | relative | absolute | fixed). ΠΡΠΊΡΠ΄Π° ΠΌΡ ΡΡΠΎ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ·Π½Π°ΡΡ? ΠΡ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΠΈΠ· ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠ»ΠΎΠΆΠ΅Π½Π° Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ ΠΎΡΡΠ°-ΠΎΡΠ½ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΈ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ Π’ΠΈΠΌΠ° ΠΠ΅ΡΠ½Π΅ΡΡΠ°-ΠΠΈ:
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position: static. Π’.Π΅. Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄Π²Π° CSS ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΠΏΠΎΡΠΎΠ±Π½ΡΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΎΡΠ²Π°ΡΡ, ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ static ΠΈ float:none. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΒ β Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Html ΠΊΠΎΠ΄Π° Π² ΡΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΡΡΠ΅Π½, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΠΎΡ ΡΠ΅Π³ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΠΎΡΠ΅Π΄ΡΠΌΠΈ ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π΄Π°ΠΆΠ΅ Π½Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ position: relative. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ Π΅Π³ΠΎ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΡΠ³Π°, Ρ Π½Π°Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ (ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅) Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠ°Π²ΠΈΠ» Left, right, top ΠΈ bottom (Π²Π»Π΅Π²ΠΎ, Π²ΠΏΡΠ°Π²ΠΎ, Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ):
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Auto. ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π³Π° ΠΏΡΠ°Π²ΠΈΠ»ΠΎ position: relative, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΡΠΎ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½ ΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡΡΡ Π² Π½ΠΎΠ»Ρ ΠΈ Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°ΠΌΠΈΠΌ Π·Π°Π΄Π°ΡΡ ΠΈΡ .
ΠΡΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊ Π·Π°Π΄Π°ΡΡΡΡ ΠΎΡΡΡΡΠΏΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, left: 400px ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΡΡΡΡΠΏ ΠΎΡ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ, Π° top: 100pxΒ β ΠΎΡ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π²Π½ΠΈΠ·. ΠΡΠ»ΠΈ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Left, right, top ΠΈ bottom, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, topΒ β Π½Π°Π²Π΅ΡΡ , Π° LeftΒ β Π²Π»Π΅Π²ΠΎ).
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ relative Π΄Π»Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΡΡ Ρ Π½Π°Ρ ΠΈΠΌΠ΅ΡΡΡΡ Π΄Π²Π° Div ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ΄ΠΊΡΠ°ΡΠΈΠΌ Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΡΠ°Π·Π½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ background.
ΠΠ΅ΡΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΌΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΡΠ°Π²ΠΈΠΌ ΠΏΠ»Π°Π²Π°ΡΡ Π²Π»Π΅Π²ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π° Ρ.ΠΊ. ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΡΡΡΠΎΠΉ, ΡΠΎ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ width ΠΈ height (ΠΈ ΠΎΡΡΡΡΠΏΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ margin):
<div></div> <div>text text ...</div>
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΡΡ ΠΊΠ°ΡΡΠΈΠ½Ρ ΠΌΠ°ΡΠ»ΠΎΠΌ:
ΠΠ΅ΡΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΊΠ°ΠΊ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π»ΠΎΡΡ, ΠΏΠ»Π°Π²Π°Π΅Ρ Π²Π»Π΅Π²ΠΎ. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅ Π²ΡΠΎΡΠΎΠΉ Π±Π»ΠΎΠΊ ΡΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π±Ρ ΠΈ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠ°Π΅Ρ (ΠΈΠ±ΠΎ ΠΎΠ½ Π±Π»ΠΎΡΠ½ΡΠΉΒ β display: block), Π½ΠΎ Π·Π°ΡΠΎ ΡΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°Π΅Ρ ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ Π½Π°Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ.
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ CSS ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° position: relative ΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΡΡΡΡΠΏΡ ΡΠ»Π΅Π²Π° ΠΈ ΡΠ²Π΅ΡΡ Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Left ΠΈ top:
<div></div> <div>text text ...</div>
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π½Π°Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ½ΡΠ»ΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ΅ΠΊΡΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ Π΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π±Ρ ΠΎΠ½ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΡΠΎΠΈΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΌΠ΅ΡΡΠ΅. Π’.Π΅. ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Html ΡΠ΅Π³ΠΈ ΠΏΡΠΈ ΡΠ²ΠΎΠ΅ΠΌ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠΈ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π·Π°ΠΊΠΎΠ½Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ (Π±Π΅Π· ΡΡΠ΅ΡΠ° Π·Π°Π΄Π°Π½Π½ΡΡ Π½Π°ΠΌΠΈ Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ Left ΠΈ top ΡΠ΄Π²ΠΈΠ³ΠΎΠ²).
ΠΠΎ ΡΠ°ΠΊ Π±ΡΠ΄ΡΡ Π΄Π΅Π»Π°ΡΡ Π½Π΅ Π²ΡΠ΅ ΡΡΠ³ΠΈ, ΠΈΠ½Π°ΡΠ΅ Π±Ρ ΠΌΡ Π½Π΅ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. ΠΠ»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ (Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π³ Html, Ρ.Π΅. ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°) ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π°ΠΌΠ΅ΡΠΈΡ.
ΠΡΠΈΠ½ΡΠΈΠΏ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ relative Π½Π΅ ΡΠ»ΠΎΠΆΠ΅Π½, Π½ΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΠΎΠ½ΡΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠ²ΡΠ·ΠΊΠ΅ Ρ position absolute, ΠΈ Π²ΠΎΡ Π² ΡΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΎΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡ ΠΎΡΠ΅Π½Ρ Π΄Π°ΠΆΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². ΠΠΎ ΠΎΠ±ΠΎ Π²ΡΠ΅ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ.
Position absoluteΒ β Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ CSS ΠΏΡΠ°Π²ΠΈΠ»Π° Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°. ΠΠΎΠΏΡΡΡΠΈΠΌ, ΡΡΠΎ Ρ Π½Π°Ρ Π²Π½ΡΡΡΠΈ Div ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ΅Π³ Span, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΡ ΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ Π΅ΡΠ΅ Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Β«position: absoluteΒ». ΠΡΠΈ ΡΡΠΎΠΌ Π΄Π»Ρ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΡΡΡΠΎΡΠ½ΠΎΡΡΠΈ Span Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΠΌΡ Π²ΡΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡΡ, Π° CSS ΠΊΠΎΠ΄ Π½Π° ΡΠ΅ΠΉ ΡΠ°Π· Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π»Ρ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡ Π½Π΅ ΡΠ΅ΡΠ΅Π· Π°ΡΡΠΈΠ±ΡΡ, Π° ΡΠ΅ΡΠ΅Π· ΡΠ΅Π³ style Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ Head:
<head> <style type="text/css"> #abs{ background:#FFC0C0; margin-left: 100px; } #abs span{ background:#C0FFC0; height:100px; } </style> </head> <body> <div>ΠΠ΅ΡΠ²ΠΎΠ΅ <span>Π²ΡΠΎΡΠΎΠ΅</span> ΠΈ ΡΡΠ΅ΡΡΠ΅</div> </body>
ΠΠ»Ρ Div ΠΌΡ Π΅ΡΠ΅ ΠΈ ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° Π·Π°Π΄Π°Π»ΠΈ Π² 100px. ΠΡ, Π° ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ, Π΅ΡΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½Π°ΡΠ΅ΠΌΡ ΡΡΡΠΎΡΠ½ΠΎΠΌΡ ΡΡΠ³Ρ Span Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ CSS ΠΏΡΠ°Π²ΠΈΠ»Π° position absolute:
#abs span{ background:#C0FFC0; height:100px; position:absolute; }>
ΠΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ ΡΡΡΠ°Π½Π½ΠΎΠ΅. Π‘ΡΠ΄Ρ ΠΏΠΎ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΊ Span ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ height:100pxΒ β ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π» Π±ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌ ΡΠ΅Π³ΠΎΠΌ. ΠΠΎΡΠΎΠΌ Ρ Π½Π°Ρ, ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΠΎΡΡΡΠΊΠΎΠ²Π°Π»ΠΈΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ Β«ΠΏΠ΅ΡΠ²ΠΎΠ΅Β» ΠΈ Β«ΡΡΠ΅ΡΡΠ΅Β», ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎ ΡΠ»ΠΎΠ²ΠΎΠΌ Β«Π²ΡΠΎΡΠΎΠ΅Β» ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΡΠΆΠ΅ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ. ΠΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS.
ΠΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ Π²ΡΠ΅ ΠΏΠΎ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΏΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Β«position: absoluteΒ»:
- Π’Π΅Π³, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ
- Π Π°Π·ΠΌΠ΅ΡΡ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌΡΡ Π² Π½Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ (Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ ΠΈΡ ΡΠ²Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ width ΠΈ height).
Π’Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Float), Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊ ΡΠ΅Π³Ρ Β«position: absoluteΒ», ΡΡΡΠ΅ΠΊΡ Margin-colloapse Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ ΡΡΠ³ΠΎΠ² ΠΏΡΠΎΡΠ²Π»ΡΡΡΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ. Π’.Π΅. Π΅ΠΌΡ Π½ΠΈΠΊΡΠΎ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠ²ΠΎΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈ ΠΎΠ½ Π½ΠΈΠΊΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΡ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠΆΠ΅ (Π½ΠΈ Ρ ΠΊΠ΅ΠΌ Π½Π΅ Π΄Π΅Π»ΠΈΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ).
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΡΡ ΡΡΠ°ΡΡΡ ΠΈΠ· ΡΡΠ±ΡΠΈΠΊΠΈ Β«Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠ° CSSΒ», ΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π²ΡΠ΅ ΡΡΠΈ ΡΡΠΈ ΠΏΡΠ½ΠΊΡΠ° Π½Π°Π±Π»ΡΠ΄Π°Π»ΠΈΡΡ ΠΈ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ Float.
ΠΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π³Π° ΡΠΆΠ΅ Π±ΡΠ»ΠΎ Π·Π°Π΄Π°Π½ΠΎ Float, Π½ΠΎ Π·Π°ΡΠ΅ΠΌ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΆΠ΅ ΠΏΡΠΎΠΏΠΈΡΠ°Π»ΠΈ Β«position: absoluteΒ», ΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ (ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ°Π·Π±ΠΎΡ ΠΊΠΎΠ΄Π°) ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ Π² None (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), ΠΈΠ±ΠΎ Π½Π΅Ρ ΡΠΌΡΡΠ»Π° ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ Π΄Π²Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΠΌΠΎΠ΄Π΅Π»ΠΈ.
- Π’Π΅Π³ Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ Β«position: absoluteΒ» Π½Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Π½ΠΈ Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Html ΠΊΠΎΠ΄Π° ΠΊΡΠΎΠΌΠ΅ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ Π² ΠΊΠΎΠ΄Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ-Π½Π°ΠΏΡΠΎΡΡΠΎ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠ°ΡΡ (ΠΈ ΡΡΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°)
ΠΡΠΎ Π²ΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ, Π½ΠΎ Π²Π΅Π΄Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«absoluteΒ» ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡ, ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ, ΡΡΠΎ ΡΠ°ΠΊ ΠΈ Π΅ΡΡΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅. Π ΠΊΡΠΏΠ΅ Ρ Π½ΠΈΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ΅ ΠΆΠ΅ ΡΠ΅ΡΡΡΠ΅ CSS ΠΏΡΠ°Π²ΠΈΠ»Π°: Left, right, top ΠΈ bottom. ΠΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ?
ΠΠ½ΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄ΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΆΠ΅ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π³ΡΠ°Π½ΠΈΡ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π ΡΠ°ΠΌΠΎ ΠΏΠΎΠ½ΡΡΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΠΎΠ±ΡΠ΅ΠΏΡΠΈΠ½ΡΡΠΎΠ³ΠΎ. ΠΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ Π²Ρ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ ΡΠ΅Π³Π° Html ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π° Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ Β β ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. Π£ ΡΡΠ³Π° Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ position absolute ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π΅ ΡΠ°ΠΊ.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°ΡΠ°ΡΡ ΡΠ°ΠΌΠΈ (ΠΈΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ², Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ static, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ).
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π΅ΡΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ Π½Π΅ ΠΏΡΠΎΠΏΠΈΡΠ°Π»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ» Left, right, top ΠΈ bottom, ΡΠΎ Π΄Π»Ρ Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΌΠΎΠ»ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Auto ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΡΠΎΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΌΠ΅ΡΡΠ΅ (ΠΊΠ°ΠΊ ΠΈ Ρ Π½Π°Ρ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅). Π’ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²ΡΠ΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ.
Π CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΡΠΆΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΠΈΡΠ°Π» Π² ΡΡΠ°ΡΡΠ΅ ΠΏΡΠΎ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ². ΠΠ°ΡΠ° Π·Π°Π΄Π°ΡΠ°, ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π΄Π»Ρ ΡΠ΅Π³Π° Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΠΏΠΎΠΈΡΠΊΠ΅ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ position, ΠΈΠΌΠ΅ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ static (Ρ.Π΅. ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Π½ΠΎ).
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΡΠ΅Π³Π° Span ΠΌΡ Π½Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π»ΠΈ position, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠΉΠ΄Ρ Π΄ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²Π΅ΡΡ Π° (ΡΡΠ³Π° Html) ΠΌΡ Π½Π° ΡΡΠΎΠΌ ΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΠΌΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½ΡΠ»Π΅Π²ΡΠ΅ ΠΎΡΡΡΡΠΏΡ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΡΡΡ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΈ ΡΠ±Π΅Π΄ΠΈΠΌΡΡ Π² ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠ°Π²ΠΎΡΠ΅:
#abs span{ background:#C0FFC0; height:100px; position:absolute; left:0; top:0; }>
Π ΠΈΡΠΎΠ³Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ΅Π³ ΠΏΡΠΈΠΆΠ°Π»ΡΡ ΠΊ Π½ΡΠ»Π΅Π²ΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΠΎΡΡΡΠ΅ΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΎ ΠΌΡ Π²ΠΎΠ»ΡΠ½Ρ ΡΠ°ΠΌΠΈ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ position absolute. ΠΠ°ΠΊ ΠΆΠ΅ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ?
Π‘Π²ΡΠ·ΠΊΠ° position absolute ΠΈ relative Π² Div Π²Π΅ΡΡΡΠΊΠ΅
ΠΡ, Π° ΠΏΠΎΡΠ΅ΠΌΡ Π±Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Β«position: relativeΒ». ΠΡΠΎΠΏΠΈΡΠ΅ΠΌ Π΅Π³ΠΎ Π² Π½ΡΠΆΠ½ΠΎΠΌ ΡΠ΅Π³Π΅ ΠΏΡΠ΅Π΄ΠΊΠ° (ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π½Π΅Ρ Π² ΠΈΡΠΎΠ³Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°), Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ Left, right, top ΠΈΠ»ΠΈ bottom ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ, ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π²Π½Π΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° (ΠΎΠ½ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅), Π½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΠ² Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΈ Π½Π°ΡΠ°Π»ΠΎΠΌ ΠΎΡΡΠ΅ΡΠ° Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠ»ΠΈ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ Β«relativeΒ» Π΄Π»Ρ ΡΠ΅Π³Π° Body, ΡΠΎ Π½Π°ΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΡΡΡ-ΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ:
<body> <div>ΠΠ΅ΡΠ²ΠΎΠ΅ <span>Π²ΡΠΎΡΠΎΠ΅</span> ΠΈ ΡΡΠ΅ΡΡΠ΅</div> </body>
ΠΠΈΠ΄ΠΈΡΠ΅, ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ Π³ΠΎΠ²ΠΎΡΡΡΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Π·Π° ΡΠΎΡΠΊΡ ΠΎΡΡΡΠ΅ΡΠ° Π±Π΅ΡΠ΅ΡΡΡ Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ» ΡΡΠ³Π° Body. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π² ΡΠΌΠΎΠ»ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π³Π° ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ ΠΎΡΡΡΡΠΏΡ margin Π² 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΈ Π½Π°Π±Π»ΡΠ΄Π°Π΅ΠΌ:
Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΠΆΠ΅ ΠΏΡΠΎΠ΄Π΅Π»Π°Π½Π½ΠΎΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ Β«position: relativeΒ» ΠΈ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Div, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈ ΠΆΠΈΠ²Π΅Ρ ΡΠ΅Π³ Span:
<style type="text/css"> #abs{ background:#FFC0C0; margin-left: 100px; position: relative; } #abs span{ background:#C0FFC0; height:100px; position:absolute; left:0; top:0; } </style> </head> <body> <div>ΠΠ΅ΡΠ²ΠΎΠ΅ <span>Π²ΡΠΎΡΠΎΠ΅</span> ΠΈ ΡΡΠ΅ΡΡΠ΅</div> </body>
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΡΡΠΈΠ½Π° ΠΏΠΎΠΌΠ΅Π½ΡΠ»Π°ΡΡ. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ relative ΠΏΡΠΎΠΏΠΈΡΠ°Π½ΠΎ ΠΈ Π΄Π»Ρ Body, ΠΈ Π΄Π»Ρ Div, ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Span ΡΡΠ°Π» ΠΈΠΌΠ΅Π½Π½ΠΎ Div, Ρ.ΠΊ. ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΎΡ static.
ΠΡΠΈΡΠ΅ΠΌ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ Div Π΅ΡΠ΅ ΠΈ border Ρ padding, Π° ΡΠ°ΠΊΠΆΠ΅ margin, ΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Ρ ΠΈΠΌΠ΅ΡΡΠΈΠΌΠΈΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ:
#abs{ background:#FFC0C0; margin-left: 100px; position: relative; border:12px dotted #ccf; padding:20px; }
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΡΠΎΡΠΊΠ° ΠΎΡΡΡΠ΅ΡΠ° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ Π²Π½ΡΡΡΠΈ ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΠΏΠΎ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ Π΅Π΅ Π³ΡΠ°Π½ΠΈΡΠ΅). ΠΡΡΡΠ΄Π° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΠΎ Π΄Π»Ρ ΡΡΠ³ΠΎΠ² Ρ Β«position: relativeΒ» (ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ) ΡΠ°ΠΌΠΊΡ Π»ΡΡΡΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠΈ ΡΠΊΡΡΠ΅ΡΡΠΎΠ².
ΠΡΡΡΡΠΏΡ (ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅) Left, right, top ΠΈ bottom ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ (ΡΠΈΡΠ°ΠΉΡΠ΅ ΠΏΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² CSS), Π½ΠΎ ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π±ΡΠ°ΡΡΡΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ (left ΠΈ right) ΠΈ Π²ΡΡΠΎΡΡ (top ΠΈ bottom) ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. Π’.Π΅. Β«top:100%Β» Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ 100% Π²ΡΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π° Β«left:100%» β 100% ΠΎΡ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ.
Π ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΈΠΌΠ΅Π» Π² Π²ΠΈΠ΄Ρ, Π³ΠΎΠ²ΠΎΡΡ ΠΏΡΠΎ ΡΠ²ΡΠ·ΠΊΡ position absolute ΠΈ relative. Π£ Π½Π°Ρ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°ΠΌΠΈΠΌ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠ»ΠΈ ΠΆΠ΅, Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΠΎΡΠΊΡ ΠΎΡΡΡΠ΅ΡΠ° ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠ»Ρ ΡΠ΅Π³ΠΎ ΠΆΠ΅ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΡ ΡΠ²ΡΠ·ΠΊΡ?
ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π·Π°Π΄Π°ΡΠΈ ΠΏΠΎΡ ΠΎΠΆΠ΅ΠΉ Π½Π° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ»ΠΈ ΠΆΠ΅ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ Litebox Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΠΎ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ.
Π’.Π΅. Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΡΠΊΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈ ΡΠ²ΠΎΠ΅ΠΌ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°ΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ (Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π½ΠΈΠΌΠΈ). Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ²Π»Π΅ΡΠ΅Ρ Π·Π° ΡΠΎΠ±ΠΎΠΉ Π΄Π΅ΡΠ³Π°Π½ΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅ΡΡΡΠΎΠΉΠΊΡ Π²ΡΠ΅ΠΉ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ»Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π΄Π΅Π»Π°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ (Π·Π°Π΄Π°Π΅ΡΡΡ Π² CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° hover) Π½Π° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΠ»ΠΎΠ²Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«absoluteΒ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°). ΠΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠΎΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΡΠ΄ΠΎΠΌ Ρ ΠΊΠΎΡΠ½Π΅Π²ΡΠΌ ΠΏΡΠ½ΠΊΡΠΎΠΌ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΎΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅, ΡΡΠΎ Π² Π½Π΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ position: relative. ΠΡΠ΅.
Position fixedΒ β ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Β«position: fixedΒ». Π Π°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ°Π½Π΅Π΅ ΡΠΏΠΎΡΠΎΠ±Ρ Π±ΡΠ»ΠΈ ΡΠ°ΡΡΡΠΈΡΠ°Π½Ρ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Html ΠΊΠΎΠ΄Π°. ΠΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎ ΠΈ Π΅Π΅ ΡΠ΅Π³ΠΈ (Π΄Π°ΠΆΠ΅ ΠΈΠΌΠ΅ΡΡΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅) ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π²Π΅ΡΡ (ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·).
Π Π²ΠΎΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ fixed ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΆΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ. Π‘ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠ²Π°Π½Π½ΡΠΉ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΡΠ°ΠΊΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠΆΠ΅ Π²ΡΡΡΠ΅ΡΠ°Π»ΠΈ Π½Π° ΡΠ°ΠΉΡΠ°Ρ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° ΡΠ°Π±ΠΎΡΠ° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π΄Π»Ρ WordPress ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Simple Counters.
ΠΠ»Ρ ΡΡΠ³Π° Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ position:fixed ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½ΠΈΠΊΡΠΎ Π½Π΅ ΠΈΡΠ΅Ρ, ΠΈΠ±ΠΎ ΠΈΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΌΠ΅Π½Π½ΠΎ Π² ΡΡΠΎΠΌ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Β«absoluteΒ», Π° Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Ρ Π½ΠΈΡ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ. ΠΠ»ΠΎΠΊΠΈ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΎΠΊΠ½Π° Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΎΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ).
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΎΡΠ·ΡΠ² ΠΈ Ρ.ΠΏ. Π²Π΅ΡΠΈ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ Π·Π°Π΄Π°Π» position: fixed Π΄Π»Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² Π»Π΅Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° (ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°):
<img src="https://ktonanovenkogo.ru/wp-content/themes/Organic/images/list_star.png" />
ΠΠ° ΡΠ΅Π³ΠΎΠ΄Π½Ρ Π²ΡΠ΅, Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΡΠΆΠ΅ ΠΏΡΠΎ CSS ΠΏΡΠ°Π²ΠΈΠ»ΠΎ z-index, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠΆΠ΅ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΊΠΎΠ΄Π°, Ρ.Π΅. Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ Π»ΠΈΠ±ΠΎ fixed, Π»ΠΈΠ±ΠΎ relative, Π»ΠΈΠ±ΠΎ absolute.
Π£Π΄Π°ΡΠΈ Π²Π°ΠΌ! ΠΠΎ ΡΠΊΠΎΡΡΡ Π²ΡΡΡΠ΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ruLayout position Property CSS ΡΡΠΎΠΊΠΈ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π°ΠΊΠ°Π΄Π΅ΠΌΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ).
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Position
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ:
static
relative
fixed
absolute
sticky
ΠΠ°ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π·Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² «Π²Π΅ΡΡ
», «ΡΠ½ΠΈΠ·Ρ», «Π²Π»Π΅Π²ΠΎ» ΠΈ «Π²ΠΏΡΠ°Π²ΠΎ». ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ ΠΏΠ΅ΡΠ²ΡΠΌ. ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ.
ΠΠ° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π²Π»ΠΈΡΡΡ Π²Π΅ΡΡ Π½ΠΈΠ΅, Π½ΠΈΠΆΠ½ΠΈΠ΅, Π»Π΅Π²ΡΠ΅ ΠΈ ΠΏΡΠ°Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: static;
Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΎΡΠΎΠ±ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ; ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: Static;
ΠΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ:
ΠΡΠΈΠΌΠ΅Ρ
div.static {
Β Β Β position: static;
Β Β Β border: 3px solid #73AD21;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: relative;
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π²Π΅ΡΡ Π½Π΅Π³ΠΎ, ΠΏΡΠ°Π²ΠΎΠ³ΠΎ, Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΠΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΡΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°Π½ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ³ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² Π·Π°Π·ΠΎΡ, ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ;
ΠΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ:
ΠΡΠΈΠΌΠ΅Ρ
div.relative {
Β Β Β position: relative;
Β Β Β
left: 30px;
Β Β Β border: 3px solid #73AD21;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: fixed;
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠ²Π΅ΡΡ
Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ ΠΈ ΡΠ»Π΅Π²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π·Π°Π·ΠΎΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π³Π΄Π΅ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΡΡ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ:
ΠΡΠΈΠΌΠ΅Ρ
div.fixed {
Β Β Β position: fixed;
Β Β Β
bottom: 0;
Β Β Β right: 0;
Β Β Β width:
300px;
Β Β Β border: 3px solid #73AD21;
}
This <div> element has position: fixed;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: absolute;
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° (Π²ΠΌΠ΅ΡΡΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ «ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ»).
ΠΠ΄Π½Π°ΠΊΠΎ ΠΡΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΡΡ ΠΏΡΠ΅Π΄ΠΊΠΎΠ², ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅Π»ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: «ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ-Π»ΠΈΠ±ΠΎ, ΠΊΡΠΎΠΌΠ΅ static
.
ΠΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ;ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <div> ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ;
ΠΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ:
ΠΡΠΈΠΌΠ΅Ρ
div.relative {Β Β Β position: relative;
Β Β Β width: 400px;
Β Β Β height: 200px;
Β Β Β border: 3px solid #73AD21;
}
div.absolute {
Β Β Β position: absolute;
Β Β Β
top: 80px;
Β Β Β right: 0;
Β Β Β width: 200px;
Β Β Β height: 100px;
Β Β Β border: 3px solid #73AD21;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π»ΠΈΠΏΠΊΠΈΠΉ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: sticky;
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΌΠ΅ΠΆΠ΄Ρ relative
ΠΈ fixed
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π² Π²ΠΈΠ΄ΠΎΠ²ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ΠΎ «Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ» (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Internet Explorer, EDGE 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Safari ΡΡΠ΅Π±ΡΠ΅Ρ a-WebKit-ΠΏΡΠ΅ΡΠΈΠΊΡ (ΡΠΌ. ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅). ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· top
, right
, bottom
ΠΈΠ»ΠΈ left
Π΄Π»Ρ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π»ΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π² Π²Π΅ΡΡ
Π½ΡΡ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ( top: 0
), ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΠ΅ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ
div.sticky {
Β Β Β position: -webkit-sticky; /* Safari */
Β Β Β position:
sticky;
Β Β Β top: 0;
Β Β Β background-color: green;
Β Β Β
border: 2px solid #4CAF50;
}
ΠΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ ΠΏΠ΅ΡΠ΅Π΄, ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π°Π΄ΠΈ, Π΄ΡΡΠ³ΠΈΠ΅).
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ°:
Because the image has a z-index of -1, it will be placed behind the text.
ΠΡΠΈΠΌΠ΅Ρ
img
{
Β Β Β
position: absolute;
Β Β Β
left: 0px;
Β Β Β
top: 0px;
Β Β Β
z-index: -1;
}
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΡΠ΅ΠΊΠ° Π²ΡΠ΅Π³Π΄Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΡΠ΅ΠΊΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ»ΠΈ Π΄Π²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ Π±Π΅Π· Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ z-index
, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ Π² HTML-ΠΊΠΎΠ΄Π΅, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠ²Π΅ΡΡ
Ρ.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ
ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ:
ΠΡΠΈΠΌΠ΅Ρ
Bottom Left
Top Left
Top Right
Bottom Right
Centered
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ:
ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΠ°Π΄Π°Π½ΠΈΠ΅ ΡΠΎΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΎΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π² ΡΡΡ ΡΠΈΠ³ΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
ΠΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
bottom | ΠΠ°Π΄Π°Π½ΠΈΠ΅ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° |
clip | ΠΠ°ΠΆΠΈΠΌΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
left | ΠΠ°Π΄Π°Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° |
position | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
right | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° |
top | ΠΠ°Π΄Π°Π½ΠΈΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° |
z-index | ΠΠ°Π΄Π°Π΅Ρ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
CSS — ΠΎΠ± ΡΡΠΎΠΌ ΡΠ°ΠΉΡΠ΅
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΠ±ΡΡΠ΄ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
. Π£ Π½Π΅Π³ΠΎ Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΈ ΠΈΡ
Π½Π°Π·Π²Π°Π½ΠΈΡ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΡΠΌΡΡΠ»Π° ΠΈ ΠΈΡ
Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡ
ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ, Π½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ ΡΡΠΎΠΈΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ.
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
.static {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
}
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
— Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ;
Π½ΠΈΠΊΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ. ΠΠΎΠ²ΠΎΡΡΡ, ΡΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ , Π° Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ , Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π»ΡΠ±ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ , ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ .
ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ
.relative1 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.relative2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ
: -20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π±Π΅Π»ΡΠΉ;
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
relative
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ static
, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ² Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π΅Π³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΡ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΉ Π·Π°Π·ΠΎΡ, ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΡΠΈΠ²Π΅Ρ! ΠΠΎΠΊΠ° Π½Π΅ ΠΎΠ±ΡΠ°ΡΠ°ΠΉ Π½Π° ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ.ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
.
Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ ΡΡΠΎΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ. Π― ΡΠ°Π·ΡΠ΅ΡΠ°Ρ Π²Π°ΠΌ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π½Π° ΡΡΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΉΡΠ°Ρ. ΠΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅Ρ Π΅Π³ΠΎ ΡΡΠ΄Π°:
.fixed {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π±Π΅Π»ΡΠΉ;
}
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π·Π°Π·ΠΎΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π³Π΄Π΅ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΡΡ Π±Ρ.
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠΌΠ΅ΡΡ Π½Π° ΡΠ΄ΠΈΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΡΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ. Π£Π·Π½Π°ΠΉΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠΈΡΡΠ°ΡΠΈΠΈ Π·Π΄Π΅ΡΡ.
Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
— ΡΡΠΎ ΡΠ°ΠΌΠΎΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. absolute
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ fixed
, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° , Π° Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΡΠ΅Π΄ΠΊΠΎΠ², ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅Π»ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Β«ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉΒ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΡΠΌ, ΠΊΡΠΎΠΌΠ΅ static
.
ΠΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
.relative {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.absolute {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 120 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. ΠΡΠ»ΠΈ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» position: static;
Π΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΊΠΎΠ»ΡΠ·Π½Π΅Ρ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π»Π° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½. ΠΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ»ΠΈΡΠ½ΡΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS. ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ
Π² Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ
ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ CSS Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ, ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ Π²Π°ΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΠ΅ Π½Π°Π²ΡΠΊΠΈ ΠΈ ΡΠ»ΡΡΡΠΈΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.ΠΠ°ΠΆΠ΅ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ CSS. ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΌ, ΠΌΠΎΠ³ΡΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS Π΄Π»Ρ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΊΠΎΡΠΈΡΡ Π²Π°Ρ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΡΠ΅ΡΡ.
CSS Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS position Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² CSS?
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS position ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ CSS top, right, bottom ΠΈ left ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ. ΠΠ° Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π²Π»ΠΈΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
Π’ΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ CSS
- Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- ΠΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
ΠΡΡΠΎΡΠ½ΠΈΠΊΠ‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML.ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π²Ρ ΠΌΠ°Π»ΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ. ΠΠ° Π½Π΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ CSS. ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²Ρ ΡΠ²ΡΠ·ΡΠ²Π°Π΅ΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ Π²Π΅ΡΡ Π½ΠΈΠΉ , ΠΏΡΠ°Π²ΡΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²ΡΠΉ , ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡ, ΠΊΠ°ΠΊ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index .
ΠΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
ΠΡΡΠΎΡΠ½ΠΈΠΊΠΡΠΈ ΡΡΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°, Π½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.Π§ΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² top, right, bottom ΠΈ left. ΠΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΎΠΊΡΡΠ³ ΠΎΠ΄Π½ΠΎΠ³ΠΎ, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎΡΡ Π² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π½Π΅ Π·Π°ΡΡΠΎΠ½ΡΡΡ, Π½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΠ» Π±Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ z-index Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π° auto, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ ΡΡΡΠΈ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ Π½ΠΎΠ²ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠ»ΠΎΠ΅Π², ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
ΠΡΡΠΎΡΠ½ΠΈΠΊΠΡΠΈ ΡΡΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°.ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ). ΠΠ½ Π½Π΅ Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ. ΠΠ΅ ΠΎΡΡΠ°Π»ΠΎΡΡ ΠΌΠ΅ΡΡΠ° Π½Π° ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²Π΅ΡΡ Π½ΠΈΠΉ , ΠΏΡΠ°Π²ΡΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²ΡΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ·ΠΈΡΠΈΡ: ΠΠ±ΡΠΎΠ»ΡΡΠ½Π°Ρ
ΠΡΡΠΎΡΠ½ΠΈΠΊΠΡΠΈ ΡΡΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², Π½ΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠΊΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°.ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ , Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π½Π΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΌΠ΅ΡΡΠ°.
ΠΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π½Π΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ , ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ , Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΎΠ΅ .
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π²Π΅ΡΡ Π½ΠΈΠΉ , ΠΏΡΠ°Π²ΡΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²ΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ z-index Π½Π΅ ΡΠ°Π²Π½ΠΎ auto , ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ·ΠΈΡΠΈΡ: Π»ΠΈΠΏΠΊΠ°Ρ
ΠΡΡΠΎΡΠ½ΠΈΠΊΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΎΠ½ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ — Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Β«ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡΒ» Π½Π° ΠΌΠ΅ΡΡΠ΅.
ΠΡΠ΅Π³Π΄Π° ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Bootstrap CSS, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡ Π²Π°ΠΌ ΡΡΠΈ ΠΏΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ±ΡΠΈΠΌΠΈ Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ CSS position, ΠΈ ΡΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ»Π°ΡΡΠ° Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²Π΅ΡΡ , ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½ΠΈΠ· ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ Π²Π΅ΡΡ . ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΊΡΠ°ΡΠΊΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½ΠΈΠΆΠ΅.
- fixed-top: Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡΡΡ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, ΠΎΡ Π²Π°ΡΡΠ²Π°Ρ ΠΎΡ ΠΊΡΠ°Ρ Π΄ΠΎ ΠΊΡΠ°Ρ
- fixed-bottom: Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡΡΡ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, ΠΎΡ Π²Π°ΡΡΠ²Π°Ρ ΠΎΡ ΠΊΡΠ°Ρ Π΄ΠΎ ΠΊΡΠ°Ρ
- sticky-top: Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, ΠΎΡ ΠΊΡΠ°Ρ Π΄ΠΎ ΠΊΡΠ°Ρ, ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΈΠΌΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΊΠΎΠ΄ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΈ CSS Bootstrap.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° — Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Bootstrap, ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ, — Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½Π°Ρ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ CSS
ΠΠΎΠ³Π΄Π° Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅, ΠΎΠ½ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ CSS. ΠΠΎΠ³Π΄Π° Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ, ΠΎΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ CSS.Π ΠΎΠ±ΠΎΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΡΠ°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΄Π°Π»ΡΡΡΡΡ Ρ Π΄ΠΎΡΠΎΠ³ΠΈ, Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΌ Π½Π΅ Π±ΡΠ»ΠΎ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS:
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS:
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ CSS
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ CSS ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΎΡΠ»ΠΈΡΠΈΠ΅ΠΌ: Π΅ΡΠ»ΠΈ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ , ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ ΠΈΠ»ΠΈ ΡΠΈΠ»ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ Π½Π΅Ρ , Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΠΎΠΊΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ none , ΠΏΡΠ΅Π΄ΠΎΠΊ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS:
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΎΠ±ΡΡΠ΄ΠΈΠ»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS
ΠΡΠ΅ ΡΠ΅ ΠΆΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ HTML-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π»ΡΠ±ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS ΠΈΠ»ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ², ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS:
HTML:
CSS:
. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
}
ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡ Π² CSS
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Π²ΡΠ΅ ΡΠ΅ ΠΆΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΏΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°.Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° HTML ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π»ΡΠ±ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS ΠΈΠ»ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡ Π² CSS:
HTML:
ΠΠ°Ρ ΡΠ΅ΠΊΡΡ ΠΈΠ΄Π΅Ρ ΡΡΠ΄Π°
CSS:
.Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
}
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²Π°ΡΠΈΡ
Π·Π½Π°Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS Position Π‘Π²ΠΎΠΉΡΡΠ²ΠΎCSS position — ΡΡΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ Π½Π°Π²ΡΠΊ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π΄Π»Ρ ΠΎΠ²Π»Π°Π΄Π΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°.ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΠΊ Π½Π΅ΠΉ, ΠΈΡΡΠ»Π΅Π΄ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ CSS Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅. ΠΠΎΠ³Π΄Π° Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π³ΠΎΡΠΎΠ²Ρ ΠΊ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠΈΠΌ Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎΠΌ ΠΏΠΎ HTML ΠΈ CSS Π΄Π»Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ»ΠΎΠ³ΠΎΠ² Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ .
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅— ΠΠΎΠΏΡΡΠ½ΡΠΉ Π²Π΅ΡΠ΅Ρ CSS
ΠΡΠΎΠΊΡΡΡΠΈΡΠ΅ ΠΌΠ΅Π½Ρ!
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Π¦Π΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem ΠΈ nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. ΠΠ»Π°ΡΡ aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
Sed dignissim lacinia nunc. Curabitur ΠΌΡΡΠΈΡΠ΅Π»Ρ. Pellentesque nibh. Aenean quam. In Scelerisque sem at dolor. ΠΠ΅ΡΠ΅Π½Π°Ρ ΠΌΠ°ΡΡΠΈΡ. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. ΠΠ»Π°ΡΡ aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nam nec ante. Sed lacinia, urna non tincidunt mattis, toror neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse Potenti. Nunc feugiat mi a tellus conquat imperdiet. Vestibulum sapien.Proin quam. ΠΡΠΈΠ°ΠΌ ΡΠ»ΡΡΡ. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Π¦Π΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ euismod lacus luctus magna.
Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis Π² faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue.Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi.
Integer lacinia sollicitudin massa. Cras metus. Π‘Π΅Π΄ Π°Π»ΠΈΠΊΠ΅Ρ ΡΠΈΡΡΡ ΠΌΡΡΠΈΡΠ΅Π»Ρ. Π¦Π΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. ΠΠ½Π΅Π°Π½ ΠΠ°ΠΎΡΠ΅Ρ. Vestibulum nisi lectus, Commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, ΠΎΠ±ΡΠΊΠ½ΠΎΠ²Π΅Π½Π½ΡΠΉ ΠΏΠΎΡΡΡΠΈΠΊ, cursus quis, aliquet eget, justo.Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque.
Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus Conctetuer Risus et Tortor. Lorem ipsum dolor sit amet, conctetur adipiscing elit. Π¦Π΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem ΠΈ nibh elementum imperdiet.Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. ΠΠ»Π°ΡΡ aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur ΠΌΡΡΠΈΡΠ΅Π»Ρ. Pellentesque nibh. Aenean quam. In Scelerisque sem at dolor. ΠΠ΅ΡΠ΅Π½Π°Ρ ΠΌΠ°ΡΡΠΈΡ. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. ΠΠ»Π°ΡΡ aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, toror neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse Potenti. Nunc feugiat mi a tellus conquat imperdiet. Vestibulum sapien.Proin quam.
ΡΠ΅ΡΡΠΎΠ² CSS — ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ΅ΡΡΠΎΠ² CSS — ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΠ΅ΡΠ½ΡΡΡΡΡ ΠΊ ΠΎΠ³Π»Π°Π²Π»Π΅Π½ΠΈΡ.
Π IE7, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ Β«Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉΒ» ΠΈΠ»ΠΈ Β«ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉΒ», Π° Π·Π°ΡΠ΅ΠΌ Β«ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉΒ», Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»ΠΎΡ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
Π Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ WebKit, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ Β«ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉΒ», Π° Π·Π°ΡΠ΅ΠΌ Β«ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉΒ», Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ»ΠΎΠΉ ΡΠ΅ΡΡΠ΅ΡΡΡ.
ΠΠΈ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΡΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΎΠ±ΡΡΠ²ΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
— ΠΎΡΠΎΠ±ΡΠΉ ΡΠ»ΡΡΠ°ΠΉ; ΡΠΌ. ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
Π’Π΅ΡΡ
ΠΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ
, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π²Π΅ΡΡ : 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 1em; Π³ΡΠ°Π½ΠΈΡΠ°: 1px solid # cc0000;
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π§Π΅ΡΡΡΠ΅ ΡΠ΅Π½Π½ΠΎΡΡΠΈ
ΠΏΠΎΠ·ΠΈΡΠΈΡ
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ΅ΡΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
,
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
. ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
— Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ; Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ
ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ CSS.
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, ΡΠ»Π΅Π²Π°
ΠΈ / ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π°
ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ.ΠΡΠ΅ ΠΎΠ½ΠΈ Π΄Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ / Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π°.
ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΡΡ / ΠΏΡΠ°Π²Π°Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ°. Π§ΡΠΎ ΡΡΠΎ Π·Π° ΠΎΡΠΈΠ΅Π½ΡΠΈΡ?
-
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ
: Π½Π΅Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½. -
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
: ΠΏΠΎΠ·ΠΈΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π±Ρ Π·Π°Π½ΡΠ» Π±Π»ΠΎΠΊ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π½Π΅ Π±ΡΠ» ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ (Ρ. Π. ΠΡΠ»ΠΈ Π±Ρ ΠΎΠ½ ΠΈΠΌΠ΅Π» ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ
). -
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ
: ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ-ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ ΡΠΎ Π΅ΡΡΡ , Π° Π½Π΅ , ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ
.ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π½Π΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ -
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
: ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°).
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: static
Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π΄Π°Π΅Ρ Π΅ΠΌΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ
Π½Π΅Π»ΡΠ·Ρ ΡΠ΄Π²ΠΈΠ½ΡΡΡ Ρ ΡΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ; ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π»ΡΠ±ΡΠ΅ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, ΡΠ»Π΅Π²Π°
, ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π°
ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ.
ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄Π°Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ.
ΡΡΠΎ, Π½ΠΎ Π²ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡΡΠ΅ΡΡΡ ΡΡΠΌΠΌΠΎΠΉ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, ΡΠ»Π΅Π²Π°
, ΠΈ / ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π°
Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠΈ Π΄Π°ΡΡ. ΠΠΎΡΡΠΎΠΌΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΠ°ΠΊΠΈΠΌ Π·Π°ΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ
ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π³ΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠ΅Π½Π½ΡΠΌ. ΠΠ΅ΡΡΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Π» ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΡΡΡΠΌ.
Π‘Π°ΠΌΠΈ ΠΏΠΎ ΡΠ΅Π±Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²Ρ ΠΏΠΎΡΡΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π°Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠΈΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»ΡΠΆΠΈΡ Π²ΠΌΠ΅ΡΠ°ΡΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ; ΠΈ ΡΡΠΎ
ΠΠ±ΡΡΠ½Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
.
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ
Π² ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Ρ: ΠΎΠ½ Π·Π°ΠΊΡΡΠ²Π°Π΅Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ ΠΌΠΎΠ³ Π±Ρ Π·Π°Π½ΡΡΡ.
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΡΡΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌΠΈ ΡΠΊΡΠ°Π½Π°ΠΌΠΈ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ
— ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅ΡΡΠΎΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½Π°Ρ Π·Π°ΠΏΠΈΡΡ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅.
Understanding CSS Positioning Methods — Tutorial Republic
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS
ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°. Π CSS Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ Π±ΡΠ΄ΡΡ ΠΎΠΏΠΈΡΠ°Π½Ρ ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΡΡΠ°ΡΠΈΡΠ½ΠΎ. ΠΠ° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π²Π»ΠΈΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
ΠΈ z-index
.
.box {
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 7dc765;
}
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π ΡΡ
Π΅ΠΌΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠΊΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΊΡ. ΠΠ°ΡΠ΅ΠΌ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΈΠ· ΡΡΠΎΠ³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ — Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ / ΠΈΠ»ΠΈ Π»Π΅Π²ΡΠΉ
ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΡΠΉ
.
.box {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½ΠΎ ΠΎΠ½ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ. ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΡΠ³Π»Π° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ²: Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠ²ΠΎΠ΄ΡΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΌΠ΅ΡΡΠ° ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»Ρ, ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ.
.box {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
.box {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π ΡΠ»ΡΡΠ°Π΅ ΡΠΈΠΏΠ° Π½ΠΎΡΠΈΡΠ΅Π»Ρ Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ (Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ°ΡΠΈ).IE7 ΠΈ IE8 ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ
.
Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ CSS | by Leanne Zhang
Π― ΠΏΠΎΡΡΠ°ΡΠΈΠ» ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠ΅Π½Ρ ΡΡΠΎ ΡΠ±ΠΈΠ»ΠΎ Ρ ΡΠΎΠ»ΠΊΡ, ΠΈ Ρ ΡΠ΅ΡΠΈΠ» ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ Π² ΠΏΠΎΡΠΎΠΊΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²Π°
Π²Π΅ΡΡ Π½ΠΈΠΉ
,ΠΏΡΠ°Π²ΡΠΉ
,Π½ΠΈΠΆΠ½ΠΈΠΉ
,Π»Π΅Π²ΡΠΉ
ΠΈz-index
Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ. — ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ MDN
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠ΅Π΄ΠΊΠ°.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ 4 Π±ΠΎΠΊΠ°ΠΌΠΈ Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρindex.html
One
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
div >ΡΡΠΈΠ»Ρ.css
.parent {
Π³ΡΠ°Π½ΠΈΡΠ°: 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ Ρ ΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠΎΡΠΊΠ°ΠΌΠΈ;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
} .box {
display: inline-block;
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
} #two {
ΡΠΎΠ½: Π·Π΅Π»Π΅Π½ΡΠΉ;
}Π’Π΅ΠΊΡΡΠΈΠΉ ΠΊΠΎΠ΄: JsBin
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ. ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² ΠΏΠΎΡΠΎΠΊΠ΅.
Π§ΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ GreenBox, Π½ΠΎ Π½Π΅ Ρ ΠΎΡΠΈΠΌ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ?
position: relativeΠΠ΄Π΅ΡΡ Π½Π° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ Π·Π΅Π»Π΅Π½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π° ΠΈ ΡΠ²Π΅ΡΡ Ρ, Π½Π΅ ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π·Π°Π·ΠΎΡ Π΄Π»Ρ Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» Π±Ρ, Π΅ΡΠ»ΠΈ Π±Ρ Π½Π΅ Π±ΡΠ».
#two {
top: 20px;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: Π·Π΅Π»Π΅Π½ΡΠΉ;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
}Π’Π΅ΠΊΡΡΠΈΠΉ ΠΊΠΎΠ΄: JsBin
ΠΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Π°Ρ.
position: absoluteΠΡΠΈΠΌΠ΅Π½ΡΡ position: absolute ΠΊ GreenBox, , Π° Π½Π΅ , ΠΎΡΡΠ°Π²ΠΈΡ ΠΏΡΠΎΠ±Π΅Π» ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» Π±Ρ.ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ GreenBox ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ (ΠΏΡΠ½ΠΊΡΠΈΡΠ½Π°Ρ Π³ΡΠ°Π½ΠΈΡΠ°). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π»Π΅Π²ΠΎ ΠΈ Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π½Π°ΡΠ°Π»Π° ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ.
#two {
top: 20px;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: Π·Π΅Π»Π΅Π½ΡΠΉ;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
}ΠΠΈΠ²ΠΎΠΉ ΠΊΠΎΠ΄: JsBin
position: relative
ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊposition: absolute
ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΌΠ°ΠΊΠ΅Ρ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ .ΠΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS position ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ HTML. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, left ΠΈ bottom ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΡΠ°Ρ ΠΏΠΎΠ»Ρ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS position ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π½ΡΠΆΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ — Π²Π°ΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ Ρ ΠΎΡΠΎΡΠ΅Π³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠΎΡ Π·Π΄Π΅ΡΡ ΠΈ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS position.Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎΡΠΈΡΠ°Π² ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, Π²Ρ ΡΡΠ°Π½Π΅ΡΠ΅ ΡΠΊΡΠΏΠ΅ΡΡΠΎΠΌ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° position Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² CSS.
ΠΠΎΠ·ΠΈΡΠΈΡ CSS
ΠΠ°ΠΉΠ΄ΠΈ ΡΠ²ΠΎΠΉ ΠΌΠ°ΡΡ Π½Π° ΡΡΠ΅Π½ΠΈΡΠΎΠ²ΠΎΡΠ½ΠΎΠΌ Π»Π°Π³Π΅ΡΠ΅
- ΠΠ°ΡΡΠ΅ΡΠ° Karma ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π²Π°ΠΌ Ρ Π»ΡΡΡΠΈΠΌΠΈ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΡΠ΅Π±Π½ΡΠΌΠΈ ΠΊΡΡΡΠ°ΠΌΠΈ
- ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΊΡΠΊΠ»ΡΠ·ΠΈΠ²Π½ΡΠ΅ ΡΡΠΈΠΏΠ΅Π½Π΄ΠΈΠΈ ΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΡΡΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ:
ΠΡΡΡ ΡΡΠ΄ ΡΠΈΡΡΠ°ΡΠΈΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅ΡΠΈΡΡ, ΡΡΠΎ Ρ ΠΎΡΠΈΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π° Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΡΡ ΠΏΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅:
- ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
- ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
- ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
- Π»ΠΈΠΏΠΊΠΈΠΉ
- Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π²ΡΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, bottom, left ΠΈ right Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΠΊ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ CSS
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΠ°ΡΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° position. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π²Π»ΠΈΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS top, bottom, left ΠΈ right. ΠΡΠ°ΡΠ·Π΅ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, Π΅ΡΠ»ΠΈ Π² ΠΊΠΎΠ΄Π΅ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΡΠ΅ΠΌ Π±Π»ΠΎΠΊ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅ΠΊΡΡ. ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄:
<ΡΡΠΈΠ»Ρ> .outer { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅; Π³ΡΠ°Π½ΠΈΡΠ°: 2px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ; }ΠΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»Π΅.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ
Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° HTML / CSS.ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π±ΠΎΠΊΡ Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ; ΡΠΊΠΎΡΠ΅Π΅, Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π£ Π½Π°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠΏΠ»ΠΎΡΠ½Π°Ρ Π³ΠΎΠ»ΡΠ±Π°Ρ ΡΠ°ΠΌΠΊΠ° ΡΠΈΡΠΈΠ½ΠΎΠΉ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ. ΠΡΠ° Π³ΡΠ°Π½ΠΈΡΠ° Π΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΌΠΊΡ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΠΎΠΉ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅.ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left.
ΠΡ Ρ ΠΎΡΠΈΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ ΠΈ Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡ Π΅Π΅ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°:
ΠΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
<ΡΡΠΈΠ»Ρ> .outer { ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π³ΡΠ°Π½ΠΈΡΠ°: 2px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅; Π²Π½ΠΈΠ·Ρ: 0; ΡΠΏΡΠ°Π²Π°: 0; }ΠΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»Π΅.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ
Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° HTML / CSS.Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²Π° bottom: 0 ΠΈ right: 0 ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ»Π΅ Π² Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡΠ°Π²ΡΠΉ ΡΠ³ΠΎΠ» Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° Π½Π°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ°Ρ Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠΏΠ»ΠΎΡΠ½ΡΡ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠΈΠ½ΡΡ ΡΠ°ΠΌΠΊΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ. ΠΡΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π΅Π»Π°ΡΡ Π½Π°ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ Π»Π΅Π³ΠΊΠΎ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ.
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²ΡΡΠ΅, Π½Π°ΡΠ΅ ΠΏΠΎΠ»Π΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ Π½Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ Π²Π½ΠΈΠ·, ΠΏΠΎΠ»Π΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ Π²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ»Π΅ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ ΡΠΊΡΠ°Π½Π° Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Ρ top, bottom, left ΠΈΠ»ΠΈ right. ΠΡΠΈ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° left. ΠΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°:
ΠΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
<ΡΡΠΈΠ»Ρ> .outer { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; ΡΠ»Π΅Π²Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π³ΡΠ°Π½ΠΈΡΠ°: 2px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ; }ΠΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»Π΅.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ
Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° HTML / CSS.Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ left, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ Π½Π°Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π²Π»Π΅Π²ΠΎ Π½Π° 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΌΠ΅ΠΆΠ΄Ρ Π½Π°ΡΠ°Π»ΠΎΠΌ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π½Π°ΡΠ°Π»ΠΎΠΌ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ Π΅ΡΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ Π² 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΡΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position: relative ΠΈ left: 50px.
ΠΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ ΡΠ»Π΅Π²Π° ΠΎΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ, Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΈΠΌΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ°ΡΡΠ΅ΠΆΠΊΠ°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π»ΠΈΠΏΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Ρ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. Π’ΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ — ΡΡΠΎ, ΠΏΠΎ ΡΡΡΠΈ, ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΠ³Π΄Π° Π»ΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ, ΠΎΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°.ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠΌ ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ· Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π½Π΅ ΡΠΏΡΡΡΠΈΠ» ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· Π²ΠΈΠ΄Ρ.
ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Ρ ΠΏΠ°Π½Π΅Π»ΡΠΌΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡΡΡ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·.
ΠΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠΊΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΎΡΡ Π²Π²Π΅ΡΡ Ρ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΡΠΎ ΠΏΠΎΠ»Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΠΏΠΎΡΠ»Π΅ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π°Π²Π΅ΡΡ Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ:
Lorem ipsum dolor sit amet,β¦
ΠΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»Π΅.
Pulvinar pellentesque ΠΎΠ±ΠΈΡΠ°ΡΠ΅Π»Ρ morbi tristique senectus et netus et malesuada. Tortor Π½Π° Π°ΡΠΊΡΠΈΠΎΠ½Π΅ urna nunc id. β¦
<ΡΡΠΈΠ»Ρ> .Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠΏΠΊΠΎΠ΅; Π²Π΅ΡΡ : 0; Π³ΡΠ°Π½ΠΈΡΠ°: 2px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ; }ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ
Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° HTML / CSS.ΠΠ° ΡΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΠΎΠ»Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° ΡΠ΅ΠΊΡΡΠ°. ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΅ΡΠ΅ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ» ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ· ΠΈ Π½Π΅ Π²ΡΡΡΠ΅ΡΠΈΠ» ΠΏΠΎΠ»Π΅. ΠΠΎΡ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π΅ Π²Π½ΠΈΠ·:
ΠΠ²Π΅ΡΡ Ρ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ Π°Π±Π·Π°Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
Lorem ipsumβ¦
. ΠΡ ΠΈΡΠΏΡΠ°Π²ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ ΡΠ΅ΠΊΡΡ. ΠΡΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅
ΠΏΠΎΠ΄ ΡΡΠΈΠΌ Π°Π±Π·Π°ΡΠ΅ΠΌ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ Π²Π½ΠΈΠ· Π΄ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΎΠ±ΡΡΠ²ΠΈΠ»ΠΈ, Π±Π»ΠΎΠΊ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°.ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ, ΠΏΠΎΠ»Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°.ΠΠΎΠ»Π΅ Π²Π΅ΡΠ½Π΅ΡΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ ΡΠ΅ΠΊΡΡΠ°. ΠΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π°Π΄ ΠΏΠΎΠ»Π΅ΠΌ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ, ΡΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ, ΡΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠΌ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π°Π±Π·Π°Ρ ΡΠ΅ΠΊΡΡΠ°.ΠΡΠΎΡ ΡΡΠΈΠΊ ΠΌΠΎΠ³ ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
ΠΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΡΠ΅ΠΌ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
<ΡΡΠΈΠ»Ρ> .outer { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; Π³ΡΠ°Π½ΠΈΡΠ°: 2px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠ»ΠΎ-Π³ΠΎΠ»ΡΠ±ΠΎΠΉ; ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } .Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; ΡΠ»Π΅Π²Π°: 0; Π²Π½ΠΈΠ·Ρ: 0; Π³ΡΠ°Π½ΠΈΡΠ°: 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°; }ΠΡΠΎ Π²Π½Π΅ΡΠ½ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠ°.
ΠΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»Π΅.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ
Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° HTML / CSS.Π Π½Π°ΡΠ΅ΠΌ HTML-ΡΠ°ΠΉΠ»Π΅ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π΄Π²Π° Π±Π»ΠΎΠΊΠ°. ΠΡ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΡΠΉ Π±Π»ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π°
ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ Π΅ΠΌΡ ΠΊΠ»Π°ΡΡ external . ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π² ΠΏΠΎΠ»Π΅ Π±ΡΠ΄ΡΡ ΡΡΠΈΠ»ΠΈ CSS, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ . ΠΡ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΠΌ Π²ΡΠΎΡΠΎΠΉ Π±Π»ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π°ΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ Π΅ΠΌΡ ΠΊΠ»Π°ΡΡ inner .
Π Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ CSS ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½:
- Π Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
- ΠΠΌΠ΅Π΅Ρ ΡΠΏΠ»ΠΎΡΠ½ΡΡ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠΈΠ½ΡΡ ΡΠ°ΠΌΠΊΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ.
- ΠΡΠ΄ΡΡΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π½Π°Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΡΠΈΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½:
- ΠΡΠ΄ΡΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Ρ.
- Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ left: 0, bottom: 0).
- ΠΠΌΠ΅Π΅Ρ ΡΠΏΠ»ΠΎΡΠ½ΡΡ ΡΠΎΠ·ΠΎΠ²ΡΡ ΡΠ°ΠΌΠΊΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈ ΡΠΎΠ·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ (
Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅
) Π² Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»ΡΠ²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ
. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ fixed, ΡΠΎΠ·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π±ΡΠ»ΠΎ Π±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π²Π½ΠΈΠ·Ρ Π½Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position, ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»!
.