Css fixed: position | htmlbook.ru
position | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ΅ΡΡΠΈΠΈ CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: absolute | fixed | relative | static | inherit
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- absolute
- Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ»ΠΎΠ²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅Ρ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom, ΡΠ°ΠΊΠΆΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊ, Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ static ΠΈΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ fixed, relative ΠΈΠ»ΠΈ absolute, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- fixed
- ΠΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ absolute,
Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left,
top, right ΠΈ bottom ΡΠΎΡΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ°ΡΠ·Π΅Ρ Firefox Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ,
Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π½ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΠΈ ΠΎΠ½ΠΎ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ
Π² ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Opera Ρ ΠΎΡΡ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π½ΠΎ
ΠΎΠ½ΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. - relative
- ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅
ΡΠ²ΠΎΠΉΡΡΠ² left, top,
right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ
ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. - static
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left,
top, right ΠΈ bottom
Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ. - inherit
- ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠΈΠΌΠ΅Ρ
HTML5CSS2.1IECrOpSaFx
<!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="images/girl.jpg" alt="ΠΠ΅Π²ΠΎΡΠΊΠ°" />
</div>
</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(«elementID»).style.position
ΠΡΠ°ΡΠ·Π΅ΡΡ
ΠΡΠ°ΡΠ·Π΅Ρ Internet Explorer 6 Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ fixed Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ. Internet Explorer Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 8.0 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ inherit.
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
CSS ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΠ΅Ρ html-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΊΠ°ΠΊ Π΄Π΅ΡΠ΅Π²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠΎΠ΄ΡΠ»Ρ CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° (Ρ.Π΅. ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ ΠΈΠ· Β«ΠΏΠΎΡΠΎΠΊΠ°Β»).
Π CSS2 ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΡΡ. ΠΠΎΠ΄ΡΠ»Ρ CSS3 Π΄ΠΎΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΡΡ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅ΡΡΡ:
- ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈ ΡΠΈΠΏΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,
- ΡΡ Π΅ΠΌΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ (Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ, ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅),
- ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π΄Π΅ΡΠ΅Π²Π΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°,
- Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ.Π΄.).
Π‘Ρ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π CSS Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠ΅ΠΌΡ ΡΡ Π΅ΠΌΠ°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π±Π»ΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ display block, list-item ΠΈΠ»ΠΈ table), ΡΡΡΠΎΡΠ½ΡΠΉ (Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ) ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ display inline, inline-block ΠΈΠ»ΠΈ inline-table), ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈ Β«Π»ΠΈΠΏΠΊΠΎΠ΅Β» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΈ ΡΡΡΠΎΠΊΠΈ.
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅
Π ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡΠ΅ΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π±Π»ΠΎΠΊ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΡΠ°Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ float: left ΠΈ Π»Π΅Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ float: right.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π ΠΌΠΎΠ΄Π΅Π»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ Π΅ΠΌΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ position: absolute; ΠΈ position: fixed;.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Β«Π²Π½Π΅ ΠΏΠΎΡΠΎΠΊΠ°Β» ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
1. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°(ΠΎΠ²) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (containing block). Π ΠΎΠ±ΡΠΈΡ ΡΠ»ΠΎΠ²Π°Ρ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ β ΡΡΠΎ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π ΡΠ»ΡΡΠ°Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ html ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body, ΠΊΠΎΡΠΎΡΡΠΉ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. Π ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ β ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ.
- ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: static; ΠΈΠ»ΠΈ position: relative; ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΊΡΠ°Π΅ΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΠΈΠ»ΠΈ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ.
- Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: fixed; ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
- ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: absolute; ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ position: absolute/relative/fixed ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΠΊ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠ»ΡΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° padding;
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΎΠΊ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ;
β Π΅ΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅Ρ, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ. - ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
2. ΠΡΠ±ΠΎΡ ΡΡ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π°Π»Π³ΠΎΡΠΈΡΠΌΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
position | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
static | ΠΠ»ΠΎΠΊ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
relative | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠ»ΡΡΠ°ΡΡ
, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ, Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΠ±ΡΡ
ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ². Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΠ°ΠΊΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ². ΠΠ»ΠΈΡΠ½ΠΈΠ΅ position: relative; Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: |
absolute | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° (ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ) Π·Π°Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² top, right, bottom ΠΈ left. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²Π½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π½Π΅ Π²Π»ΠΈΡΡ Π½Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΡΡΠΈΠ½ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡΡΡΠΏΡ margin Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ ΡΡ Π»ΠΎΠΏΡΠ²Π°ΡΡΡΡ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² Ρ position: absolute;. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΠΌΠΎΠ³ΡΡ ΡΠΊΡΡΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΡΡΡΡ), Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ Π±Π»ΠΎΠΊΠΎΠ². |
sticky | ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. ΠΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΠ»ΠΈ Π½ΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ. Β«ΠΠΈΠΏΠΊΠΈΠΉΒ» Π±Π»ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ². |
fixed | Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Ρ ΠΎΡΠ»ΠΈΡΠΈΠ΅ΠΌ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π’Π°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π ΡΡΠΎΠΌ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π½ΠΈΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»ΠΎΠΊΠΈ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
position: initial;
position: inherit;
Π ΠΈΡ. 1. Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
3. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom, left
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ static. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠΈΠ·ΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ:
top | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ top Π·Π°Π΄Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ ΡΡΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ margin) ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½ΠΈΠΆΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (ΡΠΎ Π΅ΡΡΡ Π±Π»ΠΎΠΊΡ Π·Π°Π΄Π°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ ΡΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ).
right | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ right ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ ΡΡΠ΅ΡΠΎΠΌ Π΅Π³ΠΎ margin) ΡΠΌΠ΅ΡΠ΅Π½ Π²Π»Π΅Π²ΠΎ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
bottom | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠΎΡΡ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ bottom ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π±Π»ΠΎΠΊΠ° ΡΠΌΠ΅ΡΠ΅Π½ Π²Π²Π΅ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
left | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΡ ΡΠΈΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π΄Π»ΠΈΠ½Π° | Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
% | ΠΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π±Π»ΠΎΠΊΠ° β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ left ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠΌΠ΅ΡΠ΅Π½ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ β Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ.
4. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float
ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±Π»ΠΎΠΊΠ°ΠΌ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π½Π° ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅. Β«ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊΒ» ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π½Π΅ ΠΊΠΎΡΠ½Π΅ΡΡΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠ»ΠΈ ΠΈΠΌΠ΅Π΅ΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π±Π»ΠΎΠΊ, Π²Π½Π΅ΡΠ½ΡΡ Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΡΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ. Π’Π΅ΠΌ ΡΠ°ΠΌΡΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠΌΠ΅ΡΡΠΈΡΡΡ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄ΡΡ Π΅Π³ΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ, Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ ΡΡΡΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ, ΠΎΡΠ²ΠΎΠ±ΠΎΠΆΠ΄Π°Ρ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Ρ Π΅Π³ΠΎ.
ΠΡΠ°Π²ΠΈΠ»Π°, ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±ΠΎΠΊΠΎΠ², ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ float.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
float | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
none | ΠΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
left | ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
right | ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΏΡΠ°Π²ΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
float: left;
float: right;
float: none;
float: inherit;
ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΡΡΠ΅ΡΠΎΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΡΠ°ΠΌΠΎΠΊ. ΠΠ΅ΡΡ Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ margin ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ ΡΡ Π»ΠΎΠΏΡΠ²Π°ΡΡΡΡ.
ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ margin, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΠΎΠ΅ (ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅) Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° display Π½Π° display: block Π΄Π»Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ inline-table ΠΌΠ΅Π½ΡΠ΅Ρ Π½Π° table.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ display: flex ΠΈ display: inline-flex. ΠΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
Π ΠΈΡ. 2. ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
5. Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΠ΄ΠΎΠΌ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ clear
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ clear ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Ρ Π±Π»ΠΎΠΊΠ°/Π±Π»ΠΎΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠ»Π΅Π³Π°ΡΡ ΠΊ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. Π CSS2 ΠΈ CSS 2.1 ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π½Π΅ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
clear | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
none | ΠΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
left | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
right | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΡΠ°Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
both | Π‘ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π²ΡΡΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;
ΠΠ»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ Π³ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ {overflow: hidden;}.
6. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
Π CSS ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π±Π»ΠΎΠΊΠΈ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z Π΄ΡΡΠ³ Π½Π°Π΄ Π΄ΡΡΠ³ΠΎΠΌ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π±Π»ΠΎΠΊΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
Π ΠΈΡ. 3. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z
ΠΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄Π΅ΡΠ΅Π²ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΎΡΠΈ Z ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ»ΠΎΠΊΠΈ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ, Π° Π±Π»ΠΎΠΊΠΈ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ½ΠΈΠ·Ρ Π²Π²Π΅ΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠ»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡ ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ, ΡΡΠΎ ΠΈ Π±Π»ΠΎΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π΅ΠΌΡ Π½Π΅ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ z-index.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ.
z-index | |
---|---|
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅: | |
auto | ΠΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π² 0. ΠΡΠ»ΠΈ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π½ΠΎ position: fixed; ΠΈΠ»ΠΈ ΡΡΠΎ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΠ»Π°. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π³Π»ΡΠ±Ρ ΡΠΊΡΠ°Π½Π°. |
inherit | ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;
6.1. ΠΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index ΠΈ position Π½Π΅ Π·Π°Π΄Π°Π½Ρ ΡΠ²Π½ΠΎ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°Π²Π΅Π½ ΠΏΠΎΡΡΠ΄ΠΊΡ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅:
- ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <html>, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
- ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΠΈ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅.
- ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ float Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
- Π‘ΡΡΠΎΠΊΠΎΠ²ΡΠ΅ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ position ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΈΠ· Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ (Π΅ΡΠ»ΠΈ Π΄Π»Ρ Π½ΠΈΡ Π½Π΅ Π·Π°Π΄Π°Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π²Π»ΠΈΡΡΡΠΈΠ΅ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ β opacity, filter, transform):
- ΠΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <html>, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ z-index.
- ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΠΈ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅.
- ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ float Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅.
- Π‘ΡΡΠΎΠΊΠΎΠ²ΡΠ΅ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ z-index: 0; ΠΈ z-index: auto;.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position | CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠ°ΠΊΠΎΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ).
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ°ΠΊΠΈΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠ°ΠΊ top, right, bottom ΠΈ left, ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΠΈΠΆΠ΅ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
- position: relative (ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ (ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΠΏΡΠ°Π²ΠΎ). ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ left: 200px;
- position: absolute (ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° (ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΠΏΡΠ°Π²ΠΎ), ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ΅Π΄ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — static, ΠΈΠ½Π°ΡΠ΅ ΠΎΡΡΡΡΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΊΠ°ΠΊ ΠΏΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ position fixed). ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ left: 40px.
- position: fixed (ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΠΏΡΠ°Π²ΠΎ). ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ left: 40px.
- position: static (ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ — ΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ). ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° left Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅ CSS Π² ΡΡΠ°ΡΡΠ΅ «ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS».
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
CSS ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
position:"static | absolute | fixed | relative | initial | inherit" ;
JavaScript ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
object.style.position = "absolute"
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
absolute | ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ΅Π΄ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — static, ΠΈΠ½Π°ΡΠ΅ ΠΎΡΡΡΡΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΊΠ°ΠΊ ΠΏΡΠΈ position: fixed). |
fixed | Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. |
static | Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΠΏΠΎΡΠΎΠΊΠ΅ HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
relative | ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΠ΅ΡΡΠΈΡ CSS
CSS2
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ
ΠΠ΅Ρ.
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅
ΠΠ΅Ρ.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
<!DOCTYPE html> <html> <head> <title>ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position</title> <style> body { background-color:khaki; /* Π·Π°Π΄Π°ΡΠΌ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΡΠ²Π΅ΡΠ° Ρ Π°ΠΊΠΈ */ height:2000px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ } h2 { position:static; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ } .relative { position:relative; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ left : 200px; * Π·Π°Π΄Π°ΡΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π»Π΅Π²ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ */ width 200px; /* Π·Π°Π΄Π°ΡΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° */ height: 250px; /* Π·Π°Π΄Π°ΡΠΌ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° */ border 5px solid; /* Π·Π°Π΄Π°ΡΠΌ ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π³ΡΠ°Π½ΠΈΡ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½Ρ 5px */ background-color:orange; /* Π·Π°Π΄Π°ΡΠΌ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° */ } .absolute { position:absolute; /* ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ */ left : 40px; * Π·Π°Π΄Π°ΡΠΌ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π»Π΅Π²ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° */ width 150px; /* Π·Π°Π΄Π°ΡΠΌ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ° */ height:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position | CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΡΠ°ΡΠΈΡΠ½ΠΎ. Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ, ΡΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π½Π° ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° background position CSS: relative, absolute, fixed, sticky.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΡΠΈ ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ, Π² CSS3 Π±ΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π΅ΡΠ΅ Π΄Π²Π° Π½ΠΎΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°: page ΠΈ center.
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ (Π±ΡΠ»ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΎ Π½Π΅ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅), Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ: top, right, bottom, ΠΈ left. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (position: relative) ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Π΅Ρ ΡΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π²ΠΈΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. Π’ΠΎΡΠΊΠΎΠΉ ΠΎΡΡΡΠ΅ΡΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΠ³Π»Π°:
Β
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΎΡ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊ Π½Π΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position: relative. ΠΡΠ½ΠΊΡΠΈΡΠ½ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ½ΡΡ Π½Π° 35 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΈ 35 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
Β
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ ΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠ²ΡΠΉ Π½ΠΎΠΌΠ΅Ρ Π² Β«ΡΡΠ΅ΠΊΠ΅Β» ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈ Π»ΡΠ±ΠΎΠ΅ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ, Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ΅ Π²ΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΡΠ»Π΅ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ (position: absolute), ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠΆΠ΅ Π·Π°Π΄Π°Π½Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS position relative Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (position: relative). ΠΠ°ΡΠ°Π»ΠΎΠΌ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. Π ΠΎΠ·ΠΎΠ²ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΌΠ΅ΡΠ΅Π½ Π²Π»Π΅Π²ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° float ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π» Π΅Π³ΠΎ:
Β
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Β
Π‘Π΅ΡΡΠΉ ΠΊΠΎΠ½ΡΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°. ΠΠ»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ position: relative, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ Π·Π°Π΄Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ·ΠΎΠ²ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΠΎΠ½ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ΅ΠΊΡΡ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° Π½ΠΈΠΊΠΎΠ³Π΄Π° ΠΈ Π½Π΅ Π±ΡΠ»ΠΎ Π² ΠΏΠΎΡΠΎΠΊΠ΅:
Β
Π ΠΎΠ·ΠΎΠ²ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ (ΡΠ΅ΡΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ). ΠΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ: top: 30px, right: 40px.
Β
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈ Π½ΠΈ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position, ΡΠΎ ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ CSS position fixed ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ½ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ ΡΠ΅ΠΌ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ, ΡΡΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ: ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. ΠΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ: ΠΎΠ½ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π² ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π° Π²ΠΈΠ΄Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° sticky, center ΠΈ page Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠΎ ΡΠ»Π°Π±ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Β«ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠΈΠΌΒ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ (position: sticky) ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π³ΠΈΠ±ΡΠΈΠ΄ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
.element { position: sticky; top: 70px; }
ΠΠ°Π΄Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ ΠΈΠΌΠ΅Π» position: relative, ΠΏΠΎΠΊΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΡΠΊΠΈ Π² 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²ΡΡΠ΅, ΡΠΎ ΠΎΠ½ Π·Π°ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π² 70 ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΎΡ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ, ΠΏΠΎΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Β«ΠΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠΈΠΉΒ» ΡΡΡΠ΅ΠΊΡ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript, ΠΈ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ sticky ΡΡΠ°Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS.
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠΌΠ΅Π½Ρ: Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Β«ΠΏΠΎΡΠΎΠ³Β» Π΄Π»Ρ Β«ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠ΅Π³ΠΎΒ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΈ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ Π² ΡΠΎΡΠ½ΠΎΡΡΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ center ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ ΡΠ΄Π°Π»Π΅Π½ ΠΈΠ· Β«ΡΡΠ΅ΠΊΠ°Β» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π²ΠΈΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π΅Π³ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ page ΡΠ²ΠΎΠΉΡΡΠ²Π° position Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ Π½Π΅ΡΡΠ½ΠΎ. ΠΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΠΏΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΡΠΌ Π²ΡΠ²ΠΎΠ΄ΠΎΠΌ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Regions.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ CSS position absolute, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΡΡΠΏΡ (margins),ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°ΠΉΠΌΠ΅Ρ ΡΡΠΎΠ»ΡΠΊΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ, ΠΈ ΠΎΠ½ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ (width) Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ Π»Π΅Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π½Π° Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π° ΠΏΡΠ°Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ β Π½Π° ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ right ΠΈ left:
position: absolute; left: 0; right: 0;
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΡΡΠ½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² top ΠΈ bottom:
position: relative; top: 0; bottom: 0;
Π ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ CSS Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, ΡΠΎ:
- Π΅ΡΠ»ΠΈ ΠΎΠ±Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° top ΠΈ bottom ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, ΡΠΎ top ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΠΈΠ»Ρ;
- Π΅ΡΠ»ΠΈ right ΠΈ left ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ, left Π²ΡΠΈΠ³ΡΡΠ²Π°Π΅Ρ;
- Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ direction ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ rtl (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°ΡΠ°Π±ΡΠΊΠΈΠΉ), ΡΠΎ Β«ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅ΡΒ» right.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ. Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
position: static | relative | absolute | sticky | center | page | fixed
ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: static.
ΠΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ: Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π°Π½ΠΈΠΌΠ°ΡΠΈΡΡ : Π½Π΅Ρ.
ΠΠ»Π³ΠΎΡΠΈΡΠΌ CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ»ΠΎΠΊ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ.
ΠΠΎΠ·ΠΈΡΠΈΡ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΠ±ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position: relative ΠΊ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ:
- table-row-group, table-header-group, table-footer-group ΠΈ table-row ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅ΠΉ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠ°Π±Π»ΠΈΡΡ. ΠΡΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ, ΡΠΎ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ΅ΠΉΠΊΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ;
- table-column-group, table-column Π½Π΅ ΡΠΌΠ΅ΡΠ°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΡΠΎΠ»Π±Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: relative;
- table-caption ΠΈ table-cell ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π²Π½ΡΡΡΠΈ ΡΠ°Π±Π»ΠΈΡΡ. ΠΡΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΠ° ΡΠ°Π±Π»ΠΈΡΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈΠ»ΠΈ ΡΡΡΠΎΠΊ, ΡΠΎ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΡΡ ΡΠΎΡΡΠ°Π²Π½Π°Ρ ΡΡΠ΅ΠΉΠΊΠ°.
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top, right, bottom ΠΈ left, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈΠ·ΡΠΌΠ°ΡΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π²Π»ΠΈΡΠ½ΠΈΡ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΡΡΠΏΡ, Π΅ΡΠ»ΠΈ ΡΡΠΈ ΠΎΡΡΡΡΠΏΡ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ
ΠΠΎΠ·ΠΈΡΠΈΡ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΊΡ (ΠΊΠ°ΠΊ position: relative). ΠΠ»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΈ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Β«ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π½ΠΈΠ΅ΠΌΒ», ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ Π±Π΅Π· ΡΡΠ΅ΡΠ° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡ ΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ position: sticky ΠΊ ΡΠ°Π±Π»ΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΡ position: relative.
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top, right, bottom ΠΈ left. ΠΠ»ΠΎΠΊ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈΠ·ΡΠΌΠ°ΡΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΊΠ°ΠΊ ΠΈ absolute). Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΎΡΡΡΡΠΏΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ.
ΠΠΎΠ·ΠΈΡΠΈΡ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΡΡ. Π ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π³ΠΈΠΎΠ½Π° Π²Π½Π΅ΡΠ½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.
ΠΠ½Π°ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ.
ΠΠ°ΠΊ ΠΈ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΎΡΡΡΡΠΏΡ Π±Π»ΠΎΠΊΠ° Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΠΈΠΊΠ°ΡΡΡΡ Ρ ΠΊΠ°ΠΊΠΈΠΌΠΈ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ.
.parent { position: relative; } .child { position: absolute; top: 10px; left: 30px; } /* ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° Π²ΠΈΠ΄Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° */ header { position: fixed; top: 0; left: 0; right: 0; } /* ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΡΠ°Π½Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ ΡΠ°Π²Π½ΠΎ 100 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ */ .sticky { position: sticky; top: 100px; }
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ Π΄Π΅ΠΌΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠ΅ΡΡΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: relative, absolute, fixed ΠΈ Π΄Π°ΠΆΠ΅ sticky:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ : Chrome, Firefox, Safari, Opera, Internet Explorer, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π° Android ΠΈ iOS.
ΠΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ fixed ΠΈ sticky ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ ΡΡΠ΅Π΄ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠΎΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Π΄Π»Ρ ΡΡΠΈΡ Π΄Π²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
<iframe src="http://caniuse.com/css-fixed/embed/" align="left" scrolling="no"> </iframe>
Π Internet Explorer ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π΅ΡΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ:
<iframe src="http://caniuse.com/css-sticky/embed/" align="left" scrolling="no"> </iframe>
Β«ΠΡΠΈΠ»ΠΈΠΏΠ°ΡΡΠ΅Π΅Β» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Firefox 26 (Gecko 26) ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° layout.css.sticky.enabled Π² about:config Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ true.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ center ΠΈ page Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½ΠΈ ΠΎΠ΄Π½ΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.
Π Gecko, Π΅ΡΠ»ΠΈ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <table> Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ <div>, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position: absolute, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠΉΡΡ Π²Π½ΡΡΡΠΈ ΡΠ°Π±Π»ΠΈΡΡ, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ <div>, Π° Π½Π΅ ΡΠ°Π±Π»ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌ. ΠΡΠΎ ΠΎΡΠΈΠ±ΠΊΠ°, ΠΈ ΠΎΠ½Π° Π½Π΅ Π±ΡΠ»Π° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π°.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position: absolute Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <div> Ρ display: table-cell Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ <div>, ΡΡΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠΌΡ Π²ΡΡΠ΅.
Β
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«PositionΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄ΡΡΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.ΡΡ
ΡΠ΅Π»Π΅Π³ΡΠ°ΠΌ ΠΊΠ°Π½Π°Π». ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΡ, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ!
position | CSS | WebReference
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | static |
---|---|
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
position: absolute | fixed | relative | static | sticky
ΠΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΡΠΈΠΌΠ΅Ρ | |
---|---|---|
<ΡΠΈΠΏ> | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. | <ΡΠ°Π·ΠΌΠ΅Ρ> |
AΒ &&Β B | ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. | <ΡΠ°Π·ΠΌΠ΅Ρ> && <ΡΠ²Π΅Ρ> |
A | B | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½Π°Π΄ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΡ (A ΠΈΠ»ΠΈ B). | normal | small-caps |
A || B | ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. | width || count |
[ ] | ΠΡΡΠΏΠΏΠΈΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. | [ crop || cross ] |
* | ΠΠΎΠ²ΡΠΎΡΡΡΡ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·. | [,<Π²ΡΠ΅ΠΌΡ>]* |
+ | ΠΠΎΠ²ΡΠΎΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·. | <ΡΠΈΡΠ»ΠΎ>+ |
? | Π£ΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠΈΠΏ, ΡΠ»ΠΎΠ²ΠΎ ΠΈΠ»ΠΈ Π³ΡΡΠΏΠΏΠ° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ. | inset? |
{A, B} | ΠΠΎΠ²ΡΠΎΡΡΡΡ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ A, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ B ΡΠ°Π·. | <ΡΠ°Π΄ΠΈΡΡ>{1,4} |
# | ΠΠΎΠ²ΡΠΎΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π· ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ. | <Π²ΡΠ΅ΠΌΡ># |
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- absolute
- ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ»ΠΎΠ²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅Ρ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom, ΡΠ°ΠΊΠΆΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊ, Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ static ΠΈΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΠΎΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄ΡΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ relative, ΡΠΎ ΠΎΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄ΡΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- fixed
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ absolute, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom ΡΠΎΡΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
- relative
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
- static
- Π‘ΡΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ.
- sticky
- ΠΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ. ΠΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΈΠΌΠ΅Ρ
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>position</title>
<style>
.layer1 {
position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
background: #f0f0f0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
height: 200px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */
}
.layer2 {
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
bottom: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ */
right: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src=»image/girl.jpg» alt=»ΠΠ΅Π²ΠΎΡΠΊΠ°»>
</div>
</div>
</body>
</html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
ΠΠ±ΡΠ΅ΠΊΡ.style.position
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΡΠ°ΡΠ·Π΅Ρ Safari ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ -webkit-sticky.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
ΠΠ°ΠΆΠ΄Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π΄ΠΈΠΉ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ.
- Recommendation (Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½Π° W3C ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡ.
- Candidate Recommendation (ΠΠΎΠ·ΠΌΠΎΠΆΠ½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π³ΡΡΠΏΠΏΠ°, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ°Ρ Π·Π° ΡΡΠ°Π½Π΄Π°ΡΡ, ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΠΌ ΡΠ΅Π»ΡΠΌ, Π½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
- Proposed Recommendation (ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π° ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΠΎΠ½ΡΡΠ»ΡΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ²Π΅ΡΠ° W3C Π΄Π»Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ.
- Working Draft (Π Π°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) β Π±ΠΎΠ»Π΅Π΅ Π·ΡΠ΅Π»Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ° ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΏΡΠ°Π²ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ.
- Editor’s draft (Π Π΅Π΄Π°ΠΊΡΠΎΡΡΠΊΠΈΠΉ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ) β ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ° ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΎΠΊ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
- Draft (Π§Π΅ΡΠ½ΠΎΠ²ΠΈΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ) β ΠΏΠ΅ΡΠ²Π°Ρ ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
ΠΡΠ°ΡΠ·Π΅ΡΡ
static, relative, absolute | 4 | 12 | 1 | 4 | 1 | 1 |
fixed | 7 | 12 | 1 | 4 | 1 | 1 |
sticky | 16 | 56 | 42 | 6.1 | 32 |
static, relative, absolute | 1 | 1 | 6 | 1 |
fixed | 1 | 1 | 6 | 1 |
sticky | 32 | 6.1 |
ΠΡΠ°ΡΠ·Π΅ΡΡ
Π ΡΠ°Π±Π»ΠΈΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ.
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ;
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½Π΅ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ;
- Β β ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π»ΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ Π²ΡΠ΅ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π΅ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
Π§ΠΈΡΠ»ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 29.08.2017
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
position Π² CSS | Π£ΡΠ΅Π±Π½ΡΠ΅ ΠΊΡΡΡΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position β ΡΡΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ ΠΌΠΎΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ. ΠΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ΅ΡΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- static (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- relative
- absolute
- fixed
Π§Π°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π°ΡΡΠ΄Ρ Ρ ΡΠ΅ΡΡΡΡΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ:
static
ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: ΡΡΠ°ΡΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΎΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΊΡ. ΠΡΠ±ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ left, right, top ΠΈΠ»ΠΈ bottom Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π²Π»ΠΈΡΠ½ΠΈΡ.
relative
ΠΠΎΠ³Π΄Π° position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
HTML
<p>ΠΠ΄Π²Π° ΠΌΡ ΡΠΏΡΡΡΠ°Π»ΠΈ Π»ΠΎΠ΄ΠΊΡ, ΠΠΆΠ° ΡΠ²Π»ΡΠΊ ΠΌΠ΅Π½Ρ Π² Π΄ΠΆΡΠ½Π³Π»ΠΈ, ΠΈ Π²ΡΠΊΠΎΡΠ΅ ΠΌΡ
Π²ΡΡΠ»ΠΈ Π½Π° ΡΠ·ΠΊΡΡ, Ρ
ΠΎΡΠΎΡΠΎ ΡΡΠΎΠΏΡΠ°Π½Π½ΡΡ ΡΡΠΎΠΏΡ.</p>
<p>Π― ΡΠΈΠ½ΡΠ»ΡΡ Π²Π²Π΅ΡΡ
, ΠΏΡΡΠ°ΡΡΡ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΡΠΈΠ»ΠΈΠΈ
Π΄ΠΎΡΡΠ½ΡΡΡΡΡ Π΄ΠΎ ΡΡΠΊΠΈ ΠΠΆΠ°, Π½ΠΎ ΡΠΈΡΠΈΠΊ Ρ ΡΠ°ΠΊΠΎΠΉ ΡΠΈΠ»ΠΎΠΉ ΡΠ²Π°Π½ΡΠ» ΠΊΠΎΠΏΡΡ Π½Π° ΡΠ΅Π±Ρ,
ΡΡΠΎ ΠΎΠ½ΠΎ Π²ΡΡΠ²Π°Π»ΠΎΡΡ ΠΈΠ· ΡΡΠΊ ΠΌΠ΅Π·ΠΎΠΏΠ°, Π΅Π΄Π²Π° Π½Π΅ ΡΠΎΡΠ²Π°Π²ΡΠ΅Π³ΠΎΡΡ ΡΠΎ ΡΠΊΠ°Π»Ρ,
Π° Ρ, Π²ΡΡ Π΅ΡΡ ΡΠ΅ΠΏΠ»ΡΡΡΡ Π·Π° Π΄ΡΠ΅Π²ΠΊΠΎ, ΠΏΠΎΠ»Π΅ΡΠ΅Π» Π²Π½ΠΈΠ·, ΠΏΡΡΠΌΠΎ Π²
ΡΠ°ΡΠΊΡΡΡΡΡ ΠΏΠ°ΡΡΡ Π·Π²Π΅ΡΡΠ³ΠΈ.</p>
<p>ΠΠ½ ΡΠΆΠ΅ ΠΏΠ΅ΡΠ΅ΡΡΠ» Π½Π° Π±Π΅Π³, Π·Π°ΠΌΠ°Ρ
ΠΈΠ²Π°ΡΡΡ Π½Π° Ρ
ΠΎΠ΄Ρ ΡΡΠΆΡΠ»ΡΠΌ ΠΊΠΎΠΏΡΡΠΌ.</p>
CSS
p { border: 1px solid blue; }
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ Π²ΡΠΎΡΠΎΠΉ Π°Π±Π·Π°Ρ:
.second { position: relative; border-color: red; left: 20px; top: 10px; }
ΠΡΠ°ΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π½Π° 20px ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ ΠΈ Π½Π° 10px ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ· ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π³Π΄Π΅ ΠΎΠ½ ΠΏΠΎΠ»Π°Π³Π°Π»ΡΡ Π±ΡΡΡ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΈΠ½ΠΈΠ΅ Π°Π±Π·Π°ΡΡ Π½Π΅ ΡΠ΄Π²ΠΈΠ½ΡΠ»ΠΈΡΡ Π²ΠΎΠΎΠ±ΡΠ΅. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΡΠ°ΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ, Π½Π΅ Π½Π°ΡΡΡΠ°Ρ ΠΌΠ°ΠΊΠ΅Ρ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΌΠ΅ΡΡΠ°, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ.
absolute
ΠΠΎΠ³Π΄Π° position ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ? Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ?
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ β ΡΡΠΎ ΡΠΎΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ relative, absolute ΠΈΠ»ΠΈ fixed. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ ΡΡΠ°ΡΠΈΡΠ½ΡΠΌ, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡΡΡΠΏΠ°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΡΡΡΠ° Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ ΠΏΡΠΎΡΡΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ:
HTML
<section>
Π― ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ.
<p>
Π― ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ!
</p>
</section>
CSS
section {
background: gold;
height: 200px;
padding: 10px;
position: relative; /* ΠΡΠ΅Π²ΡΠ°ΡΠ°Π΅Ρ <section> Π² ΡΠΎΡΠΊΡ ΠΎΡΡΡΡΡΠ° Π΄Π»Ρ <p> */
}
p {
background: limegreen;
color: white;
padding: 10px;
position: absolute; /* ΠΠ΅Π»Π°Π΅Ρ <p> ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌΡΠΌ */
bottom: 10px; /* 10px ΡΠ½ΠΈΠ·Ρ */
left: 20px; /* 20px ΡΠ»Π΅Π²Π° */
}
ΠΡΠ»ΡΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 200px, Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ relative, ΡΡΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅Ρ Π΅Π³ΠΎ Π² ΡΠΎΡΠΊΡ ΠΎΡΡΡΡΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΅Π»ΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΊΠ°ΠΊ absolute ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΆΡΠ»ΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠ² ΠΎΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ left ΠΈ bottom, ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ Π΅Π³ΠΎ Π² Π»Π΅Π²ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΠ³ΠΎΠ».
Π§ΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ left ΠΈ right?
ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° Π½Π΅ Π·Π°Π΄Π°Π½Π°, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ left: 0 ΠΈ right: 0 ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΠΎ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ left: 0 ΠΈ width: 100%.
ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π°, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ right ΠΎΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΡΡΡ.
fixed
ΠΠΎΠ³Π΄Π° position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ fixed, ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠ»Π΅Π²Π°/ΡΠΏΡΠ°Π²Π° ΠΈ ΡΠ²Π΅ΡΡ Ρ/ΡΠ½ΠΈΠ·Ρ.
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΎΡΠΊΠΎΠΉ ΠΎΡΡΡΡΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, ΠΎΠ½ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² HTML ΠΈ CSS
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ HTML Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΠ°ΠΉΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠ»Ρ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΡΠΈΠ»Π΅ΠΉ.
ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. Π ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ°, ΡΠ΅Π½Π΅ΠΉ, ΡΠ°ΠΌΠΎΠΊ, ΡΡΠΈΡΡΠ°.
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ {position}.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΡΡΠ°ΡΠ°Π΅ΠΌΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π°Π³Π»ΡΠ΄Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ HTML/CSS β Π²ΠΈΠ΄Ρ?
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ {position} ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅Π»ΡΠΉ ΡΡΠ΄ Π·Π°Π΄Π°Π½Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ 4 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS:
- position: absolute;
- position: relative;
- position: fixed;
- position: static.
ΠΡΠ΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position: relative
ΠΠ΄Π½ΠΎ ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² CSS. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Π΅Ρ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΠ΅, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠ³ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° <padding>.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΉ ΠΏΠ»ΠΎΡΠ°Π΄ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π½ΠΎ Π½Π΅ ΡΠ΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ Π³ΡΠ°Π½ΠΈΡ. ΠΠ½ΠΈ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ, ΡΠΎΡ ΡΠ°Π½ΡΡ ΡΠ°Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. ΠΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ°ΠΊΠΎΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±Π»ΠΎΠΊΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π²ΡΡΠ΅ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Ρ ΠΈΡ .
Π Π°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌ. ΠΡΠ΅Π³ΠΎ ΠΈΡ 4:
- <Top> β ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π±Π»ΠΎΠΊΠ°.
- <Bottom> β ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅Ρ Π±Π»ΠΎΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ.
- <Right> β Π·Π°Π΄Π°Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
- <Left> β ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅ Π·Π°ΠΏΠΈΡΡ ΠΈΠ· 4 ΡΠ²ΠΎΠΉΡΡΠ²: <top>, <bottom>, <left>, <right>, ΡΠΎ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ²ΡΠ΅ Π·Π°Π΄Π°Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π’ΠΎ Π΅ΡΡΡ, <top> ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°Π½ΡΡΠ΅, ΡΠ΅ΠΌ <bottom>, Π° <left>, ΡΠ°Π½ΡΡΠ΅ ΡΠ΅ΠΌ <right>.
ΠΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΠ»ΡΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index. ΠΠ° ΡΡΠ΅Ρ ΡΡΠΎΠ³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² css Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ»ΠΎΠ΅Π²ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ.
ΠΠ°Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠ°Π±Π»ΠΈΡ ΠΈ Π΄ΡΡΠ³ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ².
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ <absolute>
<!doctype> <html> <head> <meta charset="utf-8"> <title>Test Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <div> </div> </div> </body> </html>
body{ color: darkgreen; background: red; margin: 0 auto; height: 250vh; } #content{ position: fixed; height: 100px; width: 100%; background: black; } .block{ position: absolute; background: green; height: 50px; width: 50px; top: 40%; left: 10%; }
Π’Π°ΠΊΠΎΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π² css ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΡΠ΅Π΄ΠΊΠΎ. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠΈΠΉ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ.
ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ {position: static}.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ absolute Π³ΠΎΠ²ΠΎΡΠΈΡ Π·Π° ΡΠ΅Π±Ρ, ΠΎΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅Ρ Π·Π°Π΄Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ relative ΠΏΠΎ ΡΠ΅Π»ΠΎΠΌΡ ΡΡΠ΄Ρ ΠΏΡΠΈΠ·Π½Π°ΠΊΠΎΠ².
ΠΡΠ»ΠΈ Π½Π΅ Π·Π°Π΄Π°ΡΡ Π΄Π»Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ {position: relative ΠΈΠ»ΠΈ fixed}, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
Π§ΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π» Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΡΠΎ Π΄Π»Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ {position: relative}.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΡΠ°ΡΠ·Π΅Ρ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π΅Π³ΠΎ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π»ΠΎ Π²ΠΎΠ²ΡΠ΅. ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ z-index.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π΅Π³ΠΎ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° <top>, <right>, <bottom> ΠΈ <left>.
Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅ Π·Π°Π΄Π°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π² css.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ static
ΠΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ html ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ½ΠΎ ΡΡΠΎΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ³ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΎ ΡΡΡΠΈ, {position: static} ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΌΠ΅Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
Π’Π°ΠΊΠΎΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index. ΠΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΠ°ΠΊΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΎΠ½ΠΈ ΠΎΠΏΠΈΡΠ°Π½Ρ Π² HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
Π€ΠΈΠΊΡΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Position: fixed
{Position: fixed} ΠΈΠ»ΠΈ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΡΠΎΡΡΠΉ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΏΠΊΠΈ ΠΈ ΡΡΡΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Ρ ΡΠ΅ΠΊΠ»Π°ΠΌΠΎΠΉ.
CSS
body{
color: darkgreen;
background: red;
margin: 0 auto;
height: 250vh;
}
#content{
position: fixed;
height: 100px;
width: 100%;
background: black;
}
.block{
position: absolute;
background: green;
height: 50px;
width: 50px;
top: 40%;
left: 10%;
}
body{ color: darkgreen; background: red; margin: 0 auto; height: 250vh; } #content{ position: fixed; height: 100px; width: 100%; background: black; } .block{ position: absolute; background: green; height: 50px; width: 50px; top: 40%; left: 10%; }
Π‘ΡΡΡ Π΅Π³ΠΎ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π·Π°ΠΊΡΠ΅ΠΏΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΎΠΊΠ½Π°, Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π΅ΠΌΡ ΠΈΡΡΠ΅Π·Π½ΡΡΡ Ρ ΡΠΊΡΠ°Π½Π°. Π’ΠΎ Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°.
ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎ Π²ΡΠΎΡΠΎΠΌ β ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈΠΌΠ΅ΡΡΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ {position: fixed}.
Position: inherit ΠΈ position: initial.
ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΅Π³ΠΎ Π±Π»ΠΎΠΊ-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎ ΡΡΡΠΈ, ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΡΡΠΎ ΠΈ {position: static}.
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠ΅ Π·Π° ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ½ΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ Π½Π° Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΈΠΌΠ΅ΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ {position: static}.
ΠΠ°ΠΊ ΠΌΡ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ: ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π²ΡΠ΅Π³ΠΎ 4 ΡΠ²ΠΎΠΉΡΡΠ²Π° β <top>, <right>, <bottom>, <left>. ΠΡΠ΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β <auto>, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°Π²Π½ΠΎ 0. ΠΡΠΎΡΠΎΠ΅ β ΡΠΎΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΡΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , rem, em, vh ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²Π΅Π»ΠΈΡΠΈΠ½Π°Ρ .
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠ°Π΄Π΅Π΅ΠΌΡΡ ΡΡΠΎ Π΄Π°Π½Π½Π°Ρ ΡΡΠ°ΡΡΡ Π±ΡΠ»Π° Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ»Π΅Π·Π½Π°. Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΡΠ·Π½Π°Π»ΠΈ Π²ΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ ΡΠ°Π±ΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position, Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ.
ΠΠ»Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ:
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ°ΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π° ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΡΡΡΡΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΊΡΠΎΠ»Π»Π°.
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΡΠ΅Π·Π°ΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΡΠ΅Π½ΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ 3 Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΈ Π±Π»ΠΎΠΊΠΈ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ.
Π’Π΅Π³ΠΈ:
ΠΠ°ΠΊΠ΅Ρ
CSS — Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΠΎΠ·ΠΈΡΠΈΡ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ
ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈΠ»ΠΈ
Π»ΠΈΠΏΠΊΠΈΠΉ).
ΠΠΎΠ·ΠΈΡΠΈΡ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ:
-
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
-
ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ
-
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
-
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
-
Π»ΠΈΠΏΠΊΠΈΠΉ
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ²Π΅ΡΡ
Ρ, ΡΠ½ΠΈΠ·Ρ, ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°.
ΡΠ²ΠΎΠΉΡΡΠ²Π°.ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ΅Π½Π½ΠΎΡΡΡ.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ;
HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΡΡΠ°ΡΠΈΡΠ½ΠΎ.
ΠΠ° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π²Π»ΠΈΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, bottom, left ΠΈ right.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ;
Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ; ΡΡΠΎ
Π²ΡΠ΅Π³Π΄Π° ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ CSS:
ΠΡΠΈΠΌΠ΅Ρ
div.ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ # 73AD21;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π²Π΅ΡΡ
Π½ΠΈΡ
, ΠΏΡΠ°Π²ΡΡ
, Π½ΠΈΠΆΠ½ΠΈΡ
ΠΈ Π»Π΅Π²ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΡΠ·ΠΎΠ²Π΅Ρ
Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΡΠ°Π·ΡΡΠ²Π°ΠΌ, ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ CSS:
ΠΡΠΈΠΌΠ΅Ρ
div.ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ # 73AD21;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ : ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ;
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ Π²ΡΠ΅Π³Π΄Π°
ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ. ΠΠ΅ΡΡΠΈΠ½Π°,
Π‘Π²ΠΎΠΉΡΡΠ²Π° right, bottom ΠΈ left ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π·Π°Π·ΠΎΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π³Π΄Π΅ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΡΡ Π±Ρ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ CSS:
ΠΡΠΈΠΌΠ΅Ρ
div.fixed {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°:
300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ # 73AD21;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
position: fixed;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ;
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°
(Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ).
ΠΠ΄Π½Π°ΠΊΠΎ; Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΡΠ΅Π΄ΠΊΠΎΠ²,
ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅Π»ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Β«ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉΒ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΡΠΌ, ΠΊΡΠΎΠΌΠ΅
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
.
ΠΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ position: relative;
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ CSS:
ΠΡΠΈΠΌΠ΅Ρ
div.ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠΈΡΠΈΠ½Π°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ # 73AD21;
}
Π΄Π΅Π». ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ {ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ
: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ 3 ΠΏΠΈΠΊΡΠ΅Π»Ρ # 73AD21;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π»ΠΈΠΏΠΊΠ°Ρ;
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ : Π»ΠΈΠΏΠΊΠΈΠΉ;
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° Π·Π°Π΄Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎ Π²ΡΡΠΏΠΎΡΡΠ΅ — Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Β«Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡΡΒ» Π½Π° ΠΌΠ΅ΡΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, position: fixed).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Internet Explorer, Edge 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Safari ΡΡΠ΅Π±ΡΠ΅Ρ -webkit-
ΠΏΡΠ΅ΡΠΈΠΊΡ (ΡΠΌ. ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅). ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈΠ»ΠΈ Π»Π΅Π²ΡΠΉ
Π΄Π»Ρ
Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π»ΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΠ΅ΡΡΡ ΠΊ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ( Π²Π²Π΅ΡΡ
Ρ: 0
), ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΠ΅ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ
div.sticky {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: -webkit-sticky; / * Safari * / ΠΠΎΠ·ΠΈΡΠΈΡ
:
Π»ΠΈΠΏΠΊΠΈΠΉ;
Π²Π΅ΡΡ
: 0;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π·Π΅Π»Π΅Π½ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: 2px solid # 4CAF50;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π°Π΄ΠΈ Π΄ΡΡΠ³ΠΈΡ
).
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ°:
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ z-index, ΡΠ°Π²Π½ΠΎΠ΅ -1, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΎ Π·Π° ΡΠ΅ΠΊΡΡΠΎΠΌ.
ΠΡΠΈΠΌΠ΅Ρ
img
{
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 0px;
Π²Π΅ΡΡ : 0px;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: -1;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΡΠ΅ΠΊΠ° Π²ΡΠ΅Π³Π΄Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ ΡΡΠ΅ΠΊΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ»ΠΈ Π΄Π²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ Π±Π΅Π· z-index
ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ Π² HTML-ΠΊΠΎΠ΄Π΅, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΡΠ²Π΅ΡΡ
Ρ.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ
ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΠ°Π΄Π°ΠΉΡΠ΅ ΡΠΎΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π·Π°Π΄Π°ΡΡ ΡΠΎΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΏΠΎ ΡΡΠΎΠΉ ΡΠΎΡΠΌΠ΅ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ΅Π±Ρ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡΠΌΠΈ!
ΠΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS
ΠΠΌΡΡΠ΅ΡΡΠ²ΠΎ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
Π½ΠΈΠ· | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΊΡΠ°ΠΉ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° |
Π·Π°ΠΆΠΈΠΌ | ΠΠ°ΠΆΠΈΠΌΠ°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ |
ΡΠ»Π΅Π²Π° | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΊΡΠ°ΠΉ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° |
ΠΏΠΎΠ·ΠΈΡΠΈΡ | ΠΠ°Π΄Π°Π΅Ρ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
ΠΏΡΠ°Π²ΡΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° |
Π²Π΅ΡΡ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΊΡΠ°ΠΉ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° |
z-ΠΈΠ½Π΄Π΅ΠΊΡ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
.
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
: h3
{
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ «ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ» Π½ΠΈΠΆΠ΅.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΎΠ·ΠΈΡΠΈΡ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: β ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅: Π½Π΅Ρ. ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ animatable ΠΠ΅ΡΡΠΈΡ: CSS2 Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: ΠΎΠ±ΡΠ΅ΠΊΡ .style.position = «absolute»
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΡΠΎ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΠ±ΡΠ΅ΠΊΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ 1,0 7,0 1,0 1,0 4,0
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Internet Explorer, Edge 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ | Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ | ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ | ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ | Π»ΠΈΠΏΠΊΠ°Ρ | Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΠ³ΡΠ°ΠΉ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² ΠΠ³ΡΠ°ΠΉ Β» Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ (Π½Π΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΏΡΠ΅Π΄ΠΊΠ° ΠΠ³ΡΠ°ΠΉ Β» ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΠ³ΡΠ°ΠΉ Β» ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ "left: 20px"
Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΠΠΠΠ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΠ³ΡΠ°ΠΉ Β» Π»ΠΈΠΏΠΊΠΈΠΉ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° Π·Π°Π΄Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎ Π²ΡΡΠΏΠΎΡΡΠ΅ - Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Β«Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡΡΒ» Π½Π° ΠΌΠ΅ΡΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, position: fixed).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² IE / Edge 15 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Safari Ρ Π²Π΅ΡΡΠΈΠΈ 6.1 Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -webkit-.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ Β» Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΠ³ΡΠ°ΠΉ Β» ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²ΠΎ
ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°ΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
h3.pos_left {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: -20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
h3.pos_right {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ "
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
# parent1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
# child1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ:
Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ
: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
# parent2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
# child2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ
: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ "
ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊ
CSS: ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ CSS
Π‘ΡΡΠ»ΠΊΠ°
HTML DOM:
ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
.
html - ΠΏΠΎΠ·ΠΈΡΠΈΡ CSS: ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°
- ΠΠΊΠΎΠ»ΠΎ
ΠΡΠΎΠ΄ΡΠΊΡΡ
- ΠΠ»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°
ΠΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΈ ΠΎΡΠ²Π΅ΡΡ
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ΄Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈ Π΄Π΅Π»ΡΡΡΡ ΡΠ°ΡΡΠ½ΡΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ
ΠΠ°ΠΊΠ°Π½ΡΠΈΠΈ
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Π½ΠΈΠΌ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΊΠ°ΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠ°
Π’Π°Π»Π°Π½Ρ
ΠΠ°Π½ΠΈΠΌΠ°ΠΉΡΠ΅ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ² ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π±ΡΠ΅Π½Π΄ ΡΠ°Π±ΠΎΡΠΎΠ΄Π°ΡΠ΅Π»Ρ
Π Π΅ΠΊΠ»Π°ΠΌΠ°
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ ΡΠΎ Π²ΡΠ΅Π³ΠΎ ΠΌΠΈΡΠ°
- Π ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ
.
{
Π²Π΅ΡΡ : 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»ΡΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ).
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΡΠΎ
Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Internet Explorer, Edge 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
.
Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΠΠΠΠ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° Π·Π°Π΄Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎ Π²ΡΡΠΏΠΎΡΡΠ΅ - Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Β«Π·Π°ΠΊΡΠ΅ΠΏΠΈΡΡΡΒ» Π½Π° ΠΌΠ΅ΡΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, position: fixed).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² IE / Edge 15 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ Π²Π΅ΡΡΠΈΡΡ . ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Safari Ρ Π²Π΅ΡΡΠΈΠΈ 6.1 Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -webkit-.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: -20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ:
Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ : 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ : 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
ΠΡΠΎΠ΄ΡΠΊΡΡ
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ°
ΠΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΈ ΠΎΡΠ²Π΅ΡΡ
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄
ΠΠ΄Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈ Π΄Π΅Π»ΡΡΡΡ ΡΠ°ΡΡΠ½ΡΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ
ΠΠ°ΠΊΠ°Π½ΡΠΈΠΈ
ΠΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Π½ΠΈΠΌ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΊΠ°ΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠ°
Π’Π°Π»Π°Π½Ρ
ΠΠ°Π½ΠΈΠΌΠ°ΠΉΡΠ΅ ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ² ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π±ΡΠ΅Π½Π΄ ΡΠ°Π±ΠΎΡΠΎΠ΄Π°ΡΠ΅Π»Ρ
Π Π΅ΠΊΠ»Π°ΠΌΠ°
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΠΈ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³Π°ΠΌ ΡΠΎ Π²ΡΠ΅Π³ΠΎ ΠΌΠΈΡΠ°