background-attachment — CSS | MDN
ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ background-image
,Β CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-attachment
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈΠ»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠΎΠΌ.
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°Β background-attachment
Π·Π°Π΄Π°ΡΡΡΡΒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΠ»ΡΡΠ΅Π²ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π½ΠΈΠΆΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
fixed
- Π€ΠΎΠ½ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΎΠ½ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.Β (ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎ Ρ
background-clip: text
.) local
- Π€ΠΎΠ½ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΒ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Β ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠΎΠ½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΠΈ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½Π° ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° Π½Π΅ ΠΊ Π³ΡΠ°Π½ΠΈΡΠ΅, ΠΎΠ±ΡΠ°ΠΌΠ»ΡΡΡΠ΅ΠΉ ΠΈΡ .
scroll
- Π€ΠΎΠ½ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Ρ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. (ΠΠ½ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΠ½ ΠΊ Π³ΡΠ°Π½ΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.)
Π€ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
HTML
<p>
There were doors all round the hall, but they were all locked; and when
Alice had been all the way down one side and up the other, trying every
door, she walked sadly down the middle, wondering how she was ever to
get out again.
</p>
CSS
p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; }
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ <attachment>
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΎΠ½Π°, ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΡΡ
Π·Π°ΠΏΡΡΡΠΌΠΈ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΡΠΈΠΏΠΎΠΌ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π΄ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ.
HTML
<p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted! </p>
CSS
p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; }
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 ΠΈΠ»ΠΈ ΡΠ°Π½Π΅Π΅) | 4.0 | 3.5 | 1.0 |
Multiple backgrounds | 1.0 | 3.6 (1.9.2) | 9.0 | 10.5 | 1.3 |
local | 4.0 | ΠΠ΅Ρ | 9.0 | 10.5 | 5.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 1.0 (1.9.2) | ? | 10.0 | 3.2 |
Multiple backgrounds | 2.1 | 1.0 (1.9.2) | ? | 10.0 | 3.2 |
local | ? | ΠΠ΅Ρ | ? | ? | ? |
background-attachment | CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
12.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-attachment ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΡΠ΄Π° ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΡ ΠΈΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ background-image.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | scroll |
---|---|
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ: | ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ::first-letter ΠΈ ::first-line |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ: | Π½Π΅Ρ |
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ: | Π½Π΅Ρ |
ΠΠ΅ΡΡΠΈΡ: | CSS1 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | object.style.backgroundAttachment=»fixed» |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
background-attachment: scroll|fixed|local|inherit;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
scroll | Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠ°ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, Ρ.Π΅. Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. |
fixed | Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΎΠ½ ΠΎΡΡΠ°ΡΡΡΡ Π½Π΅ ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ/ΠΈΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° Π½Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
local | Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Ρ.Π΅. Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΡΠΈΠΌΠ΅Ρ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°</title> <style> body { height: 1000px; margin: 0; } div { width: 300px; height: 200px; margin-bottom: 10px; overflow: auto; } #scroll { background: #00ff00 url('cogs.png') no-repeat scroll; } #local { background: #00ff00 url('cogs.png') no-repeat local; } #fixed { background: #00ff00 url('cogs.png') no-repeat fixed; } </style> </head> <body> <div>scroll<br>scroll<br>scroll<br>scroll<br> scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br> scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br> scroll<br>scroll<br>scroll<br>scroll<br></div> <div>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br> fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br> fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br> fixed<br>fixed<br>fixed<br></div> <div>local<br>local<br>local<br>local<br>local<br> local<br>local<br>local<br>local<br>local<br>local<br> local<br>local<br>local<br>local<br>local<br>local<br> local<br>local<br>local<br></div> </body> </html>
ΡΠΈΠΊΡΠ°ΡΠΈΡ ΡΠΎΠ½Π° β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠΊΡΠΎΠ»Π»ΠΈΡΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΠΎΠ½ΠΎΠΌ, ΡΠΎΠ½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠ½ΠΎΠ³Π΄Π° ΡΡΠΎ ΡΠΌΠ΅ΡΡΠ½ΠΎ, Π° ΠΈΠ½ΠΎΠ³Π΄Π° Ρ
ΠΎΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π· background-image
, Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π²Π°Π»ΠΎΡΡ Π½Π° Π²ΠΈΠ΄Ρ. ΠΠ»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΈΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-attachment
.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ background-attachment
scroll
(Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) β ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»Π΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.fixed
β Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π΄Π΅Π»Π°Ρ Π΅Π³ΠΎ Π½Π΅ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊ ΡΠΊΡΠΎΠ»Π»Ρ. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠ½ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ.local
β Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π² ΡΠ»ΡΡΠ°Π΅ Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΌ ΡΠΊΡΠΎΠ»Π»ΠΎΠΌ ΡΠΎΠ½ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ scroll Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ fixed. ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ local ΡΠΎΠ½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΡΠΊΡΠΎΠ»Π»ΠΈΡΡΡ (Π½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ°ΠΌΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ).
ΠΠ»Ρ Π»ΡΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΆΠ΅. Π§ΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡ ΡΡΠ°Π²Π½ΠΈΡΡ, Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ background-attachment (Π½Π°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠΎ ΠΏΡΠΈ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠΈ CSS Π²Ρ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ!).
background-attachment: scroll
background-attachment: fixed
background-attachment: local
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
ΠΠΎΠ»Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π²ΡΠ΅Ρ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-attachment
Π΅ΡΡΡ Ρ Π΄Π΅ΡΠΊΡΠΎΠΏΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² IE9+, Edge 12+, Firefox 25+, Chrome (Π²ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ), Safari 5+, Opera 11.5+. ΠΠ· ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ Opera Mobile, Firefox Π΄Π»Ρ Android, IE Mobile ΠΈ QQ Browser. Π Π΄ΡΡΠ³ΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π»ΠΈΠ±ΠΎ ΡΠ°ΡΡΠΈΡΠ½Π°Ρ, Π»ΠΈΠ±ΠΎ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ.
ΠΠ°Π»Π΅Π΅ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²Π° background-origin ΠΈ background-clip Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅Π·ΠΊΠΎΠΉ.
10 ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΎΠ½ΠΎΠ² CSS
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°Π½Π½ΡΡ Π²ΡΡΡΠ½ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΎΠ½ΠΎΠ² HTML ΠΈ CSS ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π°.
- CSS ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠΎΠ½Ρ
- CSS-ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΡΠ·ΠΎΡΡ
- CSS-ΡΠΎΠ½Ρ ΡΠ°ΡΡΠΈΡ
- CSS Π’ΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΠ½Ρ
- ΠΠ»Π°Π³ΠΈΠ½Ρ ΡΠΎΠ½Π° jQuery
Π ΠΊΠΎΠ΄Π΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
background-attachment: ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ;
Π€ΠΎΠ½ Ρ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. ΠΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°: ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ;
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΊΠΎΠ²ΡΡ Π½ΡΠΌΠΈΠ΄ΠΈΡΠΌ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ»ΠΈ ΠΠ»ΡΠΉΠ½
Π ΠΊΠΎΠ΄Π΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°
ΠΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠΆΠ΅ΡΡ ΠΡΡΠΌ
Π ΠΊΠΎΠ΄Π΅
Π€ΠΎΠ½ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² CSS
ΠΠΎΠ΅Π·Π΄ΠΊΠ° Π² Π‘ΠΈΡΡΠ»: ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΎΠ½ΠΎΠ² Π² CSS Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΎΠΉ ΡΠΎΠ½Π° : ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ;
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠΆΠ°ΡΡΠΈΠ½ ΠΠ²Π΅Π½
Π ΠΊΠΎΠ΄Π΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½, ΠΏΠΎΠ»Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ / Π±Π΅Π· ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- codyhouse.co
Π ΠΊΠΎΠ΄Π΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ
ΠΡΠΎΡΡΠΎΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS background-attachment Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: jquery.js
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π³ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π° ΠΏΡΠΎΡΡΠΎΠΌ CSS
ΠΡΠ»ΠΈ ΠΊΠΎΠ»Π΅ΡΠΎ ΠΌΡΡΠΈ Π²Π½ΠΈΠ· … ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ Π²ΠΏΡΠ°Π²ΠΎ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠΆΠΎΡΡΠ° ΠΠΈΡΡΠ΅Π»Π»
Π ΠΊΠΎΠ΄Π΅
Π Π΅ΡΡΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ CSS
CSS-ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ½Π° : ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ;
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ΅ΡΠ΅ΠΊ ΠΠ°Π»Π»Π°Π΄ΠΈΠ½ΠΎ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΆΠΊΠ°-ΠΊΠ½ΠΈΠΆΠΊΠ° ΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ², ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΊΠ½ΠΈΠΆΠΊΠΈ-ΠΊΠ½ΠΈΠΆΠΊΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
CSS2 — ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
CSS2 — ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡΡΠΎΠ½-ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
background-attachment
ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½ΠΎ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ
ΡΠΎΠ»ΡΠΊΠΎ Π΄Π²Π°.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
W3C Π³ΠΎΠ²ΠΎΡΠΈΡ:
‘background-attachment’
ΠΡΠ»ΠΈ Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΠΎΠ½ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (Β«ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉΒ») ΠΈΠ»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ (Β«ΠΏΡΠΎΠΊΡΡΡΠΊΠ°Β»).
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠ²ΠΈΡΠΎΠΊ
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ . ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° div Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ
Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ΅Π³ΠΎ div Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ : auto
Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ.
scroll
Π½Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ: ΠΏΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΡΡΠ½ΠΎΠ΅
Π―Π²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΡΡΠΎ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΏΡΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊ Windows ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅Ρ scroll
ΠΊΠ°ΠΊ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ.
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΎΡ ΡΠ΅Π»Π°, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡΠΌ.Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° . ΠΠ»Ρ Π½Π΅ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ.
ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° Β«ΠΎΠΊΠ½ΠΎΒ», ΡΠ΅ΡΠ΅Π· ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΡΡΠΎ «ΠΎΠΊΠ½ΠΎ» Π΄Π²ΠΈΠΆΠ΅ΡΡΡ, Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π΄ΡΡΠ³ΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΌΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ ΡΠΎΡΠΊΠ°.
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΌΠ΅ΡΡΠ½ΠΎΠ΅
ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ CSS3 Π³ΠΎΠ²ΠΎΡΠΈΡ, ΡΡΠΎ ΡΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ. Ρ Π½Π°Π΄Π΅ΡΡΡ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΊΠΎΡΠΎ ΠΏΡΠΈΠ΄Π΅Ρ; Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ
ΠΌΠ΅ΡΡΠ½ΡΠΉ ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.Π’Π΅ΡΡΠΎΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° | ΠΠ»ΡΠ΅Ρ | β | β | β | β | β | ΠΠ»ΡΠ΅Ρ | ||||||||
ΠΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ local , ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²ΠΈΡΠΎΠΊ .ΠΡΠ±ΠΎΠΏΡΡΠ½ΠΎ, ΡΡΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ scroll ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ Π² IE ΠΈ
Konqueror, ΡΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ ΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΌΠΈ local , Ρ
ΠΎΡΡ
ΠΏΠΎ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ. | |||||||||||||||
ΡΠ²ΠΈΡΠΎΠΊ Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌΠ’Π΅ΡΡΠΎΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° | ΠΌΠ΅ΡΡΠ½ΡΠΉ | ΠΡΡΡ | ΠΡΡΡ | ΠΡΡΡ | ΠΡΡΡ | ΠΡΡΡ | ΠΌΠ΅ΡΡΠ½ΡΠΉ | ||||||||
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π°; Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡΠ’Π΅ΠΊΡΡΠΎΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° | ΡΠ²ΠΈΡΠΎΠΊ | ΠΡΡΡ | ΠΡΡΡ | ΠΡΡΡ | β | ΠΡΡΡ | ΠΡΡΡ | ΠΡΡΡ | |||||||
ΠΠ°ΠΊΠΎΠ³ΠΎ Ρ ΡΠ΅Π½Π° ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΠΎΡΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½Π°Ρ
ΠΠ΅Π΄Π°Π²Π½ΠΎ Ρ Π½Π°ΡΠΊΠ½ΡΠ»ΡΡ Π½Π° background-attachment: local
ΠΈΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ ΡΡΠΏΠ΅Ρ-ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠΊΠ° Π² Smashing Magazine, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ΡΡΠΎΠ»Π° … ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΠ°Π±Π»ΠΈΡΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π°.ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π΄ΠΎΡΠΎΠ²ΠΎ, Π½ΠΎ Ρ
ΠΎΡΡ Ρ Π·Π½Π°Π» ΠΎ scroll
ΠΈ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ
Π΄Π»Ρ background-attachment
, Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° ΡΠ°Π½ΡΡΠ΅ Π½Π΅ ΡΠ»ΡΡΠ°Π» ΠΎ local
.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ local
, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΠ½Π°ΡΠ°Π»Π° Π΄Π΅Π»Π°ΡΡ scroll
ΠΈ fixed
, ΡΠ°ΠΊ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΡΡΡΡΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Π½ΠΈΠΌ:
-
scroll
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — ΡΠΎΠ½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, ΠΊΠ°ΠΊ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ. -
fixed
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΌΠ΅ΡΡΠ΅ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΡΠΎ ΠΊΠ°ΠΊ Π±Ρ Π΄Π°Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΡΠΈΠΏΠ° ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°.
ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ scroll
, ΠΈ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ, Π΅ΡΠ»ΠΈ ΡΡΠΎΡ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ.
Π‘ΠΌ. ΠΠ΅ΡΠΎ background-attachment: scroll — ΡΡΠΎ Π·Π° ΡΠΈΠ³ ?! ΠΠ²ΡΠΎΡ: ΠΠ΅Π²ΠΈΠ½ (@kevinpowell) Π½Π° CodePen.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ Π²Π½ΡΡΡΠΈ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ½
. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ background-attachement: scroll
ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Ρ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ . ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°, ΡΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½Π΅ΠΉ, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π³ΡΠ°Π½ΠΈΡΠ° ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ.
ΠΌΠ΅ΡΡΠ½ΡΠΉ
Π½Π° ΠΏΠΎΠΌΠΎΡΡ ΠΡΠΎ ΡΠΎ, Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ local
. ΠΠ½ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΡΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²ΠΌΠ΅ΡΡΠΎ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°Π±ΠΎΡΡ Π²ΡΠ΅Ρ
ΡΡΠ΅Ρ
. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ( scroll
ΠΈ local
ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ) Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ … Π½ΠΎ Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’ΠΎΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ
, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠΎ, ΡΡΠΎ Π²Ρ ΠΈΡΠΊΠ°Π»ΠΈ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ.
Π‘ΠΌ. ΠΠ΅ΡΠΎ background-attachment: ΠΌΠ΅ΡΡΠ½ΠΎΠ΅ ΠΎΡ ΠΠ΅Π²ΠΈΠ½Π° (@kevinpowell) Π½Π° CodePen.
Π― ΡΡΠ°ΡΡΠ»ΠΈΠ², ΡΡΠΎ ΡΠ·Π½Π°Π» ΠΎΠ± ΡΡΠΎΠΌ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ΅Ρ ΠΏΡΠΈΡΡΠ΄ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠ³ΡΡ ΡΠΏΡΠΎΠ²ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π°Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅.
ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ ΠΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΡΠ°ΡΡΡΠ»Π°ΡΡ Π²Π°ΠΌ ΡΠΏΠ°ΠΌ. ΠΡΠΏΠΈΡΠΈΡΠ΅ΡΡ Π² Π»ΡΠ±ΠΎΠΉ Π²ΡΠ΅ΠΌΡ.10 ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² CSS ΠΈ JavaScript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°
ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅Π΄ΠΎΡΠ°Π·ΡΠΌΠ΅Π½ΠΈΠΉ Π² ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΈ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. ΠΠΎΠΎΠ±ΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ — ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ»Π»ΡΠ·ΠΈΠΈ Π³Π»ΡΠ±ΠΈΠ½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌ ΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΏΠΎΠ»ΡΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², Π½ΠΎ Π½Π΅ Π²Π΄Π°Π²Π°Π»ΠΈΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ².
ΠΠ»Ρ ΡΡΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Ρ Π²ΡΠ±ΡΠ°Π» ΡΠ²ΠΎΠΈ Π»ΡΠ±ΠΈΠΌΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, Ρ ΠΊΠΎΡΠΎΡΡΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ ΠΈ Π΄Π°ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ.
ΠΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°
ΠΠ΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠΉ: Π±ΠΎΠ»Π΅Π΅ 1 000 000 Π²Π΅Π±-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΡΠ΅ΠΌ, ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΠ΅ΡΡΡΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅!
1. ΠΠ΅Π»ΠΈΠΊΠΎΠ΅ ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅
The Great Fall, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ CJ Gammon, — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²ΡΡΡΠ΅ΡΠ°Π».
ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ° Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΡΠ΅ΡΠ΅Ρ Π²Π½ΠΈΠ· ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ½ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ Ρ ΠΎΠ»ΡΡΠ°, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ.
ΠΠ΅ Π³ΠΎΠ²ΠΎΡΡ ΡΠΆΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΎΠΊΠ½Π° Ρ ΠΏΠΎΠ»ΡΠΌΠΈ Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π±Π΅Π·ΡΠΌΠ½ΠΎ ΠΊΡΡΡΠΎΠΉ, ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ, ΠΎΠ±Π»Π°Π΄Π°Ρ ΠΏΡΠΈΠ»ΠΈΡΠ½ΡΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ JavaScript.
ΠΠΎ ΠΏΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΠ΅Π»ΡΡΡΠ²ΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΎΠ»ΡΡΠ° Π΄Π°Π΅Ρ Π²Π°ΠΌ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ Π²Π°ΡΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.
2. ΠΠ°ΡΠ°Π»Π»Π°ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ CSS
ΠΠΎΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ Π²Π²Π΅ΡΡ Ρ.
ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Β«Π½Π°Π΄Β» ΡΠΎΠ½ΠΎΠΌ. ΠΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ»Π»ΡΠ·ΠΈΡ Π³Π»ΡΠ±ΠΈΠ½Ρ ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ.
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π‘Π΅Π±Π°ΡΡΡΡΠ½ Π¨Π΅ΠΏΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠΈΡΡΡΠΉ CSS Π΄Π»Ρ ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ.Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠ³ Π±Ρ Π»Π΅Π³ΠΊΠΎ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ, Π½Π΅ Π³ΠΎΠ²ΠΎΡΡ ΡΠΆΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠΈΡΡ.
3. ΠΠ°ΡΠ°Π»Π»Π°ΠΊΡ ΡΠ΅Π³Π° ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π§Π°ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΌΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. ΠΡΠ΅ ΠΎΠ½ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Ρ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈ ΡΡΠ°ΡΡΠ°ΠΏΠ°Ρ , Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Β«ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΒ» ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Π΄Π»Ρ ΡΠΎΠ½Π°.
Π ΡΡΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π Π΅Π½Π°Π½ ΠΡΠ΅Π½ΠΎ ΠΏΠΎΡΡΠ°ΡΠΈΠ» Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π²Π°ΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.
Π Π°Π·Π½ΠΈΡΠ° Π·Π΄Π΅ΡΡ Π½Π΅ ΡΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΡΡΡΡΠΎ Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅Π»ΠΈΠΊΠΎ ΠΌΠ΅ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘ΠΊΠΎΡΠ΅Π΅ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ Π±ΡΡΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠΎΠ½ΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°, Π½ΠΎ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΊΠΎΡΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
4. #Maincode Hackdays
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠΎΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ ΠΈ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΡΡΠΎΠΉ ΡΡΡΠΊΠ΅, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΉ Π΄Π»Ρ ΠΌΠ΅ΡΠΎΠΏΡΠΈΡΡΠΈΡ Hackdays.
ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ Β«Π²ΡΡΠ΅Β» ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠ΅ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²Π΄ΠΎΡ Π½ΡΡΡ ΠΆΠΈΠ·Π½Ρ Π² ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
Π― Π±Ρ Π½Π΅ ΡΡΠ°Π» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΠΎΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠ°ΠΆΡΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½ΠΊΠΈΠΌΠΈ. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΡΠΎΡ ΡΡΠΈΠ»Ρ, Ρ Π±Ρ ΠΏΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΠΆΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·Π΄Π΅Π» ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈΠΌΠ΅ΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ.
5. CSS Parallax
ΠΡΠΎ ΠΏΠ΅ΡΠΎ Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ ΠΠ°ΡΠ»ΠΎ ΠΡΠ½ΡΡ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°.
ΠΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π³Π΅ΡΠΎΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΡΠ΅Π·Π°Π΅Ρ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΠΏΠΎΠ²Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° Π½Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ Ρ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ ΡΡΠΈΠ»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ Π² Π±Π»ΠΎΠ³Π°Ρ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΈΠ·Π±ΡΠ°Π½Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ΅Π»Π΅Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π³Π΅ΡΠΎΠΈ Π΄Π»Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ.
6. ΠΠ°ΡΠ°Π»Π»Π°ΠΊΡ Π΄ΠΈΠ·Π°ΠΉΠ½
ΠΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡ-Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π·ΡΠ° ΡΠ²Π°Π΄Π΅Π±Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΠΡΡΠΈ Π ΠΎΠ΄ΠΆΠ΅ΡΡ.
ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π³Π΄Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π΄Π΅Π»ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° CSS, ΡΡΠΎ ΠΏΡΠΈΡΡΠ½ΠΎ, ΠΈ Π²ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΡΠ°ΡΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌΠΈ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ΅Π½ΠΈ, ΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ Π½Π° ΡΠΎΠ½. ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ»Π»ΡΠ·ΠΈΡ Π³Π»ΡΠ±ΠΈΠ½Ρ , Π΄Π°Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ΅ΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΡΠ²Π΅ΡΠ° ΠΈ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ.ΠΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ°Ρ ΠΈΠ΄Π΅Ρ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°.
7. ΠΠ°ΡΠ°Π»Π»Π°ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π Π°Π½Π΅Π΅ Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π», ΠΊΠ°ΠΊ ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°.
Π§ΡΠΎ ΠΆ, ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Π ΠΈΡΠ΅ΠΌ Π₯Π°ΡΡΠ»Π»ΠΎΠΌ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΌ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ°, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡΡ. Π― ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°Π» Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΌΡΡΠΈ ΠΈ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠΈΠ» Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·Π½ΠΈΡΡ, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΊΠΎΡΠΎΡΡΠΈ Π² ΡΡΠΎΠ»Π±ΡΠ°Ρ .
ΠΠΈ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΡΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠ΅ΠΉ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ ΠΈΠ»ΠΈ Π½Π΅ΡΠΎΡΠ½ΡΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°. ΠΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠ°Π·Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈ ΡΡΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΏΠ΅ΡΠΎ — ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ².
8. ΠΠ²Π΅Π·Π΄Π½ΡΠΉ ΡΠΎΠ½
Π₯ΠΎΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, ΠΎΠ½ Π½Π°ΠΏΡΡΠΌΡΡ ΡΠ²ΡΠ·Π°Π½ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΈΡΡΡΠΉ CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π·Π²Π΅Π·Π΄Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π·Π²Π΅Π·Π΄Ρ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π²Π·Π³Π»ΡΠ΄Π°.
ΠΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΎΡ ΠΎΠ΄ΡΡ ΡΠ΅ΡΠ΅Π· CSS, Π½ΠΎ ΡΡΠΎ ΠΏΠ΅ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Sass ΠΈ Compass, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π²Π½ΠΎΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
ΠΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ / Π²ΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎ Π² ΡΠ²ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π½Π΅ Π²Π½ΠΎΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. CodePen ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ Sass Π² CSS ΠΎΠ΄Π½ΠΈΠΌ Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΠΎΡΡΠ°Π²ΠΈΡ ΡΡΡΠ΄Π°.
9. Π₯ΠΎΠ»ΡΡ Parallax Skyline
ΠΠ½ΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠΎΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΎΠ»ΡΡΠ° ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΡΠ΅ΠΊΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΌΡΡΠΈ ΡΠ³ΠΎΠ» ΠΎΠ±Π·ΠΎΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½Π΅ΠΉ, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠ° Π»ΠΈΠ½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ° Π΄Π²ΠΈΠΆΠ΅ΡΡΡ Ρ ΡΠ΅ΡΠΊΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠ΅ΠΉ.
ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅Ρ JavaScript Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½Π°Ρ ΠΈΠ΄Π΅Ρ. ΠΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΠΎ, ΡΡΠΎ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ , ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΎ ΡΠΎΠΆΠ΅ Π½Π΅ ΡΠΎ, ΡΡΠΎ Π²Ρ ΡΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ. ΠΠΎ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ.
10. ΠΠ°ΡΠ°Π»Π»Π°ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°, Π½Π°ΡΠ΅Π»Π΅Π½Π½ΡΠΉ Π½Π° ΠΌΡΡΡ, — ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π’ΡΠ»ΠΈΠΎ Π€ΠΈΠ»ΠΈΠΏΠ΅. ΠΠ½ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π½Π΅Π³ΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°.
ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΡΠΈΠ² ΠΌΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π»ΡΠ±ΠΈΠ½Ρ Π²Π½ΡΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ Β«ΡΠ»ΠΎΠΉΒ» Π² HTML. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΎΠ΄Π½ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΈΡ .
ΠΡΠ΅ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ΅ΡΠ΅Π· JavaScript, ΠΈ ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΊΡΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π±Π°Π½Π½Π΅ΡΠ° ΠΈΠ»ΠΈ Π² ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
11. Π€ΠΈΠ»ΡΡΡ ΡΠ°Π·Π±ΠΈΡΠΎΠ³ΠΎ ΡΡΠ΅ΠΊΠ»Π°
Π― Π²ΠΈΠ΄Π΅Π» ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ ΡΠ°Π½ΡΡΠ΅, ΠΈ ΠΎΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΠ²ΠΎΠ΅ΠΎΠ±ΡΠ°Π·Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Π€ΠΈΠ»ΡΡΡ Ρ ΡΠ°Π·Π±ΠΈΡΡΠΌ ΡΡΠ΅ΠΊΠ»ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ»Π»ΡΠ·ΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΎ Π½Π° ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°ΡΡΠ΅ΠΉ. ΠΡΠΎ ΠΏΠΎΡΡΠΈ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π½Π° ΡΡΠ΅ΠΊΠ»Π΅, ΠΈ ΠΎΠ½ΠΎ ΡΠ°Π·Π±ΠΈΠ»ΠΎΡΡ, ΡΠ°ΡΠΊΠΎΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΊΡΠΈΠ²ΠΈΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΡΡΠΎΠ³ΠΎ CSS, ΠΈ ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ΅Ρ ΠΈΠ·ΡΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠ»Π°ΡΡΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ, Π½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΌΠΈΡΠ΅, ΠΊΡΠΎΠΌΠ΅ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π³Π»ΡΠ±ΠΈΠ½Ρ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ° ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
Π Π°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Β· ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ WebPlatform
Π Π΅Π·ΡΠΌΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠ° ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²ΡΠΎΡΡΡ ΠΏΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
— absolute
ΠΈ fixed
.ΠΠ΅ΡΠ²Π°Ρ ΠΏΠ°ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ — ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
— ΡΠ΅ΡΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½Ρ, ΠΈ ΠΌΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΈΡ
Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π° Π½ΠΈΠΌΠΈ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΏΡΠ΅Π΄ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ. ΠΠ½ΠΎΠ³Π΄Π°, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΡΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ — ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, Π½ΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ!
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΎΡΠΌΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ; ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΊΡΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° / Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ, ΠΎΠ½ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π²Π½ΡΡΡΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ absolute
ΠΈ fixed
, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΠΈΡΡΠ»Π΅Π΄ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ z-index.
ΠΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π²ΡΠ΅ ΡΡΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²Π°ΠΆΠ½ΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ — ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ².
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ
ΠΠ°ΠΆΠ½ΡΠΌ ΠΏΠΎΠ½ΡΡΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ
ΠΎΠ΄ΠΈΡ Π΄ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ: Π±Π»ΠΎΠΊ Π±Π»ΠΎΠΊΠ°, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΠ»Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Π±Π»ΠΎΠΊΠΎΠ², ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ°, Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ — ΡΡΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ -ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½Π½ΡΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ . ΠΠΎΠ΄ Β«ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΒ» ΠΌΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
, absolute
ΠΈΠ»ΠΈ fixed
— Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π²ΡΠ΅, ΠΊΡΠΎΠΌΠ΅ ΠΎΠ±ΡΡΠ½ΡΡ
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠ°ΠΊ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² position: relative
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²Ρ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠ° (Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²), Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π»ΠΈ ΠΎΠ½ΠΈ ΡΡΠ°Π·Ρ ΠΏΠΎΠ΄ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΠΈ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΠΈ.
ΠΡΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ — ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌΒ», ΡΡΠΎ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΏΡΠΈΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ html
.ΠΡΠ»ΠΈ Π²Ρ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°; Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠ΅ΡΠ°ΡΠ°Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΡΠΎΠ³ΠΎ — ΠΎΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΈΡ Π±Π»ΠΎΠΊΠ°.
ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΡΠΌΠΌΠΈΡΡΠ΅ΠΌ ΡΡΠΎ Π² Π²ΠΈΠ΄Π΅ Π½Π°Π±ΠΎΡΠ° ΠΏΡΠΎΡΡΡΡ
ΡΠ°Π³ΠΎΠ² — ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ:
- ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° — ΠΈΠΌΠ΅Π΅Ρ Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
position
ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
,Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ
ΠΈΠ»ΠΈΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ
? - ΠΡΠ»ΠΈ Π΄Π°, ΡΠΎ Π²Ρ Π½Π°ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ.
- ΠΡΠ»ΠΈ Π½Π΅Ρ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠΈΡΠ΅, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°Π³Π° 1, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΡΡΠ΅ΡΠΏΠ°Π΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΊΠΎΠ².
- ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΡΡΠΈΠ³Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
html
, Π½Π΅ Π½Π°ΠΉΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρhtml
.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΡΡΠΎ ΠΎΡΠΎΠ±Π°Ρ ΡΠΎΡΠΌΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΈΠ·ΡΡΠΈΠΌ ΡΡΠΎ ΠΏΠΎΠ·ΠΆΠ΅ ΠΈ ΡΠΊΠΎΠ½ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌΡΡ Π·Π΄Π΅ΡΡ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅. ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠΎΠ³Π΄Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ΡΠΌΠΈΠ½ Β«Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉΒ» Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° ΠΈ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΡΠ°ΡΡΠΈ, Ρ Π±ΡΠ΄Ρ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΠΎΠ±Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
, ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
.
Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π²Ρ ΡΠ·Π½Π°Π»ΠΈ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ΅ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π½ΠΎ ΡΠΏΠΎΡΠΎΠ± ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³ΠΎΠΉ.
ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π² ΡΠ»ΡΡΠ°Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ½ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΡΠ°ΠΊ ΡΡΠΎ top: 1em
ΠΈ bottom: -1em
ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅, ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π° ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ top
ΠΈ bottom
(ΠΈΠ»ΠΈ left
ΠΈ ΡΠΏΡΠ°Π²Π°
) Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΎ.
ΠΡΠΈ ΡΠΎΡΠΊΠΈ Π½Π΅Π²Π΅ΡΠ½Ρ Π² ΡΠ»ΡΡΠ°Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π΅ΡΡ Π²ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ³Π»ΠΎΠ² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° — ΡΠΊΠ°ΠΆΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
— Π° Π·Π°ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΈΡΠΈΠ½Ρ
ΠΈ Π²ΡΡΠΎΡΡ
(ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΈΡΠΈΠ½Π°
ΠΈ Π²ΡΡΠΎΡΠ°
, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» ΡΠΏΠ°ΠΊΠΎΠ²Π°Π½ Π² ΡΠ΅ΡΠΌΠΎΡΡΠ°Π΄ΠΎΡΠ½ΡΡ ΠΏΠ»Π΅Π½ΠΊΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ)
Microsoft Internet Explorer Π²Π΅ΡΡΠΈΠΈ 6 ΠΈ ΡΡΠ°ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅Ρ ΠΊΡΠ°Π΅Π², Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ³Π»Π° ΠΏΠ»ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ.
/ * ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE6 * /
#foo {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 3em;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 30em;
Π²ΡΡΠΎΡΠ°: 20em;
}
/ * ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE6 * /
#foo {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 3em;
ΡΠΏΡΠ°Π²Π°: 0;
Π²Π½ΠΈΠ·Ρ: 3em;
ΡΠ»Π΅Π²Π°: 0;
}
ΠΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² top
, right
, bottom
ΠΈ left
, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΎΡ ΠΊΡΠ°Π΅Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎ ΠΈΡ
, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ
, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ°.ΠΡΠΎ Π½Π΅ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, right: 2em
ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±ΡΠ΄Π΅Ρ Π½Π° 2em ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ Ρ Π²Π°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° position: relative
Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ΅ ΡΠ°ΠΊ ΠΏΠΎΠ»Π΅Π·Π½Π°, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ.ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² — ΡΡΠΎ Π΄Π°Π΅Ρ Π²Π°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ absolute.html.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΠ°ΡΠ΅ΠΌ ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π² Π½ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΊΠ°ΠΊ absolute.css.
html, body { ΠΌΠ°ΡΠΆΠ°: 0; ΠΎΡΡΡΡΠΏ: 0; } #outer { ΠΌΠ°ΡΠΆΠ°: 5em; Π³ΡΠ°Π½ΠΈΡΠ°: 1px solid # f00; } #Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ { ΡΠΈΡΠΈΠ½Π°: 6em; Π²ΡΡΠΎΡΠ°: 4em; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 999; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΎΠ±Π° ΡΠ°ΠΉΠ»Π° ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π² Π±ΡΠ°ΡΠ·Π΅Ρ.ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ΅ΡΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΠΎΠΊΡΡΠΆΠ΅Π½Π½ΡΠΉ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎΠΉ ΠΊΡΠ°ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ
#inner
ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π΄Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΅ΡΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ#outer
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΡΠΊΡΡΡΠ½ΡΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ#inner
, ΠΈΠΌΠ΅Π΅Ρ ΠΊΡΠ°ΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»Π΅ 5em ΠΏΠΎ ΠΏΠ΅ΡΠΈΠΌΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ ΠΎΡ ΠΊΡΠ°Π΅Π² ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΠΊΠΎ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ. ΠΠΎΠΊΠ° Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ, ΠΏΡΠ°Π²Π΄Π°? ΠΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°#outer
Π·Π°Π΄Π°Π΅ΡΡΡ Π΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (#inner
), Π° ΡΠΈΡΠΈΠ½Π° — Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ.Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅
#inner
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ! ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»Ρ#inner
:#inner { ΡΠΈΡΠΈΠ½Π°: 6em; Π²ΡΡΠΎΡΠ°: 4em; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 999; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ. ΠΠΌΠ΅ΡΡΠΎ ΠΊΡΠ°ΡΠ½ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΡΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΡΠ΅ΠΏΠ΅ΡΡ Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ»ΡΡΠ°Ρ Π²Π΅ΡΡ Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°. Π ΡΠ΅ΡΠ°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠ° Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π΄Π²ΠΈΠ³Π°Π»Π°ΡΡ! ΠΡ ΡΡΠΎΠ³ΠΎ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ?
ΠΠ΄Π΅ΡΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Π΄Π²Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ.
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ #inner
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΡΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΠΈΠ»ΠΎ Π΅Π³ΠΎ ΠΈΠ· Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΠ°. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ #outer
ΡΠ΅ΠΏΠ΅ΡΡ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°Ρ
ΠΎΠ΄ΡΡΠΈΡ
ΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ Π΄ΠΎ Π½ΡΠ»Ρ. Π’ΠΎ, ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΠΊΡΠ°ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ ΡΠΎΠ»ΡΠΈΠ½ΠΎΠΉ 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ Π² 1 ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ — Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π²Π΅ΡΡ
Π½ΡΡ ΠΈ Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅Ρ.
ΠΡΠΎΡΠ°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ Π²Π΅ΡΡ — Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠ° Π½Π΅ Π΄Π²ΠΈΠ³Π°Π»Π°ΡΡ.ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
: Π°Π²ΡΠΎ
, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» Π±Ρ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π½Π΅ Π±ΡΠ» ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ΄Π°Π»Π΅Π½ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ°, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π° Π½ΠΈΠΌ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ — Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡΡΡ Π½Π° ΡΡΠΎ, Π΅ΡΠ»ΠΈ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΠΌΠ΅Π½Ρ, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠΌ CSS, Β«ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡΒ» ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Ρ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° top
.ΠΠ°ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²ΡΡΡΡ Π² ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ
ΠΏΠΎ ΠΎΡΠΈ X (ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠ΅), Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
ΠΠ°ΡΠ΅ΠΌ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π²ΡΡΠΎΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
#outer
, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠ½ΠΎΠ²Π° Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΠΊΠ°ΠΊ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠΌ#inner
Π² ΡΡΠΎΡΠΎΠ½Ρ. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π² ΡΠ²ΠΎΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS:#outer { ΠΌΠ°ΡΠΆΠ°: 5em; Π³ΡΠ°Π½ΠΈΡΠ°: 1px solid # f00; Π²ΡΡΠΎΡΠ°: 4em; } #Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ { ΡΠΈΡΠΈΠ½Π°: 6em; Π²ΡΡΠΎΡΠ°: 4em; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 999; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; ΡΠ»Π΅Π²Π°: 1em; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅, ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.ΠΠ»Π΅ΠΌΠ΅Π½Ρ
#outer
ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ½ΠΎΠ²Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Ρ Π·Π°Π΄Π°Π»ΠΈ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ#inner
ΡΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ, Π½ΠΎ Π½Π΅ ΡΡΠ΄Π°, Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡΡ. ΠΡΠΎ Π½Π΅ 1em ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π° 1em ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π°! ΠΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΡΠ½ΡΠ»ΠΎΡΡ Π²ΡΡΠ΅,#inner
Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, ΠΏΠΎΡΡΠΎΠΌΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ, ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΎΡauto
, ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ ΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅left: 1em
, Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ#inner
Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° 1em ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π°.- Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ — ΠΎ ΡΡΠ΄ΠΎ! Π‘Π΅ΡΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 1em ΠΎΡ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°
position: relative
Π² ΠΏΡΠ°Π²ΠΈΠ»Π΅#outer
ΡΠ΄Π΅Π»Π°Π»ΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΎ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π»ΡΠ±ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ ΠΌΠΎΠ³ ΠΈΠΌΠ΅ΡΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅left: 1em
, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π»Ρ#inner
, ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ#outer
, Π° Π½Π΅ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
- Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ — ΠΎ ΡΡΠ΄ΠΎ! Π‘Π΅ΡΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 1em ΠΎΡ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°
Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠΆΠ°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ, Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²Π° left
ΠΈ right
ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ width
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ Π²ΡΡΠΎΡΡ, Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²Π° top
ΠΈ bottom
ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ height
.
ΠΡΠ±ΠΎΠ΅ ΠΈΠ· ΡΡΠΈΡ ΡΠ΅ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .ΠΡΠΎΡΠ΅Π½ΡΡ ΠΏΠΎ ΡΠ°ΠΌΠΎΠΉ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ΅ΠΌΡ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠ»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² left
, right
ΠΈ width
ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠΈΡΠΈΠ½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² top
, bottom
ΠΈ height
ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π²ΡΡΠΎΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
Internet Explorer 6 ΠΈ ΡΡΠ°ΡΡΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ Opera 8 ΠΈ ΡΡΠ°ΡΡΠ΅ ΠΎΡΠΈΠ±Π»ΠΈΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° .ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠ΅ΠΌ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
#inner
Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ — Π²Π½Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ#inner
:#inner { ΡΠΈΡΠΈΠ½Π°: 50%; Π²ΡΡΠΎΡΠ°: 50%; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 999; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; ΡΠ»Π΅Π²Π°: 1em; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅, ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠ΅ΡΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΡΠ΅ ΠΈ ΠΊΠΎΡΠΎΡΠ΅ (ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ).Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΈΠΌΠ΅Π΅Ρ Π½ΠΎΠΌΠ΅Ρ
#outer
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
. Π¨ΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°# inner
ΡΠ΅ΠΏΠ΅ΡΡ Π²Π΄Π²ΠΎΠ΅ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ#outer
, Π° Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ Π²ΡΡΠΎΡΡ#outer
.ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ½ΠΎΠ²Π° ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ°Π·Π½ΠΈΡΡ! ΠΠ½Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²
#outer
:#outer { ΠΌΠ°ΡΠΆΠ°: 5em; Π³ΡΠ°Π½ΠΈΡΠ°: 1px solid # f00; Π²ΡΡΠΎΡΠ°: 4em; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ — Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°Π·Π½ΠΈΡΠ°, Π°? Π‘Π΅ΡΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΠ΅ΠΏΠ΅ΡΡ Π²Π΄Π²ΠΎΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²Π΄Π²ΠΎΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π·Π½Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ ΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ!
Π’ΡΠ΅ΡΡΠ΅ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ — z-index
ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ Π΄Π²ΡΠΌΠ΅ΡΠ½ΡΡ. Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΅ΡΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ°Π·Π²ΠΈΡΡ, ΡΡΠΎΠ±Ρ 3D-Π΄ΠΈΡΠΏΠ»Π΅ΠΈ ΡΡΠ°Π»ΠΈ ΠΎΠ±ΡΡΠ½ΡΠΌ ΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΎΠ²Π°ΡΡΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Π»ΡΠ½ΡΠΌΠΈ 3D-ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ. ΠΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ CSS ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ ! ΠΡΠΎ Π½Π΅ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π²ΠΈΡΠ°ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠΌ — Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄Π΅Π»Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ Π²Π΅ΡΠΈ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
ΠΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΎΡΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ — ΡΡΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ X ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΎΡΡ Y. ΠΠ°ΡΠ°Π»ΠΎ ΡΡΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΎ Π΅ΡΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ X ΠΈ Y ΡΠ°Π²Π½Ρ 0. ΠΠΎ Π΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡ Z, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΠΊ ΠΈΠ΄ΡΡΡΡ ΠΏΠ΅ΡΠΏΠ΅Π½Π΄ΠΈΠΊΡΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°. (ΠΈΠ»ΠΈ Π½Π° Π±ΡΠΌΠ°Π³Ρ ΠΏΡΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ). ΠΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Z ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Β«ΠΏΠ΅ΡΠ΅Π΄Β» Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Z. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Z ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ, ΡΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Β«ΠΏΠΎΠ·Π°Π΄ΠΈΒ» Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΎΡΡΡΠ΅ΡΠ° (Ρ ΠΎΠ±ΡΡΡΠ½Ρ ΡΡΡ ΡΠΎΡΠΊΡ ΠΎΡΡΡΠ΅ΡΠ° ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠ½ΡΡΡ).
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ, ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π°Π΅ΠΌ, ΡΡΠΎ ΡΡΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΠ΅ΠΌ Π² CSS, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ ΡΠ°ΡΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅ Π΅Π΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΌ ΡΡΠ΅Π½ΠΈΠΈ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ) Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΡΡ Π² ΡΠ°ΠΌΠΊΠ°Ρ
ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½Ρ ΠΈ ΡΡ ΠΆΠ΅ ΡΠΎΡΠΊΡ ΠΎΡΡΡΠ΅ΡΠ° ΠΏΠΎ ΠΎΡΠΈ Z. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΡΡΠΎΠΌ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ Π½ΠΈΠΆΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Z (ΡΠ°ΠΊΠΆΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠ΅ΠΊΠ°) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
.ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅Π»ΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ (ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ) ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»ΠΎΠ² auto
ΠΈΠ»ΠΈ inherit
. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ — auto
, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡ ΠΆΠ΅ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°, ΡΡΠΎ ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΈΠ½Π΄Π΅ΠΊΡΠ° Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z. ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° 19 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΠ·Π°Π΄ΠΈ ΠΈΠ»ΠΈ Π½Π° 5 ΡΠ°Π½ΡΠΈΠΌΠ΅ΡΡΠΎΠ² Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΎ ΠΊΠΎΠ»ΠΎΠ΄Π΅ ΠΊΠ°ΡΡ: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΊΠ°ΡΡΡ ΠΈ ΡΠ΅ΡΠ°ΡΡ, ΡΡΠΎ ΠΏΠΈΠΊΠΎΠ²ΡΠΉ ΡΡΠ· Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΡΡΠ΅Ρ Π±ΡΠ±Π΅Π½ — Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°ΡΡΡ Π΅ΡΡΡ ΡΠ²ΠΎΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° ΠΈΠ»ΠΈ Z-ΠΈΠ½Π΄Π΅ΠΊΡ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅ z-index
ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, Π²Ρ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΠ΅ Π΅ΠΌΡ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° Β«ΠΏΠ΅ΡΠ΅Π΄Β» Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°. 0 (Π½ΠΎΠ»Ρ) z-index
ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ ΠΈ auto
, Π½ΠΎ Π΅ΡΡΡ ΡΠ°Π·Π½ΠΈΡΠ°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ Π²Π΅ΡΠ½ΡΡΡ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠ½ΡΡΡ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ z-index
Π½Π°Π·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° Β«ΠΏΠΎΠ·Π°Π΄ΠΈΒ» ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ ΡΡΠ΅ΠΊΠ°.
ΠΠΎΠ³Π΄Π° Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°, ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ.
Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΡΠ΅ΠΌΠΈ ΡΠ»ΠΎΠ΅Π² Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΠΈΡ ΡΠ»ΠΎΡΡ , Π½ΠΎ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ — Π²Π°ΠΌ Π²ΡΡΠ΄ Π»ΠΈ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΠΌΠ΅ΡΡ Π΄Π΅Π»ΠΎ Ρ ΡΠ΅ΠΌΡΡ ΡΠ»ΠΎΡΠΌΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅) Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΡΡ, ΠΎΡ Π·Π°Π΄Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΊ ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΉ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π€ΠΎΠ½ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΎΠ±ΡΠ°Π·ΡΡΡΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ ΡΡΠ΅ΠΊΠ°
- ΠΠΎΡΠΎΠΌΠΊΠΈ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ° Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅
- ΠΠ»Π°Π²ΡΡΠΈΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ
- ΠΠΎΡΠΎΠΌΠΊΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠ΅ΠΊΠ°
Π°Π²ΡΠΎ
ΠΈΠ»ΠΈ (Π½ΠΎΠ»Ρ) - ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ ΡΡΠ΅ΠΊΠ°
ΠΡΠ΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π·Π°ΠΏΠΈΡΠΈ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° ΠΊΠΎΡΠΎΡΡΡ
ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
.
ΠΡΠ΅ ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ²Π΅Π΄Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Z-ΠΈΠ½Π΄Π΅ΠΊΡ.
ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π² Π²Π°Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°:
<ΡΠ΅Π»ΠΎ>