ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ | MDN
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΈΠ·ΡΠΌΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ
Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ; Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π΅ ΠΈΠ»ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ° ΡΡΠ°ΡΡΡ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ position
ΠΈ ΠΊΠ°ΠΊ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π·Π½Π°Π½ΠΈΡ: | ΠΡΠ½ΠΎΠ²Ρ HTML (ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² HTML), ΠΈΠ΄Π΅Ρ ΠΎ ΡΠΎΠΌ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ CSS (ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² CSS.) |
---|---|
ΠΠ°Π΄Π°ΡΠ°: | ΠΠ·ΡΡΠΈΡΡ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. |
ΠΠ°ΠΌ Π±Ρ Ρ
ΠΎΡΠ΅Π»ΠΎΡΡ ΡΡΠΎΠ±Ρ Π²Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΈ Π·Π° Π½Π°ΠΌΠΈ Ρ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡΠΌΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΠ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΠ·ΡΠΌΠΈΡΠ΅ ΠΊΠΎΠΏΠΈΡ 0_basic-flow.html
ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ GitHub ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ (ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π·Π΄Π΅ΡΡ) ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΎΡΠΏΡΠ°Π²Π½ΡΡ ΡΠΎΡΠΊΡ.
ΠΡΡ ΠΈΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΠΌ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ
ΡΠΈΠΏΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ HTML. ΠΠ»Ρ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ
.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅Β β ΡΡΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π·Π½Π°ΡΠΈΡ «ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° β Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ».
Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π°Ρ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π΄Π»Ρ Π±ΡΠ΄ΡΡΠΈΡ
ΡΠ°Π·Π΄Π΅Π»ΠΎΠ², ΡΠ½Π°ΡΠ°Π»Π° Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ class
positioned
ΠΊΠΎ Π²ΡΠΎΡΠΎΠΌΡ <p>
Π²Β HTML:
<p> . .. </p>
Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ Π²Π°ΡΠ΅Π³ΠΎ CSS:
.positioned {
position: static;
background: yellow;
}
Π Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, ΡΠΎ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π½Π΅ ΡΡΠΈΡΠ°Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° 2-Π³ΠΎ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ°. ΠΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΡΠ°Π½Π΅Π΅, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ!
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ. ΠΠ½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π·Π°Π½ΡΠ²ΡΠ΅Π³ΠΎ ΡΠ²ΠΎΡ ΠΌΠ΅ΡΡΠΎ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ²ΠΈΠ³Π°ΠΉΡΠ΅ΡΡ Π΄Π°Π»Π΅Π΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅
Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅:
position: relative;
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π½Π° Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠ°ΠΏΠ΅, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²Ρ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ Π²Π°ΠΌ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅? ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top
, bottom
, left
(en-US), ΠΈ right
ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² top, bottom, left, ΠΈ right
top
, bottom
, left
(en-US), ΠΈ right
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ position
ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΡΠ΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»Ρ
Π² Π²Π°ΡΠ΅ΠΌ CSS:
top: 30px;
left: 30px;
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π»ΡΠ±ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅ ΠΏΠΎ Π»ΠΎΠ³ΠΈΠΊΠ΅: ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, ΠΌΠΌ, rems, %, ΠΈ Ρ.Π΄.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈΒ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΡΡΠΎ, ΠΏΡΠ°Π²Π΄Π°? Π₯ΠΎΡΠΎΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΡΡΠΎ Π½Π΅ ΡΠΎ, ΡΠ΅Π³ΠΎ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ β ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π²Π½ΠΈΠ· ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ Π²Π²Π΅ΡΡ ΠΈ Π²Π»Π΅Π²ΠΎ? ΠΠ°ΠΊ Π±Ρ Π½Π΅Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΡΠΎ Π½ΠΈ Π·Π²ΡΡΠ°Π»ΠΎ ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ β Π²Π°ΠΌ Π½Π°Π΄ΠΎ Π΄ΡΠΌΠ°ΡΡ ΠΎ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΡΠΈΠ»Π΅ ΡΠΎΠ»ΠΊΠ°ΡΡΠ΅ΠΉ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ Π΅Π³ΠΎ Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ.
top: 30px;
, ΡΠΈΠ»Π° ΡΠΎΠ»ΠΊΠ°Π΅Ρ Π±Π»ΠΎΠΊ, Π·Π°ΡΡΠ°Π²Π»ΡΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π½Π° 30px.ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°ΡΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:
position: absolute;
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, ΡΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π΅ΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅:
Π ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΡΠ°ΠΌ, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ β ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈ ΡΡΠ΅ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ±Π»ΠΈΠ·ΠΈΠ»ΠΈΡΡ ΡΠ°ΠΊ Π±ΡΠ΄ΡΠΎ, ΠΎΠ½ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ! ΠΡ, Π² ΠΊΠ°ΠΊΠΎΠΌ-ΡΠΎ ΡΠΌΡΡΠ»Π΅ ΡΡΠΎ ΠΏΡΠ°Π²Π΄Π°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΠ»ΠΎΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ: ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎ-Π²ΡΠΎΡΡΡ
, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π°ΡΡ β ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ top
, bottom
, left
(en-US), ΠΈ
Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΡΡΠΎΡΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΡΠΎΠΌΡ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² 30px ΠΎΡ Π²Π΅ΡΡ
Π° «ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°» ΠΈΒ 30px ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ (Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ «ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ» ΡΠ²Π»ΡΠ΅ΡΡΡΒ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ. Π‘ΠΌ. ΡΠ°Π·Π΄Π΅Π» Π½ΠΈΠΆΠ΅ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ top
, bottom
left
(en-US), ΠΈ right
Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π°Π΄ΠΎ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ top: 0; bottom: 0; left: 0; right: 0;
ΠΈ margin: 0;
Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ! ΠΠΎΡΠΎΠΌ ΡΠ½ΠΎΠ²Π° Π²ΡΠ΅ Π²Π΅ΡΠ½ΠΈΡΠ΅…ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ°, margin-Ρ Π²ΡΠ΅ Π΅ΡΡ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΡ margin Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ «ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°? ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠ΅Π΄ΠΊΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠΌ. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°).
ΠΡΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΡΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ΅. ΠΡΡ
ΠΎΠ΄Π½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΎΠΊΠΎΠΌ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <html>
. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <html>
ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½ Π² <body>
Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ HTML, Π½ΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π°Β 30px ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΡΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ Π²Π»ΠΎΠΆΠ΅Π½ (Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ ΠΠ Π²Π»ΠΎΠΆΠ΅Π½). Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π²Π°ΡΠ΅Π³ΠΎΒ body
:
position: relative;
ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² z-index
ΠΡΠ΅ ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ β Ρ ΠΎΡΠΎΡΠ΅Π΅ ΡΠ°Π·Π²Π»Π΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΊΠΎΠ΅-ΡΡΠΎ ΡΠ΅Π³ΠΎ ΠΌΡ Π΅ΡΡ Π½Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ β ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°? Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π²ΡΠ΅ ΡΡΠΎ Π²ΡΠ΅ΠΌΡ, Ρ Π½Π°Ρ ΠΈΠΌΠ΅Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈ ΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ «ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°ΡΡ» Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π§ΡΠΎ ΠΆΠ΅ Π½Π°ΡΡΡΡ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ?
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ CSS, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ ΡΠ°ΠΊ ΠΆΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ:
p:nth-of-type(1) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
}
ΠΠ° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ ΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΠΉ Π² Π»Π°ΠΉΠΌΠΎΠ²ΡΠΉ ΠΈΠ·ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠ½ ΡΡΡΠΎΡΠΊΡ Π²ΡΡΠ΅ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» ΠΈΡΡ
ΠΎΠ΄Π½ΠΎ. Π ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΏΠΎΠ΄ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΌ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠΎΠΌ .positioned
, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΎΠ±Π° ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ. ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠ°ΡΠ°Π³ΡΠ°Ρ .positioned
ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠΎΡΡΠΌ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠΎΠΌ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ Π² ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ΅ ΠΈ ΠΏΠΎΠ·ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° Π²ΡΠΈΠ³ΡΡΠ²Π°ΡΡ Π½Π°Π΄ ΡΠ°Π½Π΅Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°.
ΠΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ? ΠΠ°, ΠΌΠΎΠΆΠ΅ΡΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
. «z-index» ΡΡΠΎ ΡΡΡΠ»ΠΊΠ° ΠΊ z-ΠΎΡΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΡΡΠ°ΠΏΠΎΠ² Π² ΡΡΠΎΠΌ ΠΊΡΡΡΠ΅, Π³Π΄Π΅ ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
(x-ΠΎΡΡ) ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
(y-ΠΎΡΠΈ) ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ
Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ΅Π½Π΅ΠΉ. (0,0) Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π²Π΅ΡΡ
Ρ ΡΠ»Π΅Π²Π° ΡΡΡΠ°Π½ΠΈΡΡ (ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°) ΠΈ ΠΎΡΠΈ x- ΠΈ y- Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΡΡ Π½Π°ΠΏΡΠ°Π²ΠΎ ΠΈ Π²Π½ΠΈΠ· ΡΡΡΠ°Π½ΠΈΡΡ (Π²ΠΎ Π²ΡΡΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΄Π»Ρ ΡΠ·ΡΠΊΠΎΠ², Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΡ
ΡΠ»Π΅Π²Π° Π½Π° ΠΏΡΠ°Π²ΠΎ).
Π£ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅ΡΡΡ z-ΠΎΡΡ: Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠ°Ρ Π»ΠΈΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΎΡ ΠΏΠΎΠ²Π΅ΡΡ
Π½ΠΎΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠΊΡΠ°Π½Π° ΠΊ Π²Π°ΡΠ΅ΠΌΡ Π»ΠΈΡΡ (ΠΈΠ»ΠΈ ΡΡΠΎ Π΅ΡΡ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΊΡΠ°Π½ΠΎΠΌ). ΠΠ½Π°ΡΠ΅Π½ΠΈΡ z-index
Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΎ Π³Π΄Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° ΡΡΠΎΠΉ ΠΎΡΠΈ; ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΡ
Π²ΡΡΠ΅ ΠΏΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, Π° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΡ
Π½ΠΈΠΆΠ΅ ΠΏΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ z-index
auto
, ΡΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°Π²Π½ΠΎ 0.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΠ±ΡΡΠ²ΠΈΡΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ p:nth-of-type(1)
ΠΏΡΠ°Π²ΠΈΠ»Π°:
z-index: 1;
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΈΠ΄Π΅ΡΡ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠΎΠΌ Π»Π°ΠΉΠΌΠΎΠ²ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΡΠ²Π΅ΡΡ Ρ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΠΎ z-index
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ½Π΄Π΅ΠΊΡΠ° ΡΠΎΠ»ΡΠΊΠΎ Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ; Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π΄Π°Π²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» Π½Π° 23 ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²ΡΡΠ΅ ΠΏΠΎ z-ΠΎΡΠΈ β ΡΡΠΎ ΡΠ°ΠΊ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π°Π΄ ΠΌΠ΅Π½ΡΡΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΠΎΡ Π²Π°Ρ Π·Π°Π²ΠΈΡΠΈΡ ΠΊΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ 2 ΠΈ 3, Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΎΡ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ ΡΡΠΎ ΠΈ 300 ΠΈ 40000.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅Π΅
Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΎΠ΄Π½ΠΈΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΎΡΠ»ΠΈΡΠΈΠ΅ΠΌ: Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ΅ΡΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° (ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΅ΡΠ»ΠΈ Π½Π΅Ρ ΠΈΠ½ΠΎΠ³ΠΎ), ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΌΠ΅ΡΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΊΡΠΎΠΌΠ΅ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Ρ transform ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ none. ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡΒ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Ρ Π½Π° ΠΌΠ΅ΡΡΠ΅, ΠΊΠ°ΠΊ ΠΏΠΎΡΡΠΎΡΠ½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΅Π³Π΄Π° Π²ΠΈΠ΄ΠΈΠΌΡ Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΡΡΠ°Π²ΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π² Π²ΠΈΠ΄Ρ. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΡΠ΄Π°Π»ΠΈΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° p:nth-of-type(1)
ΠΈ .positioned
ΠΈΠ· Π²Π°ΡΠ΅Π³ΠΎ CSS.
Π ΡΠ΅ΠΏΠ΅ΡΡ, ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ body
ΡΠ΄Π°Π»ΠΈΠ² ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ position: relative;
ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ ΠΊΠ°ΠΊ ΡΡΡ:
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <h2> (en-US) position: fixed;
, Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π²Π΅ΡΡ
Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² Π²Π°Ρ CSS:
h2 {
position: fixed;
top: 0;
width: 500px;
margin-top: 0;
background: white;
padding: 10px;
}
top: 0;
Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌ ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΊΠ»Π΅ΠΈΡΡ Π΅Π³ΠΎ ΠΊ Π²Π΅ΡΡ
Ρ ΡΠΊΡΠ°Π½Π°. ΠΌΡ Π΄Π°Π»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΡΡ ΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΠΈ Π·Π°ΡΠ΅ΠΌ Π΄Π°ΡΠΌ Π΅ΠΌΡ Π±Π΅Π»ΡΠΉ ΡΠΎΠ½ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ padding ΠΈ margin, ΡΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ Π±ΡΠ» Π²ΠΈΠ΄ΠΈΠΌΡΠΌ ΠΏΠΎΠ΄ Π½ΠΈΠΌ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ΅ΠΉΡΠ°Ρ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ Π·Π°Π±Π°Π²Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ, Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²Π²Π΅ΡΡ ΠΈ ΠΈΡΡΠ΅Π·Π°ΡΡ ΠΏΠΎΠ΄ Π½ΠΈΠΌ. ΠΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ»ΡΡΡΠΈΡΡ ΡΡΠΎ β Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. ΠΡΠΎ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Π΅ΡΡΡ Π½Π°Π²Π΅ΡΡ . ΠΠ°ΠΌ Π½Π°Π΄ΠΎ ΡΠ΄Π²ΠΈΠ½ΡΡΡ Π²ΡΠ΅ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Π½ΠΈΠ·; ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ margin ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΡ. ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π΅Π³ΠΎ ΡΠ΅ΠΉΡΠ°Ρ:
p:nth-of-type(1) {
margin-top: 60px;
}
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΈΠ΄Π΅ΡΡ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
position: sticky
ΠΠΎΡΡΡΠΏΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ position: sticky
, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²Π΅Π΅ ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΠ΅. ΠΠΎ ΡΡΡΠΈ, ΡΡΠΎ Π³ΠΈΠ±ΡΠΈΠ΄ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΎΠ½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 10px ΠΎΡ Π²Π΅ΡΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°), ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ.Β ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ, Π° Π·Π°ΡΠ΅ΠΌ Π·Π°Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
.positioned {
position: sticky;
top: 30px;
left: 30px;
}
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΈ ΠΎΠ±ΡΠ΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ position: sticky
Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠ½ΡΡ
ΡΡΡΠ°Π½ΠΈΡ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, Π³Π΄Π΅ ΡΠ°Π·Π½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π»ΠΈΠΏΠ½ΡΡ ΠΊ Π²Π΅ΡΡ
Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ Π΅Π³ΠΎ. Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
<h2>Sticky positioning</h2>
<dl>
<dt>A</dt>
<dd>Apple</dd>
<dd>Ant</dd>
<dd>Altimeter</dd>
<dd>Airplane</dd>
<dt>B</dt>
<dd>Bird</dd>
<dd>Buzzard</dd>
<dd>Bee</dd>
<dd>Banana</dd>
<dd>Beanstalk</dd>
<dt>C</dt>
<dd>Calculator</dd>
<dd>Cane</dd>
<dd>Camera</dd>
<dd>Camel</dd>
<dt>D</dt>
<dd>Duck</dd>
<dd>Dime</dd>
<dd>Dipstick</dd>
<dd>Drone</dd>
<dt>E</dt>
<dd>Egg</dd>
<dd>Elephant</dd>
<dd>Egret</dd>
</dl>
CSS ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Π Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <dt>
Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. ΠΠΎΠ³Π΄Π° ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ position: sticky
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <dt>
, Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ top
0, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΊΠ»Π΅ΠΈΠ²Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΊ Π²Π΅ΡΡΠΈΠ½Π΅ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ ΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΡΠ΄Π΅Ρ Π·Π°ΡΠ΅ΠΌ Π·Π°ΠΌΠ΅Π½ΡΡΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΏΡΠΈ Π΅Π³ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π²Π΅ΡΡ
ΠΊ ΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
dt {
background-color: black;
color: white;
padding: 10px;
position: sticky;
top: 0;
left: 0;
margin: 1em 0;
}
ΠΠΈΠΏΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²Π»ΡΡΡΡΡ «Π»ΠΈΠΏΠΊΠΈΠΌΠΈ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ «ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΠΈΠΌΡΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠΌ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°.
ΠΡ Π΄ΠΎΡΡΠΈΠ³Π»ΠΈ ΠΊΠΎΠ½ΡΠ° ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅ Π»ΠΈ Π²Ρ ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ ΡΡΠΎ Π²Ρ ΡΡΠ²ΠΎΠΈΠ»ΠΈ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ, ΠΎΡΠΏΡΠ°Π²ΠΈΡΠ΅ΡΡ Π΄Π°Π»ΡΡΠ΅ β ΡΠΌ. ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΈ Π½Π°Π²ΡΠΊΠΈ: ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π²Ρ ΠΏΠΎΠ²Π΅ΡΠ΅Π»ΠΈΠ»ΠΈΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ; Ρ ΠΎΡΡ ΡΡΠΎ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄Π»Ρ ΡΠ΅Π»ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π²ΡΡ ΠΆΠ΅ ΠΊΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°Π΄Π°Ρ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² — position: relative, absolute, fixed, sticky
ΠΠ°Π²Π΅ΡΠ½ΡΠΊΠ° Π²Ρ ΡΠ»ΡΡΠ°Π»ΠΈ ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ position
, ΠΈ ΡΠΊΠΎΡΠ΅ΠΉ Π²ΡΠ΅Π³ΠΎ, ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ absolute
. ΠΠΎ ΠΏΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³Π»ΠΈ ΡΡΠΎΠ»ΠΊΠ½ΡΡΡΡΡ ΡΠΎ ΡΡΡΠ°Π½Π½ΡΠΌ Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ.
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° position, ΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
position: static / relative / absolute / fixed / sticky
position: static / relative / absolute / fixed / sticky |
ΠΠ»Ρ 4-Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° position (Ρ.Π΅.. Π²ΡΠ΅Ρ , ΠΊΡΠΎΠΌΠ΅ static) ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² left — ΡΠ»Π΅Π²Π° ΠΈ right — ΡΠΏΡΠ°Π²Π° (ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ), Π°Β ΡΠ°ΠΊΠΆΠ΅ top — ΡΠ²Π΅ΡΡ Ρ ΠΈ bottom — ΡΠ½ΠΈΠ·Ρ (ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ):
#some { position: relative; left: 10%; top: 20px; } #temp { position: relative; right: 0; top: 2em; }
#some { Β Β position: relative; Β Β left: 10%; Β Β top: 20px; } Β #temp { Β Β position: relative; Β Β right: 0; Β Β top: 2em; } |
Π’Π°ΠΊΠΆΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΏΠΎΠ·ΠΈΡΠΈΠΉ, ΠΊΡΠΎΠΌΠ΅ static
, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠΈΡΡΠΎΠΉ (0, -1, 10, 999) Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π΅Π΄ΠΈΠ½ΠΈΡ, Ρ. ΠΊ. ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π½Π° ΠΊΠ°ΠΊΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ (ΠΈΠ»ΠΈ ΡΠ»ΠΎΠ΅) Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ (Π²ΡΡΠ΅ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅). Π§Π΅ΠΌ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠΈΡΡΠ°, ΡΠ΅ΠΌ Π½ΠΈΠΆΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ΅Π΄ΠΈ ΡΠ΅Π±Π΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ
(Ρ.Π΅. ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ positionΒ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ relative, absolute, fixed ΠΈΠ»ΠΈ sticky.Β ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ position: static ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index ΠΈΠ»ΠΈ Π»ΡΠ±Π°Ρ ΠΈΠ· ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ (left, right, top, bottom) Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½Ρ.
#card { position: absolute; top: 10px; left: 20px; z-index: 1; }
#card { Β Β position: absolute; Β Β top: 10px; Β Β left: 20px; Β Β z-index: 1; } |
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ position: relative
ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π·Π°Π΄Π°Π½Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ. Π’.Π΅. ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π½Π΅ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠΈΡΠΈΠ½Ρ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ top
ΠΈ left
Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΡΠΈΡΡΡΡ Π²Π½ΠΈΠ· ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ — Π²Π²Π΅ΡΡ
ΠΈ Π²Π»Π΅Π²ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²Π½ΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΎΠ±Π°ΠΊΠΎΠΉ Π½Π° ΡΠ΅ΠΏΠΎΡΠΊΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π° ΠΊ ΠΊΠΎΠ»ΡΡΠΊΡ — Π±Π΅Π³Π°ΡΡ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΡΠΊΠ° ΠΈ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡΠ΅Π΅ Π΄Π»ΠΈΠ½Ρ ΡΠ΅ΠΏΠΈ — Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠΎ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Ρ position: relative
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈ Π·Π°Π΄Π°Π½Π½ΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ
left
ΠΈ top
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π΄Π»Ρ right
ΠΈ bottom
Π½Π΅ ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ — ΡΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΏΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. Π‘Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΎΡΡΠ°Π²Π»ΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Π±ΡΠ» ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡ Π½Π° ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ.
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ position: relative
Π±Π΅Π· Π·Π°Π΄Π°Π½Π½ΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈΠ»ΠΈ Ρ Π½ΡΠ»Π΅Π²ΡΠΌΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΠΈΠ· ΠΎΠ±ΡΠ΅Π³ΠΎ, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ½ΠΈ ΠΊΠ°ΠΊ Π±Ρ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ°ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΡΠ°ΡΡΡ Π² Π³Π»Π°Π·Π°Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΡΠΈΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡΡΡ Π½Π°Π΄ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΠΎΡΠ΅Π΄ΡΠΌΠΈ ΠΈ, ΡΡΠΎ ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, — ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ position: absolute
. ΠΠ± ΡΡΠΎΠΌ ΡΠΈΡΠ°ΠΉΡΠ΅ Π½ΠΈΠΆΠ΅.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ position: absolute
ΠΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΡΠ²ΠΎΠΈΠΌ Π»Π΅Π²ΡΠΌ ΠΊΡΠ°Π΅ΠΌ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π½ΠΎ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ: Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΌΠ°Π»ΠΎ — ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡ, Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΡΡΠ° (ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°) ΠΌΠ½ΠΎΠ³ΠΎ, ΡΠΎ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΡΡΡ, ΠΈ ΠΎΠ½ «Π²ΡΠ»Π΅Π·Π΅Ρ» Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΏΡΠ°Π²Π°.
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π·Π°Π΄Π°Π½Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ, ΠΎΠ½ «ΡΠ±Π΅ΠΆΠΈΡ» ΠΈΠ· ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ body
, Π·Π°Π½ΡΠ² ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π²Π½ΡΡΡΠΈ body
, Π΅ΡΠ»ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΌΠ°Π»ΠΎ (1-2 ΡΠ»ΠΎΠ²Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ), ΡΠΎ Π±Π»ΠΎΠΊ «ΠΏΡΠΈΠΌΠΎΡΡΠΈΡΡΡ» ΡΠ²Π΅ΡΡ
Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π½Π΅ ΠΎΡΡΠ°Π²ΠΈΠ² ΠΈ ΡΠ»Π΅Π΄Π° ΡΠ°ΠΌ, Π³Π΄Π΅ Π±ΡΠ» Π² ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅.
Π§ΡΠΎΠ±Ρ «Π²Π΅ΡΠ½ΡΡΡ Π±Π΅Π³Π»Π΅ΡΠ°» ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π² ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π°Π΄Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ … position: relative
, ΠΏΡΠΈΡΠ΅ΠΌ Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ Π½Π΅Π³ΠΎ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄ΡΡ ΠΎΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΡΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²ΠΈΠ΄ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½Π°Π·Π½Π°ΡΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: absolute
. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Π½ΠΈΠ·Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅Π½ΡΡΠΈΠ» ΡΠ²ΠΎΡ ΡΠΈΡΠΈΠ½Ρ. ΠΡΡΠΎΡΠ° ΠΎΡΡΠ°Π»Π°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π·Π° ΡΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π²ΡΠΎΡΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ°. Π£ΡΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: absolute
Π½ΠΈ ΠΎΠ΄Π½Π° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ° Π½Π΅ Π·Π°Π΄Π°Π½Π°. ΠΠ½ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π½Π°ΡΠ½Π΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π²ΡΠ΅ 4 ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ (left, top, right, bottom
).Β ΠΡΠ»ΠΈ ΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ … ΡΠ°ΡΡΡΠ½Π΅ΡΡΡ. ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ «ΠΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π² 0» ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π° Π·Π°ΠΉΠΌΠ΅Ρ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π²Π½ΡΡΡΠΈ body
ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΡΡΠ°ΡΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠ° «ΠΠ΅ΡΠ½ΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°» ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠ°Π·Π½ΠΈΡΡ Π² ΡΠ°ΡΡΠ΅ΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ. Π ΡΠ°ΠΌΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π΅ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° «Π£Π±ΡΠ°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ», ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π² ΡΠ»ΡΡΠ°Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°ΡΡΡΠΆΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΒ position: absolute
.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ, ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡΠΈΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅. ΠΡΠ°ΡΠ½ΠΎΠΉ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ body
, ΡΠΈΠ½Π΅ΠΉ ΡΠΎΡΠ΅ΡΠ½ΠΎΠΉ — ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ position: fixed
ΠΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ «ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡ» ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Π½Π΅ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π·Π°Π΄Π°Π½Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ «ΠΎΡΠΊΡΠ΅ΠΏΠ»ΡΠ΅ΡΡΡ» ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Ρ.Π΅. Π΄Π»Ρ Π½Π°Ρ ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΒ body
. ΠΠΏΡΡΡ-ΡΠ°ΠΊΠΈ ΠΎΠ½ Π½Π΅ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, Ρ.ΠΊ. Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ
.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠΈΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: fixed
, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ «ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΈΠ½Π΅ΠΌΡ Π±Π»ΠΎΠΊΡ position: fixed». ΠΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π²Ρ Π½Π΅ Π½Π°ΡΠ°Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠ² ΠΈΠ»ΠΈ ΡΠΈΡΡ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΡΠΆΠ°ΡΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π·Π°Π΄Π°Π»ΠΈ Π΄Π²Π΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ, Π±Π»ΠΎΠΊ Π²ΡΡΠ²Π΅ΡΡΡ Π² ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅ Π²Π΅ΡΠ½Π΅ΡΡΡ Π²Π½ΡΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π΄Π°ΠΆΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π°Π·Π½Π°ΡΠΈΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌΡ position: relative
. ΠΡΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΏΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΠΈΠΆΠ΅.
ΠΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ: ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ Π²ΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, Π΅ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π½Π΅ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΡΠ°ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ
body
, ΡΠΈΠ½ΡΡ — ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΎΡΠ΅ΡΡΠΈΡΡΠΉΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ position: absolute ΠΈ fixed
ΡΡ
ΠΎΠ΄ΡΡ ΠΏΠΎΠ΄ ΡΠ°ΠΌΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°), ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ
ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ΅Π·ΠΆΠ°ΡΡΠΈΡ
ΠΌΠ΅Π½Ρ, ΡΠΎΡΠΌ, Π±Π°Π½Π½Π΅ΡΠΎΠ² ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²Π²Π΅ΡΡ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΡΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π΅ Π½ΡΠΆΠ½Ρ.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
position: absolute
ΠΈ position:fixed
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ codepen.io Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ header
+ Π·Π°Π΄Π°Π½ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² css-ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΠΆΠ΅ header
. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ h2
ΠΈΠΌΠ΅Π΅Ρ position:fixed
. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠΎΠ½Π° ΠΏΠΎΠ²Π΅ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄Π°Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΡΠΊΡΡΡΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ «ΠΏΠΎΠ΄ ΠΎΠ±Π»Π°ΠΊΠ°ΠΌΠΈ» Π½Π°ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΉ png-ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
See the Pen Fixed Disappearing Scrolling Header by Dudley Storey (@dudleystorey) on CodePen.dark
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ position: sticky
Π’Π°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½ΡΠΆΠ½Ρ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡΡΡΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΠΈ ΡΠΎΠΉ ΠΆΠ΅ ΡΡΠ°ΡΡΠΈ. ΠΠ½ΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ° Π΄ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠΌ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, Π·Π°ΡΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΊΠ°Π·Π°Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ top
, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ, «ΠΏΡΠΈΠ»ΠΈΠΏΠ°ΡΡ» ΠΊ ΠΊΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ Π½Π΅ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ ΡΡΠΎ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π°Π²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΈ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ²:
#sticky{ position: -webkit-sticky; position: sticky; top: 10px; }
#sticky{ Β Β position: -webkit-sticky; Β Β position: sticky; Β Β top: 10px; } |
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ ΡΠ°ΠΉΠ», ΡΠ°Π·Π±ΠΈΡΡΠΉ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΠΈΠΉ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊΒ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΈΠΏΠ° «Section 1» «ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π΅Ρ» ΠΊ Π²Π΅ΡΡ
Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ ΠΈΠ·-Π·Π° Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠ³ΠΎ Π΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top: 0
. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠΌΠ΅Π½ΡΠ΅Ρ Section 2, «ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π΅Ρ» ΡΠΆΠ΅ ΡΡΠΎΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
ΠΠΎΠ΄ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π·Π΄Π΅ΡΡ ΡΠ°ΠΊΠΎΠ²:
h3 { background-color: #fff; color: #ff9300; margin: 0; padding: 10px 0; position: -webkit-sticky; position: sticky; top: 0; }
h3 { Β Β Β Β background-color: #fff; Β Β Β Β color: #ff9300; Β Β Β Β margin: 0; Β Β Β Β padding: 10px 0; Β Β Β Β position: -webkit-sticky; Β Β Β Β position: sticky; Β Β Β Β top: 0; } |
Π€ΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½ΡΠΆΠ΅Π½, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡ Π»ΡΡΡΠ΅ ΡΠΈΡΠ°Π»ΡΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΠ½ Π±Π΅Π»ΡΠΉ ΠΈ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΡΠ²Π΅ΡΠΎΠΌ ΡΠΎΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ» ΡΠ±ΡΠ°ΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ (margin: 0
) ΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π½ΠΈΡ
Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ (padding: 10px 0
), ΡΡΠΎΠ±Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°Π» Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position: sticky
Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π΄Π»ΠΈΠ½Π½ΡΡ
ΡΡΠ°ΡΠ΅ΠΉ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ
Π½Π° ΡΠ°ΡΡΠΈ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠΊΠ° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΈΠ·-Π·Π° Π½Π΅ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅ caniuse.com.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
ΠΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° ΠΌΡ Π½Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, Ρ.ΠΊ. Ρ Π½Π°Ρ Π±ΡΠ» ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΠ΅ΡΡΠΎΠ²ΡΡ
ΡΠ°ΠΉΠ»Π°Ρ
. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΡΠΈΡΡΠ°ΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΡΡΠΎ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅.Β Π’ΠΎΠ³Π΄Π° ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π² Π΄Π²ΡΠΌΠ΅ΡΠ½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅, Ρ.Π΅.Β ΠΏΠΎ ΠΎΡΡΠΌ X ΠΈ Y, ΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠΎ ΠΎΡΠΈ Z, ΠΏΠ΅ΡΠΏΠ΅Π½Π΄ΠΈΠΊΡΠ»ΡΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠΊΠΎΡΡΠΈ ΡΠΊΡΠ°Π½Π°. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΡ
ΡΠ°ΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊ Π½ΠΈΠΆΠ΅, ΡΠ°ΠΊ ΠΈ Π²ΡΡΠ΅ Π΄ΡΡΠ³ΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ z-index
. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index
Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠΈΡΡΠΎΠΉ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ 0, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (position: relative | absolute | fixed
) ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position ΠΈΠ· ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ. ΠΡΠΈ ΡΠ²Π½ΠΎΠΌ ΡΠΊΠ°Π·Π°Π½ΠΈΠΈ z-index
Π² Π²ΠΈΠ΄Π΅ ΡΠΈΡΠ»Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΡΡΠ΅ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΊΠ°ΡΡΡ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
Π·Π°Π΄Π°Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ left
ΠΈ top
ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π»ΠΈΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΠΈ css-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΠΊΠΎΠ²Ρ:
<style> img { display: block; position: absolute; cursor: pointer; } #ten { left: 70px; top: -20px; } #jack { left: 50px; top: 30px; } #queen { left: 80px; top: 60px; } #king { left: 130px; top: 30px; } #ace { left: 110px; } </style> <img src=»img/diamonds_10. gif» alt=»10 of diamonds»> <img src=»img/diamonds_jack.gif» alt=»Jack of diamonds»> <img src=»img/diamonds_queen.gif» alt=»Queen of diamonds»> <img src=»img/diamonds_king.gif» alt=»King of diamonds»> <img src=»img/diamonds_ace.gif» alt=»Ace of diamonds»>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <style> img { Β Β Β Β Β Β Β Β display: block; Β Β Β Β Β Β Β Β position: absolute; Β Β Β Β Β Β Β Β cursor: pointer; Β Β Β Β } Β Β Β Β Β #ten { Β Β Β Β Β Β Β Β left: 70px; Β Β Β Β Β Β Β Β top: -20px; Β Β Β Β } Β Β Β Β Β #jack { Β Β Β Β Β Β Β Β left: 50px; Β Β Β Β Β Β Β Β top: 30px; Β Β Β Β } Β Β Β Β Β #queen { Β Β Β Β Β Β Β Β left: 80px; Β Β Β Β Β Β Β Β top: 60px; Β Β Β Β } Β Β Β Β Β #king { Β Β Β Β Β Β Β Β left: 130px; Β Β Β Β Β Β Β Β top: 30px; Β Β Β Β } Β Β Β Β Β #ace { Β Β Β Β Β Β Β Β left: 110px; Β Β Β Β } </style> <img src=»img/diamonds_10. gif» alt=»10 of diamonds»> Β <img src=»img/diamonds_jack.gif» alt=»Jack of diamonds»> Β <img src=»img/diamonds_queen.gif» alt=»Queen of diamonds»> Β <img src=»img/diamonds_king.gif» alt=»King of diamonds»> <img src=»img/diamonds_ace.gif» alt=»Ace of diamonds»> |
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΠΊΠ°ΡΡΡ ΠΈΠΌΠ΅ΡΡ z-index: auto
ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² html-ΠΊΠΎΠ΄Π΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π»ΡΠ±ΠΎΠΉ ΠΊΠ°ΡΡΠ΅ (ΠΎΠ½Π° ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ΅Ρ ΠΊΡΠ°ΡΠ½ΡΡ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ) ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΠΈΠ»ΠΈ ΡΠΈΡΡ Π² ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»Π΅.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ z-index
Π·Π°ΠΊΡΡΠ²Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ — Π²Ρ ΡΠΆΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ Π½Π°Π·Π½Π°ΡΠΈΡΡ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Π±Ρ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ»ΠΈ ΡΡΡΠ»ΠΊΠΈ, Π²Ρ Π±Ρ Π½Π΅ ΡΠΌΠΎΠ³Π»ΠΈ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½ΠΈΠΌ. ΠΠΎΡΡΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index
Π½ΡΠΆΠ½ΠΎ Ρ ΠΎΡΡΠΎΡΠΎΠΆΠ½ΠΎΡΡΡΡ. ΠΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ ΠΊΠ»ΠΈΠΊΠΎΠΌ Π½Π° ΡΠ΅ΠΊΡΡΠ΅ «Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΊΠ°ΡΡ», ΡΡΠΎΠ±Ρ Π²Π΅ΡΠ½ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ (stacking context)
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ z-index
Π²ΡΠΎΠ΄Π΅ Π±Ρ Π½Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ°Π³Π°Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΠ±ΡΡΠ½ΠΎ ΠΈΡ
ΠΈ Π½Π΅ Π±ΡΠ²Π°Π΅Ρ. ΠΠ΄Π½Π°ΠΊΠΎ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ Π΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ Π½ΡΠ°Π½Ρ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ Ρ ΡΠ΅ΡΠΌΠΈΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ (stacking context). ΠΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΡΠ΅Ρ
ΠΌΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ html-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΄ΠΎΠ»Ρ ΠΎΡΠΈ Z, ΠΏΠ΅ΡΠΏΠ΅Π½Π΄ΠΈΠΊΡΠ»ΡΡΠ½ΠΎΠΉ ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π½Π°Ρ
ΠΎΠ΄ΡΡΠ΅ΠΌΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΊΡΠ°Π½ΠΎΠΌ. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΌΠ΅ΡΡΠΎ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ, Π½ΠΎ Π΅ΡΡΡ ΡΡΠ΄ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΠΎΡΠΈ Z.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π»ΡΠ±ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ:
- ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΡΠ½Π΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (
html
), - ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ (
position:absolute
)Β ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΒ (position:relative
) Ρz-index
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ"auto"
, ΠΈΠ»ΠΈ ΠΈΠΌΠ΅Π΅Ρposition: fixed
- flex-ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Ρ z-index
ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ Β"auto"
, ΡΠ΅ΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒdisplay: flex|inline-flex
, - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Β
opacity
ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΠΌΒ 1. (Π‘ΠΌ.Β the specification for opacity), - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Β
transform
ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ «none», - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
mix-blend-mode
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ «normal», - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
filter
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ «none», - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
isolation
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π² Β «isolate», - Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°ΡΡΠΈΠ±ΡΡΒ Β
will-change
Β ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡ Π΅ΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΒ (Π‘ΠΌ.Β ΡΡΡ ΡΡΠ°ΡΡΡ) - ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ
-webkit-overflow-scrolling
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΡΠΌ Π²Β «touch»
Π ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ z-index
, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΈ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ², ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΠΏΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ Ρ Π½ΠΈΡ
Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ (position: relative
) ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ (position: absolute
) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΠΊΠΎΠ²Π°:
<div>div#1 with position:relative <br> z-index: 5 </div> <div>div#2 with position: absolute <br> z-index: auto <div>div#4 with position: relative; <br>z-index: 6</div> <div>div#5 with position: absolute; <br>z-index: 3</div> <div>div#6 with position: relative; <br>z-index: 2</div> <div>div#7 with position: relative; <br>z-index: -1</div> </div> <div>div#3 with position:relative <br> z-index: 2 </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div>div#1 with position:relative Β Β Β Β <br> z-index: 5 </div> <div>div#2 with position: absolute Β Β Β Β <br> z-index: auto Β Β Β Β <div>div#4 with position: relative; Β Β Β Β Β Β Β Β <br>z-index: 6</div> Β Β Β Β <div>div#5 with position: absolute; Β Β Β Β Β Β Β Β <br>z-index: 3</div> Β Β Β Β <div>div#6 with position: relative; Β Β Β Β Β Β Β Β <br>z-index: 2</div> Β Β Β Β <div>div#7 with position: relative; Β Β Β Β Β Β Β Β <br>z-index: -1</div> </div> <div>div#3 with position:relative Β Β Β Β <br> z-index: 2 </div> |
ΠΠ°ΠΆΠ΄ΠΎΠΌΡ div-Ρ Π² ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ Π·Π°Π΄Π°Π½ z-index
. Π’Π΅ΡΡΠΎΠ²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ Π½Π°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ div#2
, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ z-index
ΠΠ Π·Π°Π΄Π°Π½, Ρ.Π΅. ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ΅Π»ΡΡΠΉ div#4 Ρ z-index:6
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π²Π½ΡΡΡΠΈΒ div#2
ΠΊΠ°ΠΊ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ΅ΠΉΡΠ°Ρ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ Π½Π° Π·Π΅Π»Π΅Π½ΡΠΉ div#1 Ρ z-index:5
, Ρ.ΠΊ. Π΅Π³ΠΎ ΡΠΈΡΡΠ° 6 ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΠΎΡΠΈ Z ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΠΈΡΡΠΎΠΉ 5. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎΠΈΡ Π·Π°Π΄Π°ΡΡ div#2
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index: 1 ΠΈΠ»ΠΈ 2
— ΠΈ Π΅Π³ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΡΡΡΡΡΡ ΠΏΠΎΠ΄ Π·Π΅Π»Π΅Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, Ρ.ΠΊ. ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΉΡΠ°Ρ ΡΡΠΈΡΡΠ²Π°Π΅Ρ z-index
ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΡΠ΄Ρ Ρ Π΅Π³ΠΎ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ — ΡΡΠΎ div#1 ΠΈ div#3
.
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ div#2
— ΡΡΠΎ Π·Π°Π΄Π°ΡΡ ΡΡΠΎΠΌΡ div-Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ opacity < 1
ΠΏΡΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index: auto
.Β Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ opacity
ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ Π΄ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ 0.7
, ΡΡΠΎΠ±Ρ ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ΅ΡΠΊΠΎ Π²ΠΈΠ΄Π½ΠΎ, Ρ
ΠΎΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΈ 0. 99
, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΠΈ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ 1
.
ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index
Π΄Π»Ρ div#2
ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡ Π΅Π³ΠΎ Π²ΡΡΠ΅ ΠΈΠ»ΠΈ ΠΎΠΏΡΡΠΊΠ°ΡΡ Π½ΠΈΠΆΠ΅ Π·Π΅Π»Π΅Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ², Π½ΠΎ Π²ΡΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠΈ Z ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, Π½ΠΎ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Π‘ΡΡΠ»ΠΊΠ° ΠΏΠΎ ΡΠ΅ΠΌΠ΅ Π½Π° developer.mozilla.org
ΠΡΠΎΡΠΌΠΎΡΡΠΎΠ²: 1Β 344
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² CSS | w3.org.ua
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- static
- relative
- fixed
- absolute
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
- top β ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ
- left β ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°
- right β ΠΎΡΡΡΠΏ ΡΠΏΡΠ°Π²Π°
- bottom β ΠΎΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ
ΠΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, left, right, bottom Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΏΠΎΠΊΠ° ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° left ΠΈ right ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ, ΡΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ left. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΡΠΈ top ΠΈ bottom, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ Π΄ΡΡΠ³ Π΄ΡΡΠ³Ρ, ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ top.
position: static
HTML ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΊΠ°ΠΊ static ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π’.Π΅. ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ²ΠΎΠ΄ΡΡΡΡ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ β ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π·Π°ΠΏΠΈΡΠ°Π½Ρ Π² ΠΊΠΎΠ΄Π΅ HTML. ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΊΠ°ΠΊ static.
position: relative
ΠΡΠ»ΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: relative, ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. ΠΠΎΡΠ»Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right, bottom, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ°Π½Π½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
position: fixed
ΠΡΠ»ΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: fixed, ΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position: fixed ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠ°, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΠ²Π΅ΡΡ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
position: absolute
ΠΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ Π»ΡΠ±ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position, Π»ΠΈΠ±ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Ρ, ΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΡΠ»ΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position: absolute, ΡΠΎ ΠΎΠ½ΠΎ ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float.
ΠΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ z-index
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΈΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΏΠΈΡΠ°Π½Ρ Π² ΠΊΠΎΠ΄Π΅ HTML. Π’Π°ΠΊ, ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ΄Π΅ HTML, Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π΅ HTML Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS z-index. Π’Π°ΠΊ, Π΅ΡΠ»ΠΈ ΠΊ Π΄Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ z-index, ΡΠΎ ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ z-index Π±ΠΎΠ»ΡΡΠ΅, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΡΠ»ΠΎ, Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΠ½ΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΠΊΡΠ°Π½Π° ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊ ΠΎΡΡΠ°Π²Π°Π»ΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin: 0 auto. ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π·Π΄Π΅ΡΡ.
5 ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² CSS
Π Π½Π°ΡΠΈ Π΄Π½ΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΡΡΡΠΎΠΈΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠ°ΡΠΊΠ»Π°Π΄ΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ CSS. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΠΈΡ ΡΠ΅Ρ Π½ΠΈΠΊ ΠΈΠΌΠ΅ΡΡ Π΄Π»ΠΈΠ½Π½ΡΡ ΠΈΡΡΠΎΡΠΈΡ (ΡΠ»ΠΎΠ°ΡΡ), Π΄ΡΡΠ³ΠΈΠ΅ (ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ) Π΄ΠΎΡΡΠΈΠ³Π»ΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π³ΠΎΠ΄Ρ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ°Π»ΠΎΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠ°ΡΠ°ΡΡΠΈΠ΅ΡΡ CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π½Π°ΡΠ°ΡΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΊΡΠ°ΡΠΊΠΎ Π²ΡΠΏΠΎΠΌΠ½ΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ±Π·ΠΎΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS position
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΏΡΠΈΠΈ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
static
ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡ ΡΠΎΠΎΠ±ΡΠ°Π΅ΠΌ, ΡΡΠΎ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ β ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°ΡΡ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΡ Π΄Π΅ΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°Π΄ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Ρ position
Π·Π°Π΄Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
relative
absolute
fixed
sticky
Π ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ Π·Π°Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΠΌΠ΅ΡΠ°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ:
top
right
bottom
left
- ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² β ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ
auto
.
ΠΠ°Π΄ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ absolute
ΠΈΠ»ΠΈ fixed
, ΡΠΎ ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. Π’Π°ΠΊΠΆΠ΅ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ΅Π΅ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π Π°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π’Π΅ΠΏΠ΅ΡΡ Π±ΡΡΡΡΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
- Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ (
absolute
) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ°, ΠΈΡ ΠΌΠ΅ΡΡΠΎ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠ΅ ΡΠΎΡΠ΅Π΄ΠΈ. - ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ (
relative
) ΠΈ ΠΏΡΠΈΠΊΠ»Π΅Π΅Π½Π½ΡΠ΅ (sticky
) ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² ΠΏΠΎΡΠΎΠΊΠ΅ ΠΈ ΠΈΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠ΅ ΡΠΎΡΠ΅Π΄ΠΈ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π΅Π³ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΡΡΡΡΠΏΡ ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»Π΅ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². - ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ (
fixed
) ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΅ΡΡΡ ΡΠ°Π·Π½ΠΎΠ²ΠΈΠ΄Π½ΠΎΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ) Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·ΠΎΠ½Ρ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ (ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΏΡΠ΅Π΄ΠΊΠΎΠ²), Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΏΡΠΈΠΊΠ»Π΅Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° ΡΠΎ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³ΠΎΠΌ (overflow:auto
). Π ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ ΡΠ°ΠΊΠΈΡ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΠΎΠ½ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·ΠΎΠ½Ρ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π² Π΄Π΅ΠΌΠΎ:
See the Pen Overview of the available positioning types by George (@georgemarts) on CodePen.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ βΠΏΡΠΈΠΊΠ»Π΅Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²β Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΏΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π», ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Π² Π±ΡΠ°ΡΠ·Π΅Ρ, Π½ΠΎ Ρ ΡΡΠ΅ΡΠΎΠΌ ΠΌΠ°Π»ΠΎΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΡΡΠΈ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² ΡΡΠ°ΡΡΠ΅ ΠΎΠ±ΡΡΠΆΠ΄Π°ΡΡΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΡΠΈΠΏΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π·Π½Π°Π΅Ρ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π² Π½Π΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΡΠΌΡΡΠΈΡΡ.
ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΠ΅ΡΠΈΠ» Π½Π°ΡΠ°ΡΡ Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ ΠΌΠ°Π»ΠΎΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠ°ΠΊ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π΅ΡΠ»ΠΈ Ρ ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² position
ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ static
β Π΅ΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Ρ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΡΠ΅Π΄ΠΊΠΎΠ², ΠΎΠ½ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·ΠΎΠ½Ρ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΡΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ:
See the Pen Little-known thing #1 — Positioning elements with absolute positioning type by George (@georgemarts) on CodePen.
Π ΡΡΠΎΠΌ Π΄Π΅ΠΌΠΎ Π·Π΅Π»Π΅Π½ΡΠΉ Π±Π»ΠΎΠΊ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Ρ Π½ΡΠ»Π΅Π²ΡΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ bottom:0
ΠΈ left:0
, Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΡ (ΠΊΡΠ°ΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π΄Π°Π²Π°Π»ΠΎΡΡ Π²ΠΎΠΎΠ±ΡΠ΅.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π»ΠΈ Π²Π½Π΅ΡΠ½ΡΡ ΠΎΠ±Π΅ΡΡΠΊΡ (ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ jumbotron
). ΠΡΠΌΠ΅ΡΡΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π΅Π»Π΅Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠΎΠ².
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
float
ΠΡΠ»ΠΈ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ float
ΠΏΠΎΠ»ΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ none
. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌ.
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ Π΄Π΅ΠΌΠΎ:
See the Pen Little-known thing #2 — The absolutely positioned elements ignore the «float» property by George (@georgemarts) on CodePen.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ
Π²ΠΏΡΠ°Π²ΠΎ. ΠΡΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΠΊΡΠ°ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΠΎΠ½ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float
, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π΅Π»Π΅Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ float
.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ
Π‘ΡΡΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΊΠΎΠ½Π²Π΅ΡΡΠ°ΡΠΈΡ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅.
Π Π²ΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
See the Pen Little-known thing #3 — The inline elements which are absolutely positioned behave as block-level elements by George (@georgemarts) on CodePen.
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΅ΡΠ²ΡΠΉ (Π·Π΅Π»Π΅Π½ΡΠΉ Π±Π»ΠΎΠΊ) ΡΡΠΎ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π° Π²ΡΠΎΡΠΎΠΉ (ΠΊΡΠ°ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ) β ΡΡΡΠΎΡΠ½ΡΠΉ. ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π²ΠΈΠ΄Π΅Π½ ΡΠΎΠ»ΡΠΊΠΎ Π·Π΅Π»Π΅Π½ΡΠΉ Π±Π»ΠΎΠΊ.
ΠΡΠ°ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ Π½Π΅ Π²ΠΈΠ΄Π΅Π½ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π·Π°Π΄Π°Π½Π½ΡΠ΅ Π΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° width
ΠΈ height
ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΠΈ ΡΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΌ Π½Π΅Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Ρ Π½Π΅Π³ΠΎ Π½Π΅Ρ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
ΠΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΠΊΡΠ°ΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΠ½ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ ΠΈ Π·Π°Π΄Π°Π½Π½ΡΠ΅ Π² Π½Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° Π½Π°ΡΠΈΠ½Π°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ.
Π£ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅Ρ ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ²
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π΄Π²Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π²Π½Π΅ΡΠ½ΠΈΡ ΠΎΡΡΡΡΠΏΠ° ΡΠΎΠΏΡΠΈΠΊΠ°ΡΠ°ΡΡΡΡ, ΠΎΠ½ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Π² ΠΎΠ΄ΠΈΠ½, ΡΠ°Π²Π½ΡΠΉ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ . ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΠ΅ Π²Π½Π΅ΡΠ½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ².
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π·Π΄Π΅ΡΡ ΡΡ ΠΎΠΆΠ΅ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ β ΠΈΡ ΠΎΡΡΡΡΠΏΡ Π½Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
See the Pen Little-known thing #4 — The margins donβt collapse on absolutely positioned elements by George (@georgemarts) on CodePen.
Π ΡΡΠΎΠΌ Π΄Π΅ΠΌΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°Π΄Π°Π½ ΠΎΡΡΡΡΠΏ Π² 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ³ΠΎ ΠΎΡΡΡΡΠΏ ΠΊΠΎΠ»Π»Π°ΠΏΡΠΈΡΡΠ΅Ρ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π²Π½ΠΎΠ³ΠΎ 20 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ. ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΡ Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ.
ΠΠΎ ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ²? ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ.
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ (padding
) ΠΈΠ»ΠΈ Π³ΡΠ°Π½ΠΈΡΠ° (border
), ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΊ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ, ΡΠ°ΠΊ ΠΈ ΠΊ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΡΠ³ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»ΠΈΡΡΠΈΠΊΡ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌΠΈ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π»ΠΈ Π²Ρ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²? ΠΡΠ»ΠΈ ΠΎΡΠ²Π΅Ρ Π΄Π°, ΡΠΎ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΡΡΠΈΡΠ»Π΅Π½ΠΈΡ (ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ²).
ΠΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΌΡΡΠ°Π΅Ρ, ΠΏΡΠ°Π²Π΄Π°? ΠΡΠ°ΠΊ, ΡΠ½Π°ΡΠ°Π»Π° ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Π³ΠΎΠ²ΠΎΡΠΈΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠ± ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ :
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ (Π΄Π»Ρ
left
ΠΈright
) ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ (top
ΠΈΠ»ΠΈbottom
) ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΠΏΡΠΈΠΊΠ»Π΅Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ (Π΄Π»Ρleft
ΠΈright
) ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ (top
ΠΈΠ»ΠΈbottom
) ΠΏΠΎΡΠΎΠΊΠ°. ΠΠΎΠΏΡΡΡΠΈΠΌΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ°ΠΊ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΠΏΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΠ΅ΠΌΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΡ ΡΠ°Π·Π½ΠΈΡΡ:
See the Pen Little-known thing #5 — The difference between positioning elements with pixels and percentages by George (@georgemarts) on CodePen.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΡ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΏΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΡΡΠ΄Π°, ΠΊΡΠ΄Π° Π½Π°Π΄ΠΎ.
Π Π΅ΡΠ»ΠΈ ΠΌΡ Π²ΡΠ±Π΅ΡΠ΅ΠΌ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ°Ρ, ΠΊΠ°ΠΊ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΊΠ°ΠΊ Π²Ρ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, Π·Π½Π°Π΅ΡΠ΅, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform
(Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ translate
) ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΡΠ°ΡΡΠ΅Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° Π½Π΅ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π²Π°ΠΌ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS ΠΈ ΡΠ°Π·ΡΡΡΠ½ΠΈΠ»Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ.
html — ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² HTML Π² Tailwind css
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ·Π½Π°ΡΡ tailwind-css
, ΠΈΠ»ΠΈ Ρ Π±Ρ ΡΠΊΠ°Π·Π°Π», ΠΈΠ·ΡΡΠ°Ρ css
, Π³Π΄Π΅ Ρ Π±ΠΎΡΡΡΡ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π Π°Π±ΠΎΡΠ°Π΅Ρ Ρ Vue js
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ.
ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
Π― Ρ
ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΠ³ΡΡ ΠΈΠ»ΠΈ ΡΠΈΡΡΠ½ΠΊΠΎΠ² Π² ΠΎΠ±Π»Π°ΡΡΡ banner/dark-blue
, Π° Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ°. ΠΠΎΠΉ ΠΊΠΎΠ΄ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ:
<div>
<nav-bar></nav-bar>
<div>
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div>
<img src="/nits-assets/images/body_shape_2. png" alt="shape" align="right">
</div>
<div>
<div>
<slider></slider>
<div>
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
<div>
<div>
<div>
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
</div>
<feature></feature>
</div>
ΠΠ»Ρ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²: https://github.com/nitish2986/sample_website
ΠΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΠΎΡΡΠΎΡΠ» Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ, Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠΈΠ³ΡΡΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½ΠΎ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Ρ ΠΏΡΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΠΈΠ³ΡΡΡ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠΎ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
<div>
<div>
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ? Π― Ρ ΠΎΡΡ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ΅Π³ΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
ΠΡΠ±ΠΎΠΉ Π»ΡΡΡΠΈΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΡΠΎΠΌΡ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ.
3
Nitish Kumar 1 ΠΠ°Ρ 2020 Π² 07:56
2 ΠΎΡΠ²Π΅ΡΠ°
ΠΡΡΡΠΈΠΉ ΠΎΡΠ²Π΅Ρ
Π― ΠΏΡΠΎΠ²Π΅Π» Π±ΠΎΠ»ΡΡΡΡ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΡΡ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅, Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ», ΡΡΠΎ ΠΌΠΎΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΠΌΠ΅Π½Ρ. Π― ΡΠ·Π½Π°Π», ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ div, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠΎΠΈΠΌΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π² ΠΌΠΎΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ Ρ ΠΌΠ΅Π½Ρ ΠΎΡΠ΅Π½Ρ Π΄Π»ΠΈΠ½Π½ΡΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ Π²Π°ΡΠΈΡΡ — ΡΡΠΎ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ div
<div>
<nav-bar></nav-bar>
<div>
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div>
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div>
<div>
<div>
<slider></slider>
<div>
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
</div>
<div>
<div></div>
</div>
<feature></feature>
<preview></preview>
<about-us></about-us>
</div>
Π’Π°ΠΊ ΡΡΠΎ Π² ΠΌΠΎΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ Ρ ΠΎΡΡΠ°Π²ΠΈΠ» ΠΏΡΡΡΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Ρ:
<div>
<div></div>
</div>
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΊΠΎΠΌΡ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ
0
olegoriginal 9 ΠΠ°Ρ 2020 Π² 20:12
ΠΠ»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° ΡΠ΅ΡΠΊΠΈ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΠΈΠ±ΠΊΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Tailwind CSS. ΠΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π² ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ: https://tailwindcss.com/docs/flex/
Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ .flex-1, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π³ΠΈΠ±ΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΡΠΈ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ.
-1
Mario Boss 4 ΠΠ°Ρ 2020 Π² 19:27
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠΎΠΊΠ°Ρ ΠΌΡ Ρ Π²Π°ΠΌΠΈ ΡΠ±Π΅Π΄ΠΈΠ»ΠΈΡΡ, ΡΡΠΎ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π° ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎ, ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π΅Π» ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
<div>ΠΠ»ΠΎΠΊ 1 Β Β Β <div>ΠΠ»ΠΎΠΊ 2 Β Β Β Β Β Β Β <div>ΠΠ»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ</div> Β Β Β </div> </div>
ΠΠΎΠ»ΡΡΠ΅ ΠΌΠΎΠΈΡ ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎ HTML, CSS ΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ² Π·Π΄Π΅ΡΡ.
ΠΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π»ΠΎΡΡ, ΡΡΠΎΡ Π±Π»ΠΎΠΊ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π»Π΅Π²ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ ΡΠ³ΠΎΠ» ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ «ΠΠ»ΠΎΠΊ 2»?
Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠ΅. ΠΠ»Ρ Π±Π»ΠΎΠΊΠ°, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position:relative.
ΠΡ ΡΠΆΠ΅ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ position:relative, Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊ Π½Π΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ² left, right, top ΠΈΠ»ΠΈ bottom Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΡΠΎ ΡΠ΅ΠΉΡΠ°Ρ ΠΈ ΡΠ΄Π΅Π»Π°Π΅ΠΌ.
<div>ΠΠ»ΠΎΠΊ 1 Β Β Β <div>ΠΠ»ΠΎΠΊ 2 Β Β Β Β Β Β Β <div>ΠΠ»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ</div> Β Β Β </div> </div>
ΠΡΠ΅. ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ΅ΡΠ΅Π½Π°. Π’Π΅ΠΏΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position:absolte ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ «ΠΠ»ΠΎΠΊ 2».
ΠΠ°ΠΊΠΈΠ΅ Π²ΡΠ²ΠΎΠ΄Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ?
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ Π»ΠΈΠ±ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π»ΠΈΠ±ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠΏΠ°Π²ΡΠ΅Π³ΠΎΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position:relative;
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠ°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π²Π΅ΡΡΡΠΊΠΈ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π½ΡΠΆΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
Π Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ Π·Π°Π΄Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π² %, ΠΏΡΠΎΡΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π±ΡΠ°ΡΡΡΡ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position:relative;
<div>ΠΠ»ΠΎΠΊ 1 <div>ΠΠ»ΠΎΠΊ 2 <div>ΠΠ»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ</div> </div> </div>
ΠΠΎΠ»ΡΡΠ΅ ΠΌΠΎΠΈΡ ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎ HTML, CSS ΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ² Π·Π΄Π΅ΡΡ.
CSS position: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
CSS- ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ: static, relative, absolute, fixed, sticky, initial ΠΈ inherit. Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΡΡΠΈ ΡΠΈΠΏΡ:
- Staticβ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
- Relativeβ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
- Absoluteβ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
- Fixedβ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
- Stickyβ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ Π΄Π²ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position β relative ΠΈ absolute.
ΠΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ (top, bottom, right, left), Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ. ΠΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ left: 20px, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅ΠΉ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. Π’ΠΎ Π΅ΡΡΡ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π±Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ. ΠΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ Π·Π°ΡΡΠΎΠ½ΡΡΡ.
position: relative; ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΎΠ±Π»Π°ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’ΠΎ Π΅ΡΡΡ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π΅Π³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠ². ΠΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ ΠΈ Π²Π²Π΅ΡΡ ΠΎΡ ΡΠ²ΠΎΠ΅ΠΉ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. ΠΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π΅ Π±ΡΠ» ΠΈΠ·ΠΌΠ΅Π½Π΅Π½.
<div>First element</div> <div>Second element</div>
#first_element { position: relative; left: 30px; top: 70px; width: 500px; background-color: #fafafa; border: solid 3px #ff7347; font-size: 24px; text-align: center; } #second_element { position: relative; width: 500px; background-color: #fafafa; border: solid 3px #ff7347; font-size: 24px; text-align: center; }
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Ρ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML (ΡΠ°ΠΌΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅).
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ absolute, Π»ΡΠ±ΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΏΡΠ°Π²Π΅Π΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
<div id=βparentβ> <div id=βchildβ></div> </div>
#parent { position: relative; width: 500px; height: 400px; background-color: #fafafa; border: solid 3px #9e70ba; font-size: 24px; text-align: center; } #child { position: absolute; right: 40px; top: 100px; width: 200px; height: 200px; background-color: #fafafa; border: solid 3px #78e382; font-size: 24px; text-align: center; }
Π ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΠΌΡ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠ°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π² Π±ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ .
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡΠ°ΡΡΠΈ Β«CSS Position Relative vs Position AbsoluteΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
Positioning — ΠΠ·ΡΡΠΈΡΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ
Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ; Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΈΠ΄Π΅ΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π΅ ΠΈΠ»ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΡΡΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΈ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΡ Π±Ρ Ρ
ΠΎΡΠ΅Π»ΠΈ, ΡΡΠΎΠ±Ρ Π²Ρ Π²ΡΠΏΠΎΠ»Π½ΡΠ»ΠΈ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ — Π²ΠΎΠ·ΡΠΌΠΈΡΠ΅ ΠΊΠΎΠΏΠΈΡ 0_basic-flow.html
ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ GitHub (ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π·Π΄Π΅ΡΡ) ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
ΠΡΡ ΠΈΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΠΌ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅, Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². Π§ΡΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π²Π½ΡΡΡΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΠΎΠ΅, Π½Π΅ΠΏΡΠΈΡΡΠ½ΠΎΠ΅ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅? ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — Π²Π°Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ. ΠΠ»ΠΈ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ»Π°Π²Π°Π΅Ρ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ°ΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ / ΠΈΠ»ΠΈ Π²ΡΠ΅Π³Π΄Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°? ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π΅Π»Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌΠΈ ΡΠ°ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ½ΡΠ΅ ΡΠ°Π±ΠΎΡΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠ΄ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ HTML. Π§ΡΠΎΠ±Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΅Π³ΠΎ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° — Π·Π΄Π΅ΡΡ Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎΒ».
Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ Π±ΡΠ΄ΡΡΠΈΡ
ΡΠ°Π·Π΄Π΅Π»ΠΎΠ², ΡΠ½Π°ΡΠ°Π»Π° Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ
ΠΈΠ· Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
ΠΊΠΎ Π²ΡΠΎΡΠΎΠΌΡ
Π² HTML:
...
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ Π²Π°ΡΠ΅Π³ΠΎ CSS:
. positioned {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
ΡΠΎΠ½: ΠΆΠ΅Π»ΡΡΠΉ;
}
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡΠ°Π·Π½ΠΈΡΡ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° 2-Π³ΠΎ Π°Π±Π·Π°ΡΠ°. ΠΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ — ΠΊΠ°ΠΊ ΠΌΡ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ!
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°Π½ΡΠ» ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π» Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ
Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠ΄Π΅:
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅, Π²Ρ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅. ΠΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°? ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
ΠΈ ΠΏΡΠ°Π²ΡΠΉ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅.
ΠΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π²Π΅ΡΡ Π½ΠΈΠΉ, Π½ΠΈΠΆΠ½ΠΈΠΉ, Π»Π΅Π²ΡΠΉ ΠΈ ΠΏΡΠ°Π²ΡΠΉ
Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
ΠΈ ΠΏΡΠ°Π²ΡΠΉ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ
, ΡΡΠΎΠ±Ρ ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΡΠ΄Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»Ρ .positioned
Π² Π²Π°ΡΠ΅ΠΌ CSS:
Π²Π΅ΡΡ
: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π»ΡΠ±ΡΠ΅ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ — ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, ΠΌΠΌ, Π±ΡΡ,% ΠΈ Ρ. Π.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΡΡΠΎ, Π°? Π₯ΠΎΡΠΎΡΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π½Π΅ ΡΠΎ, ΡΡΠΎ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ — ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π²Π½ΠΈΠ· ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ Π²Π΅ΡΡ
Π½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅? ΠΠΎΠ½Π°ΡΠ°Π»Ρ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ, Π½ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Π±Π΅ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΡ ΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ»ΠΊΠ°Π΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ Π΅Π³ΠΎ Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅ top: 30px;
, ΡΠΈΠ»Π° ΡΠΎΠ»ΠΊΠ°Π΅Ρ Π²Π΅ΡΡ
Π½ΡΡ ΡΠ°ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, Π·Π°ΡΡΠ°Π²Π»ΡΡ Π΅Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π½Π° 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ. ΠΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅Ρ — ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈ ΡΡΠ΅ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΊΡΡΠ»ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π΅Π³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅Ρ! Π ΠΊΠ°ΠΊΠΎΠΌ-ΡΠΎ ΡΠΌΡΡΠ»Π΅ ΡΡΠΎ ΠΏΡΠ°Π²Π΄Π°.ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌ ΡΠ»ΠΎΠ΅, ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ: ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΌΠ΅ΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΎΠΊΠ½Π° ΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ; ΠΎΠΏΡΠΎΠΊΠΈΠ΄ΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ; Π€ΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°ΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ; ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅ . ..
ΠΠΎ-Π²ΡΠΎΡΡΡ
, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ — ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
ΠΈ ΠΏΡΠ°Π²ΡΠΉ
Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΡΡΠΎΡΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ°ΠΊ, Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ
Π° Β«ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Β» ΠΈ Π½Π° 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π°. (Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ «ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ» — ΡΡΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ . ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠΌ. Π ΡΠ°Π·Π΄Π΅Π»Π΅ Π½ΠΈΠΆΠ΅)
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
ΠΈ ΠΏΡΠ°Π²ΡΠΉ
Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ top: 0; Π²Π½ΠΈΠ·Ρ: 0; ΡΠ»Π΅Π²Π°: 0; ΡΠΏΡΠ°Π²Π°: 0;
ΠΈ ΠΌΠ°ΡΠΆΠ°: 0;
Π½Π° Π²Π°ΡΠΈΡ
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΠΈ ββΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ! ΠΠΎΡΠΎΠΌ ΡΠ½ΠΎΠ²Π° Π²Π΅ΡΠ½ΠΈ . ..
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ : ΠΠ°, ΠΏΠΎΠ»Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΠΆΠΈ — Π½Π΅Ρ.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Β«ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌΒ» Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°? ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠΌ. ΠΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°).
ΠΡΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ-ΠΏΡΠ΅Π΄ΠΊΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΡΠ²Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ-ΠΏΡΠ΅Π΄ΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ . ΠΠ°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΎΠΊΠΎΠΌ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½ Π²
Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ HTML, Π½ΠΎ Π² ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ — ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° — Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ Π²Π»ΠΎΠΆΠ΅Π½ (Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ Π½Π΅ Π²Π»ΠΎΠΆΠ΅Π½).Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Π² Π²Π°ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ body
:
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² z-index
ΠΡΠ΅ ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — Ρ ΠΎΡΠΎΡΠ΅Π΅ ΡΠ°Π·Π²Π»Π΅ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½Π° Π²Π΅ΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ Π΅ΡΠ΅ Π½Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ — ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΠΊΠ°ΠΊΠΈΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²? Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²Π²Π΅ΡΡ Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π½Π΅ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π Π΅ΡΠ»ΠΈ Ρ Π½Π°Ρ ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ?
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π² ΡΠ²ΠΎΠΉ CSS, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ Π°Π±Π·Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ:
p: nth-of-type (1) {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠΎΠ½: ΡΠ°Π»Π°ΡΠΎΠ²ΡΠΉ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΠΏΡΠ°Π²ΠΎ: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ Π°Π±Π·Π°Ρ ΠΎΠΊΡΠ°ΡΠ΅Π½ Π² ΡΠ°Π»Π°ΡΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ, ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΠΏΠΎΠ΄ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ . Π Π°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌ Π°Π±Π·Π°ΡΠ΅ΠΌ
, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ.ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ . ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π°Π±Π·Π°Ρ
ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠΎΡΡΠΌ Π°Π±Π·Π°ΡΠ΅ΠΌ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠ·ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ°Π½Π΅Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅.
ΠΠΎΠΆΠ½ΠΎ Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠΊΠ»Π°Π΄ΠΊΠΈ? ΠΠ°, ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
. Β«z-indexΒ» — ΡΡΠΎ ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΎΡΡ z. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ
ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΊΡΡΡΠ°, Π³Π΄Π΅ ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
(ΠΎΡΡ x) ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
(ΠΎΡΡ y) ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ
Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ°Π΄Π°ΡΡΠΈΡ
ΡΠ΅Π½Π΅ΠΉ. (0,0) Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ (ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°), Π° ΠΎΡΠΈ x ΠΈ y ΠΏΡΠΎΡ
ΠΎΠ΄ΡΡ Π²ΠΏΡΠ°Π²ΠΎ ΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ (Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄Π»Ρ ΡΠ·ΡΠΊΠΎΠ² ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ).
ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΎΡΡ Z: Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠ°Ρ Π»ΠΈΠ½ΠΈΡ, ΠΈΠ΄ΡΡΠ°Ρ ΠΎΡ ΠΏΠΎΠ²Π΅ΡΡ
Π½ΠΎΡΡΠΈ ΡΠΊΡΠ°Π½Π° ΠΊ Π²Π°ΡΠ΅ΠΌΡ Π»ΠΈΡΡ (ΠΈΠ»ΠΈ ΠΊ ΡΠ΅ΠΌΡ-ΡΠΎ Π΅ΡΠ΅, ΡΡΠΎ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΊΡΠ°Π½ΠΎΠΌ). z-index
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΠΎΠΉ ΠΎΡΠΈ; ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΡ
Π²ΡΡΠ΅ ΠΏΠΎ ΡΡΠ΅ΠΊΡ, Π° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΈΡ
Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΡΡΠ΅ΠΊΡ.ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ z-index
ΠΈΠ· auto
, ΡΡΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°Π²Π½ΠΎ 0.
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠ°Π²ΠΈΠ»Ρ p: nth-of-type (1)
:
z-index: 1;
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Ρ Π°Π±Π·Π°ΡΠ΅ΠΌ ΠΈΠ· Π»Π°ΠΉΠΌΠ° Π²Π²Π΅ΡΡ Ρ:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ z-index
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π±Π΅Π·ΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ½Π΄Π΅ΠΊΡΠ°; Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» Π½Π° 23 ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²Π²Π΅ΡΡ
ΠΏΠΎ ΠΎΡΠΈ Z — ΡΡΠΎ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ Π²ΡΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΈ Π²Π°ΠΌ ΡΠ΅ΡΠ°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ 2 ΠΈ 3 Π΄Π°ΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ, ΡΡΠΎ ΠΈ 300 ΠΈ 40000.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΎΡΠ»ΠΈΡΠΈΠ΅ΠΌ: ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΌΠ΅ΡΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° (Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅Ρ), ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΌΠ΅ΡΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ none.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΠΊΡΠΈΡΡΡΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΅Π³Π΄Π° Π²ΠΈΠ΄Π½Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ±Π΅ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π² Π²ΠΈΠ΄Ρ. ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, ΡΠ΄Π°Π»ΠΈΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° p: nth-of-type (1)
ΠΈ .positioned
ΠΈΠ· Π²Π°ΡΠ΅Π³ΠΎ CSS.
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ body
, ΡΡΠΎΠ±Ρ ΡΠ΄Π°Π»ΠΈΡΡ position: relative;
ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΊΡΠ·ΠΎΠ² {
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 1400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
}
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π΄Π°Π΄ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
position: fixed;
ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΡΠ²ΠΎΠΉ CSS ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ:
h2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 0;
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
margin-top: 0;
ΡΠΎΠ½: Π±Π΅Π»ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ° Π²Π΅ΡΡΠΈΠ½Π΅ : 0;
ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΎΡΡΠ°Π²Π°Π»ΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°. ΠΡ Π·Π°Π΄Π°Π΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΡΡ ΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΠΈ ΡΡΠΎΠ»Π±Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π° Π·Π°ΡΠ΅ΠΌ Π΄Π°Π΅ΠΌ Π΅ΠΌΡ Π±Π΅Π»ΡΠΉ ΡΠΎΠ½, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈ ΠΏΠΎΠ»Ρ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ Π±ΡΠ»ΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΏΠΎΠ΄ Π½ΠΈΠΌ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ΅ΠΉΡΠ°Ρ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π·Π°Π±Π°Π²Π½ΡΠΉ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ, Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²Π²Π΅ΡΡ ΠΈ ΠΈΡΡΠ΅Π·Π½ΡΡΡ ΠΏΠΎΠ΄ Π½ΠΈΠΌ.ΠΠΎ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠ»ΡΡΡΠΈΡΡ ΡΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ — Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π²Π΅ΡΡ . ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΄Π²ΠΈΠ½ΡΡΡ Π²ΡΠ΅ ΡΡΠΎ Π²Π½ΠΈΠ·; ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π²Π΅ΡΡ Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎ ΡΠ΅ΠΉΡΠ°Ρ:
p: nth-of-type (1) {
ΠΌΠ°ΡΠΆΠ° ΡΠ²Π΅ΡΡ
Ρ: 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠΎΡΡΡΠΏΠ½ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ : Π»ΠΈΠΏΠΊΠΎΠ΅
, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²Π΅Π΅ Π΄ΡΡΠ³ΠΈΡ
.ΠΠΎ ΡΡΡΠΈ, ΡΡΠΎ Π³ΠΈΠ±ΡΠΈΠ΄ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΎΠ½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ
Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°), ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ ΡΡΠ°Π½Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ Π΄ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
.positioned {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠΏΠΊΠΎΠ΅;
Π²Π΅ΡΡ
: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΈ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ : sticky
— ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ½Π΄Π΅ΠΊΡΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, Π³Π΄Π΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡΡΡ ΠΊ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π΅Π΅ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ.Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- Π
- Apple
- ΠΡΡΠ°Π²Π΅ΠΉ
- ΠΡΡΠΎΡΠΎΠΌΠ΅Ρ
- Π‘Π°ΠΌΠΎΠ»Π΅Ρ
- Π
- ΠΡΠΈΡΠ°
- ΠΠ°Π½ΡΠΊ
- ΠΡΠ΅Π»Π°
- ΠΠ°Π½Π°Π½
- ΠΠΎΠ±ΠΎΠ²ΡΠΉ ΡΡΠ΅Π±Π΅Π»Ρ
- C
- ΠΠ°Π»ΡΠΊΡΠ»ΡΡΠΎΡ
- Π’ΡΠΎΡΡΡ
- ΠΠ°ΠΌΠ΅ΡΠ°
- ΠΠ΅ΡΠ±Π»ΡΠ΄
- D
- Π£ΡΠΊΠ°
- ΠΠ°ΠΉΠΌ
- Π©ΡΠΏ
- ΠΡΠΎΠ½
- E
- Π―ΠΉΡΠΎ
- Π‘Π»ΠΎΠ½
- Π¦Π°ΠΏΠ»Ρ
CSS ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. Π Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. ΠΠΎΠ³Π΄Π° ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ position: sticky
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ top
, ΡΠ°Π²Π½ΡΠΌ 0, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΊ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΌΠ΅Π½ΡΡΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎ ΡΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
dt {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΡΠ΅ΡΠ½ΡΠΉ;
ΡΠ²Π΅Ρ Π±Π΅Π»ΡΠΉ;
ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠΏΠΊΠΎΠ΅;
Π²Π΅ΡΡ
: 0;
ΡΠ»Π΅Π²Π°: 0;
ΠΌΠ°ΡΠΆΠ°: 1em 0;
}
ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²Π»ΡΡΡΡΡ Β«Π»ΠΈΠΏΠΊΠΈΠΌΠΈΒ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ Β«ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΒ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠΎΠ².
ΠΡ Π΄ΠΎΡΠ»ΠΈ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡΡ ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΠ»ΠΈ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅ — ΡΠΌ. ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ²ΠΎΠΈΡ Π½Π°Π²ΡΠΊΠΎΠ²: ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ ΠΈΠ³ΡΠ°ΡΡ Ρ Π±Π°Π·ΠΎΠ²ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ; Ρ ΠΎΡΡ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π½Π΅Π»ΡΠ·Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π»ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², Π½ΠΎ, ΠΊΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΎΠ½ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ Π·Π°Π΄Π°Ρ.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ CSS Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° (Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΊΠΎΠ΄Π°)
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ CSS Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ΄Π½ΡΠΌ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ.Π ΡΠ΅ΠΌ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈ Π»ΠΈΠΏΠΊΠΈΠΌ? ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΡΡΡΡΠΎ Π·Π°ΠΏΡΡΠ°ΡΡΡΡ.
Π ΠΏΠΎΠΌΠΎΡΡ, ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΡΠΎΠ²Π΅Π΄Π΅Ρ Π²Π°Ρ ΡΠ΅ΡΠ΅Π· Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ CSS. Π Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ²Π΅ΡΡΠΈ ΠΌΠ°ΠΊΠ΅ΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π΄ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ!
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅ ΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΈ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π΅ΡΡΠΈΡ YouTube Π½Π° ΠΌΠΎΠ΅ΠΌ ΠΊΠ°Π½Π°Π»Π΅!Π§ΡΠΎ Π΄Π΅Π»Π°Π΅Ρ CSS-ΠΏΠΎΠ·ΠΈΡΠΈΡ?
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΠ°ΠΌΠΎΠΌ Π²Π΅ΡΡ Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π½Π° 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½ΠΈΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ.
Π§ΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS position
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ: Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
ΠΈ z-index
. (ΠΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠΎΠ·ΠΆΠ΅.)
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: static
, relative
, absolute
, fixed
, and sticky
.
ΠΠ²ΡΡΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ Π½Π΅ Π²ΠΎΠ»Π½ΡΠΉΡΠ΅ΡΡ!
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ CSS position
:
1. Static
Position: static
— ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΎΠ±ΡΡΠ²ΠΈΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² CSS, Π΄Π»Ρ Π½Π΅Π³ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
.
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΈΠΌΠ΅ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ — ΡΡΠΎ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
.(ΠΡΠΎ Π²ΠΎΠΉΠ΄Π΅Ρ Π² ΠΈΠ³ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.)
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΠ²ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΎΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, ΠΈΠ»Π»ΡΡΡΡΠΈΡΡΡΡΠ°Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ HTML:
Π Π²ΠΎΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ:
.ΠΏΠ΅ΡΠ²ΡΠΉ {
// ΠΠΎΠ·ΠΈΡΠΈΡ Π½Π΅ Π·Π°Π΄Π°Π½Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½Π° ΡΡΠ°ΡΠΈΡΠ½Π°
}
.ΠΡΡΠ³ΠΎΠΉ {
// ΠΠΎΠ·ΠΈΡΠΈΡ Π½Π΅ Π·Π°Π΄Π°Π½Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½Π° ΡΡΠ°ΡΠΈΡΠ½Π°
Π²Π΅ΡΡ
: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top
, ΡΠ°Π²Π½ΠΎΠ΅ 50px
. ΠΡ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΡΠΌΠ΅ΡΡΠΈΡ Π΅Π³ΠΎ Π½Π° 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ?
ΠΠ΄Π½Π°ΠΊΠΎ Π²ΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅:
ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π² Codepen ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ±Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² CSS ΠΌΠ°ΠΊΠ΅ΡΠ° Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΡΠ΄Π΅Π»Π°Π΅Ρ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top
Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ΄ ΠΏΠ΅ΡΠ²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π±Π΅Π· ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
ΠΠ°ΠΊ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ? ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ:
2. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
ΠΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ
Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΊΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ
ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π·Π±Π»ΠΎΠΊΠΈΡΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠ°ΠΊΠ΅ΡΠ° CSS.
ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΡΠ°ΠΊ: Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ, ΠΈ Π½Π°ΡΡΡΠΎΠΈΠΌ Π½Π°Ρ CSS ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
.first {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
}
.ΠΡΡΠ³ΠΎΠΉ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ
: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠ΅ CSS ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ position: relative
. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ top: 50px
!
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π° 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½ΠΈΠΆΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌ Π² Π½Π΅Π³ΠΎ. ΠΠ±Π° ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ
.
ΠΠΎΡ HTML Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ:
Π Π½Π°ΡΠΈ ΡΡΠΈΠ»ΠΈ CSS:
.parent {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.ΡΠ΅Π±Π΅Π½ΠΎΠΊ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ
: 0px;
ΡΠ»Π΅Π²Π°: 0px;
}
Π Π²ΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° CodepenΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΡΠΎΠ·ΠΎΠ²ΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½ Π²Π½ΡΡΡΠΈ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±Π»ΠΈΠΆΠ΅ ΠΊ Π²Π΅ΡΡ Ρ ΠΈ ΡΠ»Π΅Π²Π° Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. (ΠΠ½ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ΅ΡΡΡ Π΄ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°)
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΡΠΌΠΎΠ»ΠΈΠ½Π΅ΠΉΠ½ΠΎ, Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ? Π§ΡΠΎ ΠΆ, Π΄Π΅ΡΠΆΠΈΡΠ΅ΡΡ Π·Π° ΡΠ²ΠΎΠΈ ΡΠ»ΡΠΏΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ
Π²ΠΎΡ-Π²ΠΎΡ ΡΠΎΠΉΠ΄Π΅Ρ Ρ ΡΠΌΠ°.
3. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π°Π»Π΅Π½ ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΡΠΎ Π·Π½Π°ΡΠΈΡ?
ΠΡΠ°ΠΊ, ΡΠ°Π½ΡΡΠ΅ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΈΠΌ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ HTML.ΠΠΎ ΠΏΡΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΡΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΈΠ· Π²ΡΠ΅Π³ΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΡΡΠ½ΠΈΡΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ²Π΅Π΄Π΅ΠΌ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π½Π°Ρ Π±ΡΠ» ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΎΠ±Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ. Π Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» Π²Π»ΠΎΠΆΠ΅Π½ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΡΠΎΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ!
ΠΠ°Ρ CSS ΡΠ΅ΠΏΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
.parent {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.ΡΠ΅Π±Π΅Π½ΠΎΠΊ {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0px;
ΡΠ»Π΅Π²Π°: 0px;
}
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° CodepenΠ ΠΎΠ·ΠΎΠ²ΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°.
Π₯ΠΎΡΡ ΠΎΠ½ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² ΡΠ°ΠΌΠΎΠΌ Π²Π΅ΡΡ Ρ ΠΈ ΠΎΡΠ΅Π½Ρ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½ Π΄Π°ΠΆΠ΅ ΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ!
ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΡΠΈΠ»ΡΠΌΠΈ top: 0px
ΠΈ left: 0px
Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.Π ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π²Π΅ΡΠ΅ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΈ Π½Π΅ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΠΈΡ
).
ΠΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ, ΠΎΠ½, ΠΏΠΎ ΡΡΡΠΈ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅, ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² Π³ΡΠ°Π½ΠΈΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° - ΠΏΠΎΠΊΠ° Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ. ΠΡΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΡ Π½Π°Ρ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΠΏΡΠ½ΠΊΡΡ.
ΠΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΠΎΠΆΠ½ΡΠΉ Π°ΡΠΏΠ΅ΠΊΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌβ¦
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°.
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ position: absolute
, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΊΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ-ΠΏΡΠ΅Π΄ΠΎΠΊ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½Π° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΅Π±Π΅Π½ΠΎΠΊ Π·Π½Π°Π», ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΅Π±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ.
ΠΡΠ°ΠΊ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, Π° Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΡ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π°?
ΠΠΎΡ Π½Π°Ρ CSS Π΄Π»Ρ ΡΡΠΎΠΉ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ:
.parent {
// ΠΠΎΠ·ΠΈΡΠΈΡ Π½Π΅ Π·Π°Π΄Π°Π½Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½Π° ΡΡΠ°ΡΠΈΡΠ½Π°
}
.ΡΠ΅Π±Π΅Π½ΠΎΠΊ {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0px;
ΡΠ»Π΅Π²Π°: 0px;
}
Π Π²ΠΎΡ ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠ°Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° Codepen Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΡΠ΅Π» Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π·Π°Π΄Π°Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ. Π Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΡΠ΅Π» ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ (Π³Π»Π°Π²Π½ΠΎΠΌΡ) ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
(ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΡΡΡΡΠ½Π°Ρ ΠΌΠ΅ΡΠ°ΡΠΎΡΠ° ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΎΡ Β«ΠΎΡΠΈΡΠΎΡΠ΅Π²ΡΠΈΠΉΒ» ΡΠ΅Π±Π΅Π½ΠΎΠΊ ΠΈΡΠ΅Ρ Π½Π° Π΄Π΅ΡΠ΅Π²Π΅ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΠΊΠΎΠ³ΠΎ-ΡΠΎ, ΠΊΡΠΎ ΡΡΠ°Π½Π΅Ρ Π΅Π³ΠΎ Β«ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΌΒ». β)
ΠΡΠΎ ΠΎΠ³ΡΠΎΠΌΠ½Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π° Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ Π² CSS Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π²ΡΠ΅Π³Π΄Π° Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π½Π° , ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
(Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π²), Π²Ρ ΠΈΠ·Π±Π΅ΠΆΠΈΡΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²Π°ΡΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π·Π»Π΅ΡΠ°Π»ΠΈ Π²Π²Π΅ΡΡ
ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΠΊΡΠΎ Π·Π½Π°Π΅Ρ Π³Π΄Π΅?
ΠΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΡΠΌΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅:
ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ position: absolute
ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠ²Π΅Π΄Π΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.Π ΡΡΠΎΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½Π° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ.
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ
, Π² Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅ ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
. ΠΠΎ ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²ΡΠ·Π°Π½Ρ Ρ Π²Π°ΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ:
4. Fixed
Position: fixed
Π²ΡΠ²Π΅Π΄Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡ Π΅Π³ΠΎ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΡΡΠΎ Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅).ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π² ΠΊΠΎΠ΄Π΅. ΠΠΎΡ Π½Π°Ρ HTML-ΠΊΠΎΠ΄:
Lorem ipsum dolor sit amet, conctetur adipiscing elit ....
Π Π² Π½Π°ΡΠ΅ΠΌ CSS ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π²ΡΠΎΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ position: fixed
:
.first {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.ΠΡΡΠ³ΠΎΠΉ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 0px;
ΡΠ»Π΅Π²Π°: 0px;
}
Π Π²ΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ:
Π‘ΠΌ. ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° CodepenΠΠ΅Π»Π΅Π½ΡΠΉ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ ΠΈ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.Π Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅, ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π²Π²Π΅ΡΡ , Π½ΠΎ Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π° ΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ ΠΌΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ.
ΠΠ°ΠΊΠΎΠ½Π΅ΡΠ½ΠΈΠΊ : ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Π²Π΅ΡΡ Π½Π΅Π΅
ΠΈΠ»ΠΈΠ½ΠΈΠΆΠ½Π΅Π΅
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΅Π³ΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡΡΡ ΠΊ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΎΡΠ΅Π»Ρ!
ΠΠ°Π»Π΅Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ.
5. Sticky
Position: sticky
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ΄ΡΡ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ position: relative
elements, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΠΎΠ½ΠΈ Π²ΡΠΉΠ΄ΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ Π±ΡΠ΄ΡΡ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ position: fixed
, Π³Π΄Π΅ Π±Ρ Π²Ρ Π½ΠΈ Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ» ΠΈΡ
.
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π² Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΡΠΊΡΠ°Π½Π°.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠΎΠ΄Π° Ρ Π½Π°Ρ Π΅ΡΡΡ Π·Π΅Π»Π΅Π½ΡΠΉ Π»ΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°.(Π’Π΅ΠΌ Π»ΡΡΡΠ΅ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ!)
Lorem ipsum dolor sit amet, conctetur adipiscing elit ....
Lorem ipsum dolor sit amet, conctetur adipiscing elit ....
Π CSS Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
.first {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.ΠΡΡΠ³ΠΎΠΉ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠΏΠΊΠΎΠ΅;
Π²Π΅ΡΡ
: 0px;
}
Π Π²ΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅!
Π‘ΠΌ. ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° CodepenΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Ρ ΠΎΠ΄ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΎΠ½ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.ΠΠΎ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠ½Π° ΡΡΠ°Π½Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠ°ΠΊ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π»ΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ Π² CSS. ΠΡΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡΠ°Π½Π΅Ρ Π»ΠΈΠΏΠΊΠΈΠΌ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ:
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ : Π»ΠΈΠΏΠΊΠ°Ρ
Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΏΠΎ Π²ΡΠ΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌ.ΠΠΎΠ²ΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ IE Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²Π°ΠΆΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Π½Π°Π΄ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE 11. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ΅ΠΊΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π½Π° CanIUse.com
Π Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ Π²Ρ Π½Π°ΡΠ»ΠΈ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ! ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ ΠΎΡΠ·ΡΠ²Ρ, Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½ΠΈΠΆΠ΅?
ΠΡΡΠ³ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ:
Π₯ΠΎΡΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅?Π‘ΠΎΠ·Π΄Π°Ρ ΠΊΡΡΡ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ! ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ Π·Π΄Π΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½.
Π― ΠΏΠΈΡΡ ΡΡΠΎΠΊΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π² ΡΠ²ΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅ coder-coder.com, ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΠΌΠΈΠ½ΠΈ-ΡΠΎΠ²Π΅ΡΡ Π² Instagram ΠΈ ΡΡΠΎΠΊΠΈ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° YouTube.
CSS | ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² - GeeksforGeeks
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position Π² CSS ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ° HTML. Π CSS Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
- Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
- ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
- ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π΅ΡΡ Ρ , ΡΠΏΡΠ°Π²Π° , Π²Π½ΠΈΠ·Ρ ΠΈ ΡΠ»Π΅Π²Π° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ.ΠΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΡ ΡΠ΅ΡΡΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ², ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±ΡΡΠ²ΠΈΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΡΡΠΈΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
1. FixedΠΡΠ±ΠΎΠΉ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position: fixed Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΅ΠΌΡ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²Π΅ΡΡ Π½ΡΡ, ΠΏΡΠ°Π²ΡΡ, Π½ΠΈΠΆΠ½ΡΡ, Π»Π΅Π²ΡΡ.
|
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
// css
ΠΊΠΎΠ΄
ΠΊΠΎΡΠΏΡΡ
{
ΠΌΠ°ΡΠΆΠ°
:
0
;
ΠΎΡΡΡΡΠΏ
:
20px
;
font-family
:
sans-serif
;
ΡΠΎΠ½
:
#efefef
;
}
.
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
{
ΠΏΠΎΠ·ΠΈΡΠΈΡ
:
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
;
ΡΠΎΠ½
:
# cc0000
;
ΡΠ²Π΅Ρ
:
#ffffff
;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
:
30px
;
Π²Π΅ΡΡ
Π½ΡΡ
:
50
;
ΡΠ»Π΅Π²Π°
:
10
;
}
ΠΏΡΠΎΠ»Π΅Ρ
{
Π½Π°Π±ΠΈΠ²ΠΊΠ°
:
5px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
#ffffff
ΠΏΡΠ½ΠΊΡΠΈΡΠ½Π°Ρ
;
}
ΠΡΡ
ΠΎΠ΄ :
ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΌΡ Π½Π΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ : static . ΠΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ Static Π²Π΅ΡΡ Π½ΡΡ, ΠΏΡΠ°Π²Π°Ρ, Π½ΠΈΠΆΠ½ΡΡ ΠΈ Π»Π΅Π²Π°Ρ ΡΡΠΎΡΠΎΠ½Ρ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ.
|
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°
// css
ΠΊΠΎΠ΄
ΠΊΠΎΡΠΏΡΡ
{
ΠΌΠ°ΡΠΆΠ°
:
0
;
ΠΎΡΡΡΡΠΏ
:
20px
;
font-family
:
sans-serif
;
ΡΠΎΠ½
:
#efefef
;
}
.
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
{
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
:
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
;
ΡΠΎΠ½
:
# cc0000
;
ΡΠ²Π΅Ρ
:
#ffffff
;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
:
30px
;
}
ΠΏΡΠΎΠ»Π΅Ρ
{
Π½Π°Π±ΠΈΠ²ΠΊΠ°
:
5px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
#ffffff
ΠΏΡΠ½ΠΊΡΠΈΡΠ½Π°Ρ
;
}
ΠΡΡ
ΠΎΠ΄ :
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π½Π° Π΅Π³ΠΎ Π²Π΅ΡΡΠΈΠ½Π΅. ΠΡΠ»ΠΈ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π΅Π³ΠΎ Π²Π΅ΡΡ Π½ΠΈΠΉ, ΠΏΡΠ°Π²ΡΠΉ, Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈΠ»ΠΈ Π»Π΅Π²ΡΠΉ ΡΠ³ΠΎΠ», Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΠΏΡΠΎΠ±Π΅Π», ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.
|
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΠ΄ CSS 64 Π΄Π»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ
2. // css
ΠΊΠΎΠ΄
ΠΊΠΎΡΠΏΡΡ
{
ΠΌΠ°ΡΠΆΠ°
:
0
;
ΠΎΡΡΡΡΠΏ
:
20px
;
font-family
:
sans-serif
;
ΡΠΎΠ½
:
#efefef
;
}
.
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
{
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
:
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
;
ΡΠΎΠ½
:
# cc0000
;
ΡΠ²Π΅Ρ
:
#ffffff
;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
:
30px
;
}
ΠΏΡΠΎΠ»Π΅Ρ
{
Π½Π°Π±ΠΈΠ²ΠΊΠ°
:
5px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
#ffffff
ΠΏΡΠ½ΠΊΡΠΈΡΠ½Π°Ρ
;
}
ΠΡΡ
ΠΎΠ΄ :
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π΅Π³ΠΎ Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΡ ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.
div > |
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΠ΄ CSS64 Π΄Π»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°
9066: // css
ΠΊΠΎΠ΄
ΠΊΠΎΡΠΏΡΡ
{
ΠΌΠ°ΡΠΆΠ°
:
0
;
ΠΎΡΡΡΡΠΏ
:
20px
;
font-family
:
sans-serif
;
ΡΠΎΠ½
:
#efefef
;
}
.
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
{
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
:
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
;
ΡΠΎΠ½
:
# cc0000
;
ΡΠ²Π΅Ρ
:
#ffffff
;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
:
30px
;
font-size
:
15px
;
ΡΠ½ΠΈΠ·Ρ
:
20px
;
ΡΠΏΡΠ°Π²Π°
:
20px
;
}
.
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
{
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
:
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
;
ΡΠΎΠ½
:
# aad000
;
Π²ΡΡΠΎΡΠ°
:
300px
;
font-size
:
30px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
ΡΠΏΠ»ΠΎΡΠ½Π°Ρ
# 121212
;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°
:
ΡΠ΅Π½ΡΡ
;
}
ΠΏΡΠΎΠ»Π΅Ρ
{
Π½Π°Π±ΠΈΠ²ΠΊΠ°
:
5px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
#ffffff
ΠΏΡΠ½ΠΊΡΠΈΡΠ½Π°Ρ
;
}
Π΄ΠΎ
{
Π½Π°Π±ΠΈΠ²ΠΊΠ°
:
20px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
ΡΠΏΠ»ΠΎΡΠ½Π°Ρ
# 000000
;
}
ΠΡΡ
ΠΎΠ΄ :
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : Π»ΠΈΠΏΠΊΠΈΠΉ ΠΈ Π²Π΅ΡΡ Π½ΠΈΠΉ : 0 ΠΈΠ³ΡΠ°Π» ΡΠΎΠ»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½. ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Π»ΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΊΠΎΡΠ½Π΅ΡΡΡ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ. ΠΠΎΠ³Π΄Π° ΠΎΠ½ ΠΊΠΎΡΠ½Π΅ΡΡΡ Π²Π΅ΡΡ Π°, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ Π½Π° ΡΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° Π΄Π°Π»ΡΠ½Π΅ΠΉΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ·Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ bottom .
|
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΠ΄ CSS
657905
0 Π΄Π»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° sticky: // css
ΠΊΠΎΠ΄
ΠΊΠΎΡΠΏΡΡ
{
ΠΌΠ°ΡΠΆΠ°
:
0
;
ΠΎΡΡΡΡΠΏ
:
20px
;
font-family
:
sans-serif
;
ΡΠΎΠ½
:
#efefef
;
}
.Π»ΠΈΠΏΠΊΠ°Ρ
{
ΠΏΠΎΠ·ΠΈΡΠΈΡ
: Π»ΠΈΠΏΠΊΠ°Ρ;
ΡΠΎΠ½
:
# cc0000
;
ΡΠ²Π΅Ρ
:
#ffffff
;
Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
:
30px
;
Π²Π΅ΡΡ
Π½ΡΡ
:
10px
;
ΡΠΏΡΠ°Π²Π°
:
50px
;
}
ΠΏΡΠΎΠ»Π΅Ρ
{
Π½Π°Π±ΠΈΠ²ΠΊΠ°
:
5px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
#ffffff
ΠΏΡΠ½ΠΊΡΠΈΡΠ½Π°Ρ
;
}
Π΄ΠΎ
{
Π½Π°Π±ΠΈΠ²ΠΊΠ°
:
20px
;
Π³ΡΠ°Π½ΠΈΡΠ°
:
1px
ΡΠΏΠ»ΠΎΡΠ½Π°Ρ
# 000000
;
}
ΠΡΡ
ΠΎΠ΄
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ CSS | Π¨ΠΊΠΎΠ»Π° ΠΊΠΎΠ΄ΠΎΠ² Π²ΠΈΠΊΠΈΠ½Π³ΠΎΠ²
ΠΠΎΠΌΠ½ΠΈΡΠ΅ ΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π°, ΠΊΠΎΠ³Π΄Π° MySpace Π±ΡΠ» ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΡΡΡ, ΠΈ Π²ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS Π²ΡΠΏΠΎΠ»Π½ΡΠ»ΠΎΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±Π»ΠΈΡ? Π ΠΎΠ±Π΅ ΡΡΠΎΡΠΎΠ½Ρ Π²Π²Π΅ΡΡ ΠΏΠΎ Ρ ΠΎΠ»ΠΌΡ? Π 10 ΡΡΡΠ°Ρ ΡΠ½Π΅Π³Π°? Π‘ Π±Π΅Π· ΠΎΠ±ΡΠ²ΠΈ !
ΠΠ΅Ρ? Π₯ΠΎΡΠΎΡΠΎ! ΠΠ΅Π³ΡΠ΅ Π·Π°Π±ΡΡΡ ΡΠΎ, ΡΠ΅ΠΌΡ Π²Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡΠΈΠ»ΠΈΡΡ (ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ).ΠΠ΄Π΅ΠΌ Π΄Π°Π»ΡΡΠ΅ ...
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ°Ρ ΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ ΠΎΡΠΈΡΠ°ΡΡ. ΠΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΏΡΠΎΡΠΈΡΠ°Π΅ΡΠ΅ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΡΠ΅ ΠΎΠ± ΡΡΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΡ . Π ΠΊΠΎΠ½ΡΡ ΡΡΠΎΠ³ΠΎ ΡΡΠΎΠΊΠ° Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΠ»ΠΆΠ½ΠΎΡΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π½ΡΡΠ½Π΅ΠΌ!
CSS ΠΠΎΠΏΠ»Π°Π²ΠΊΠΈ
Π’Π°ΠΊ ΡΡΠΎ ΠΆΠ΅ ΡΠ°ΠΊΠΎΠ΅ CSS Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ? ΠΠ΅ΡΠ΅ΡΡΠ°Π·ΠΈΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ MDN:
CSS-ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΈΡΡΠ»Π΅Π΄ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«Π²Π½Π΅ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Β», Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΡΠΈΠΏΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, - Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ
. ΠΠ΅Π³ΠΊΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ, Π΄Π°? ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° float
:
-
ΡΠ»Π΅Π²Π°
: ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π²Π° -
Π²ΠΏΡΠ°Π²ΠΎ
: ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΏΡΠ°Π²ΠΎ -
Π½Π΅Ρ
: ΡΠ΄Π°Π»ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ
ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡΠ°Π²ΠΎ
ΠΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ.ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° float
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ left
ΠΈΠ»ΠΈ right
. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
.left {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
}
.Π²Π΅ΡΠ½ΠΎ {
float: right;
}
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .left
ΡΠ»Π΅Π²Π° ΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ .right
ΡΠΏΡΠ°Π²Π°. ΠΡΠΎ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΏΡΠΎΡΡΡΠΌ ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Ρ
ΠΎΡΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ ΠΏΡΠ°Π²Π΄ΠΎΠΉ, Π²Π΅ΡΠ½ΠΎ? ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Ρ
ΠΎΡΠΎΡΠΎ, ΡΡΠΎΠ±Ρ Π±ΡΡΡ ΠΏΡΠ°Π²Π΄ΠΎΠΉ. ΠΡΠΈΡΠΈΠ½Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Β«Π²Π½Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°Β», ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΈ ΡΠ°Π½Π΅Π΅.ΠΡΠΎ ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΡ Π½Π°Ρ ΠΊ ΠΎΡΠΈΡΡΠΊΠ΅ ΠΈ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ.
ΠΠ±ΡΡΠ½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡ
Π§ΡΠΎ Π·Π½Π°ΡΠΈΡ Β«ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΠ°Β»?
ΠΠ±ΡΡΠ½ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡ - ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ² ΡΡΠΎΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ . ΠΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ, Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ², ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΌΡΡΠ», ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠΌΠΎΡΡΠΈΠΌ Π½Π° HTML ΡΠ°ΠΊ:
ΠΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΌΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ, ΡΡΠΎ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ div Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ div.ΠΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ, ΠΊΠ°ΠΊ ΠΎΠΆΠΈΠ΄Π°Π»ΠΎΡΡ, Π² Β«Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ²Β». ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ². ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ clearfix.
Π‘Π±ΡΠΎΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ²
ΠΡΠΈΡΡΠΊΠ° ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ ΡΠΎΡΠ΅ΠΊ - ΡΡΠΎ ΡΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΡ. ΠΡΠΎ ΡΠΏΠΎΡΠΎΠ± ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²Π»ΠΈΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠ΅ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡΠΎ Π·Π²ΡΡΠΈΡ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΠΎ Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅ΡΠ°.
.clear {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
Π Π°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ .left
ΠΊΠ»Π°ΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π»Π΅Π²ΠΎ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΊΠ»Π°ΡΡ .clear
Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ div, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΡΠΈΠ»Ρ clear: both;
. ΠΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ div Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π΅ΡΠ½ΡΡΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ div. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎΡ div ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π»ΡΡ Π±Ρ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ div, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Β«Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π²Π½Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ²Β». ΠΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π²ΡΡ
ΡΠ»ΡΡΠ°Π΅Π²:
ΠΠ΅ ΠΎΡΠΈΡΠ°Ρ , ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ div ΡΠΊΡΡΠ²Π°Π΅Ρ Π΅Π³ΠΎ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ,
.
ΠΡΠΈΡΡΠΊΠ° ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ div ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΅ΠΌΡ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΊ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΡ ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΠΏΠΎΠ΄ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Clearfixing
Clearfixing - ΡΡΠΎ ΠΎΠ±ΡΠΈΠΉ Π±ΠΈΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π½ΠΎ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ. ΠΠ»ΡΠ΄Ρ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° .clearfix
ΡΡΠΈ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ div ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π±ΡΠ»ΠΈ Π±Ρ ΡΠ΄Π°Π»Π΅Π½Ρ ΠΈΠ· Β«Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ²Β» ΠΈ Π²ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈ Π±Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ div ! Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ Π½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ CSS Π΄Π»Ρ .ΠΊΠ»Π°ΡΡΠ° clearfix
ΠΏΠΎΠΊΠ° Π½Π΅Ρ. ΠΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ ΡΡΠΎ Π·Π΄Π΅ΡΡ.
.clearfix :: ΡΠ°Π½ΡΡΠ΅,
.clearfix :: after {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°;
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: " ";
}
.clearfix :: after {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
ΠΠ»ΡΠ΄Ρ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅ ΠΊΠΎΠ΄, Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π·Π°Π΄Π°Π΅ΡΠ΅ΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ, ΡΡΠΎ, ΡΠ΅ΡΡ Π²ΠΎΠ·ΡΠΌΠΈ, ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ. ΠΠΎΠ½ΡΡΠ½ΠΎ. ΠΡ Π΅ΡΠ΅ Π½Π΅ Π²ΠΈΠ΄Π΅Π»ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ, Π½ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΡΠΎΡΡΠ°. ΠΡΠ΅Π²Π΄ΠΎΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ :: before
ΠΈ :: after
Π½Π°ΡΠ΅Π»Π΅Π½Ρ Π½Π° ΠΎΠ±Π»Π°ΡΡΡ Π΄ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ ΡΠ΅ ΡΠ°ΡΡΠΈ (ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π΅ Π²ΠΈΠ΄Π½Ρ) Π΄ΠΎΠ»ΠΆΠ½Ρ:
- ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄Π΅ ΡΠ°Π±Π»ΠΈΡ
- Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΡΡΡΡΡ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ²
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ :: after
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΈΡΠ°ΡΡ ΠΎΠ±Π° ΡΠΈΠΏΠ° ΡΠΈΡΠ΅Π» Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ.Π§ΡΠΎ Π²ΡΠ΅ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ? Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΡΠΎ ΠΎΠΊΡΡΠΆΠ°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌΠΈ ΡΡΠ΅Π½ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΈΡ
Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅.
ΠΠ½ΠΎΠ³ΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ CSS ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΊΠ»Π°ΡΡ .clearfix
ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΅Π³ΠΎ ΠΊ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ ΠΊΠ»Π°ΡΡΠ°ΠΌ, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ .container
. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Ρ Π½Π΅ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΌ CSS ΠΈ ΡΡΡΠΎΠΈΠΌ Ρ Π½ΡΠ»Ρ, Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠΎΠ·ΠΈΡΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ Π²Π°ΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
.Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ»Π΅Π²Π°
, ΡΠΏΡΠ°Π²Π°
, ΡΠ²Π΅ΡΡ
Ρ
ΠΈ ΡΠ½ΠΈΠ·Ρ
. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ.
- ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ : Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².
- ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ : ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΡΠ°ΠΌΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ). ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΠ°.
- Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ : ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ Π½Π°ΠΈΠ²ΡΡΡΠ΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠ»ΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΠ°.
- ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ : ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎΠ½Π°ΡΠ°Π»Ρ ΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΡΠΌΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΎΡΠ½Ρ. ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ΠΈ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠ΅ΠΊ div:
.square {
ΡΠΈΡΠΈΠ½Π°: 64 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
Π²ΡΡΠΎΡΠ°: 64 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
}
# relative-positioned-parent {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ
: 32 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΡΠ»Π΅Π²Π°: 32px;
ΡΠΈΡΠΈΠ½Π°: 256 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 256 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
# absolute-positioned-child {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
}
# relative-positioned-child {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
# fixed-position-child {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
# Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ-ΡΠ΅Π±Π΅Π½ΠΎΠΊ,
# relative-positioned-child {
Π²Π΅ΡΡ
: 32 ΠΏΠΈΠΊΡΠ΅Π»Ρ;
ΡΠ»Π΅Π²Π°: 32px;
}
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
ΠΡΠ½.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
ΠΠ±Ρ
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ
ΠΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°:
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± ΡΡΡΠ΅ΠΊΡΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π·Π΄Π΅ΡΡ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ : div Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ²) ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ div ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π°
8px
ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. - Absolute : Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ div ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², Π½ΠΎ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ div Π½Π°Π΄ Π½ΠΈΠΌ, Π° ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠ΅ div Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π΅Π³ΠΎ ΡΠ°ΠΌ Π½Π΅Ρ.ΠΡΠΎ ΡΡΡΠ΅ΠΊΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ div ΠΎΡΡΠ°Π΅ΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΡΡΠΎ ΠΈΠ·-Π·Π° ΠΎΡΡΡΡΡΡΠ²ΠΈΡ ΠΌΠ΅ΡΡΠ° Π² ΡΡΠΎΠΏΠΊΠ΅ Π±Π΅Π»ΡΡ
div. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π°
32px
ΠΈΠ· Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° Π² Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² .
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ position: relative;
ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ position: absolute;
.ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. Π Β«ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΌΠΈΡΠ΅Β» Π²Ρ ΡΠ΅Π΄ΠΊΠΎ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ΅Π³ΠΎ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ, ΠΊΡΠΎΠΌΠ΅ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ.
Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ CSS Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ Ρ ΡΡΠΈΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡΠΌΠΈ! ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°ΡΠΊΡΡΡΡ ΡΠ°ΠΉΠ½Ρ. ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± - ΡΠ³Π»ΡΠ±ΠΈΡΡ Π²Π°ΡΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ³ΠΎ ΡΡΠ΅Π½ΠΈΡ!
Π¨Π΅ΠΉ Π₯Π°Ρ: ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ float ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
.Π’Π΅ΠΏΠ΅ΡΡ Π²Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° - ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Shay Howe ΠΏΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΠ½ ΠΎΠ±ΡΡΠ΄ΠΈΡ, ΠΊΠ°ΠΊ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡ Π½Π° ΡΠ°Π³ Π²ΠΏΠ΅ΡΠ΅Π΄, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΈ ΡΠ΅ΡΠΊΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌΡΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π° ΡΠ²ΠΎΠΉΡΡΠ² CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π·Π΄Π΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ»ΠΈ.
ΠΠ±Π·ΠΎΡ ΠΊΠΎΠ΄Π°
ΠΠ°ΠΆΠ½ΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ΄Π° ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΡΡΠΎΠΊΠ°
/ * ΠΠΎΠΏΠ»Π°Π²ΠΊΠΈ * /
.ΠΎΡΡΠ°Π²ΠΈΠ» {
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
}
.Π²Π΅ΡΠ½ΠΎ {
float: right;
}
.Π§ΠΈΡΡΠΎ {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
/ * Clearfix * /
.clearfix :: before,
.clearfix :: after {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°;
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: " ";
}
.clearfix :: after {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
/ * ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ * /
# absolute-positioned-child {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
}
# relative-positioned-child {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
# fixed-position-child {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
/ * ... * /
}
ΠΠ°Π²Π΅ΡΡΠ΅Π½ΠΈΠ΅
CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ½ΠΎΠ²Π° ΠΈ ΡΠ½ΠΎΠ²Π°, Π²Ρ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±ΠΎΠ³Π°ΡΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ².Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠΎΡΠΈΡΡ: Β«ΠΠΎ ΠΏΠΎΡΠ΅ΠΌΡ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ?!Β». ΠΠ°Π±Π΅ΡΠΈΡΠ΅ΡΡ ΡΠ΅ΡΠΏΠ΅Π½ΠΈΡ ΠΈ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΈ Π²ΡΠΊΠΎΡΠ΅ Π²Ρ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ Π² Π΅Π³ΠΎ ΡΠΎΡΠ½ΠΎΡΡΠΈ!
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Β»ΠΡΡΡΠΈΠ΅ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΡΠ΅ΡΠ΅ ΡΡΠΎΠΊΠΈ? ΠΠ°ΡΠ°ΡΡ!
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡ.
ΠΠΎΡΡΡΠΏ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ Β«ΠΡΠΈΠ½ΡΠΈΠΏΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°Β» ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅ΡΠ΅Π· ΠΌΠ΅Π½Ρ Π½ΠΈΠΆΠ΅.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ JavaScript Π·Π° ΡΡΠΎΠΉ Π½Π΅Π²ΠΈΠ½Π½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. ΠΡΠ»ΠΈ Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΌΠ΅Π½Ρ, ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΈ Π²Ρ ΠΏΠΎΠΏΠ°Π΄Π΅ΡΠ΅ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎ Π²ΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΌ Π² ΡΠΈΡΡΠΎΠΌ HTML-ΠΊΠΎΠ΄Π΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΌ ΠΎΡ JavaScript.
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄Π΅Π²ΡΡΡ Π΄Π΅ΡΡΡΡΡ Π·Π°ΠΊΠΎΠ½Π°. - ΠΡΠ³Π³ΠΈ Π’Π°ΠΊ
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ HTML ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ CSS.ΠΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ Π² ΠΏΠΎΠ»ΡΠ·Ρ ΡΠΎΠ³ΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎ ΡΡΠΈΠ»Π΅ ΠΈ Π²Π½Π΅ΡΠ½Π΅ΠΌ Π²ΠΈΠ΄Π΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π° HTML - ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ ΠΈ ΡΡΡΡΠΊΡΡΡΠ΅, Π½ΠΎ Ρ Π½Π΅ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ Π·Π΄Π΅ΡΡ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π·ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΡ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, (Π΄Π»Ρ ΠΌΠ΅Π½Ρ) ΡΡΠ½ΠΎ, ΡΡΠΎ CSS - ΡΡΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π΅ ΡΠΎΠ³Π»Π°ΡΠΈΡΡΡΡ.
ΠΠ»ΡΡΠΎΠΌ ΠΊ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΠ±ΡΠ°ΡΠΎΠΉ ββΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡ Π·Π°ΡΡΠΎΠ½ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅:
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π±Π»ΠΎΡΠ½ΡΡ ΠΈ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ .
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΈΡΠ°Π»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π΅ΡΠ½ΡΡΡΡΡ Π½Π°Π·Π°Π΄ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΅Π΅, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΊ ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π·ΡΡΠ° ΠΈΠ· Π΄Π²ΡΡ ΠΏΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄Π½ΡΡ ΠΊΠ½ΠΈΠ³ Π―Π½Π° ΠΠ»ΠΎΠΉΠ΄Π° ΠΈ ΠΡΠ΅ΠΉΠ³Π° ΠΡΠ°Π½Π½Π΅Π»Π»Π°, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π°Π²ΡΠΎΡΠΈΡΠ΅ΡΠ½ΡΡ ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ²: Π’ΠΎΠΌΠΌΠΈ ΠΠ»ΡΡΠΎΠ½Π°, ΠΠ°ΠΉΠΊΠ° Π₯ΠΎΠ»Π»Π°, Π‘ΡΠΈΠ²Π΅Π½Π° ΠΡΡΠ΄Π»ΠΈ, Π ΠΎΠ±Π° ΠΠ»Π΅ΠΉΠ·Π±ΡΡΠΊΠ°, ΠΠΈΠ»ΠΈΠ°Π½Π° ΠΠ°Π»ΠΊΡ ΠΎΡΠ° (Π²ΡΠΎΡΠ°Ρ ΡΠ°ΡΡΡ ΡΡΠ°ΡΡΠΈ ΠΠ°Π»ΠΊΡ ΠΎΡΠ°). Π·Π΄Π΅ΡΡ), Chris Coyier ΠΈ BarelyFitz Designs, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΠΈΠ· Π΄ΡΡΠ³ΠΈΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ². ΠΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π°, ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΡ Ρ Π·Π΄Π΅ΡΡ Π²ΠΊΠ»ΡΡΠΈΠ».ΠΠ°ΠΌ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎΠΈΡ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΈΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠ°Π½ΠΊΠ½ΠΎΡΡ ΠΡΡΠ΄Π»ΠΈ:
ΠΠΎΠ³Π΄Π° Π»ΡΠ΄ΠΈ ΠΏΠ»ΠΎΡ ΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ CSS, ΠΎΠ½ΠΈ ΡΠΊΠ»ΠΎΠ½Π½Ρ ΡΡΠ³ΠΎΡΠ΅ΡΡ ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π»Π΅Π³ΠΊΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ. ΠΠ° ΠΏΠΎΠ²Π΅ΡΡ Π½ΠΎΡΡΠΈ Π²Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π±Π»ΠΎΠΊ, ΠΈ Π²ΠΎΡ ΠΎΠ½. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄. ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ±ΠΈΡΡ Ρ ΡΠΎΠ»ΠΊΡ Π½ΠΎΠ²ΠΈΡΠΊΠ°, ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ°Π½Π΅Ρ Π²ΡΠΎΡΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉ.ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π΅ΡΠ»ΠΈ ΡΠ°Π·ΠΎΠ²ΡΠ΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡΠ±ΠΎΠΊΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ ΠΈ Π΄Π°ΠΆΠ΅ Π±Π°Π½Π°Π»ΡΠ½ΠΎ, Π½ΠΎ ΡΡΠΎ ΠΏΡΠ°Π²Π΄Π°, ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΠΈΡ ΠΏΡΠΎΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ.
Π ΠΠ°Π»ΠΊΡ ΠΎΡ Π΄Π°Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΠ±ΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° "ΠΏΠΎΡΠΎΠΊΠ°", Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π»ΠΈΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅:
ΠΡΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π² ΠΈΠ³ΡΡ Π²ΡΡΡΠΏΠ°Π΅Ρ Π½Π΅ΡΠ»ΠΎΠ²ΠΈΠΌΡΠΉ Β«ΠΏΠΎΡΠΎΠΊΒ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS. ΠΠΎΡΠΎΠΊ Π² CSS - ΡΡΠΎ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠΊΡΠ°Π½Π΅.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΎΡΠΊΠ»ΡΡΠΈΡΠ΅ CSS Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ HTML Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡΠΎΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΈ Π³Π΄Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ: ΠΏΠΎΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ΄Π΅Ρ ΠΎΡ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ HTML-ΠΊΠΎΠ΄Π° ΠΊ Π΅Π³ΠΎ Π½ΠΈΠ·Ρ.
ΠΠΎΡΠΎΠ±ΠΊΠ° ΠΠΎΠ΄Π΅Π»Ρ
ΠΠΎΡΠΎΠ±ΠΎΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅, Π±ΠΎΠ»ΡΡΠΎΠΉ, ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠΉ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΊΠΎΡΠΎΠ±ΠΊΡ. ΠΠ΅ΡΠΈΠΎΠ΄.
Π ΡΠ΅ΡΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΌΠ½Π΅ ΠΏΠΎΡΡΠ°ΡΡΠ»ΠΈΠ²ΠΈΠ»ΠΎΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡ Π²Π»Π°Π΄Π΅Π»ΡΡΠ°, ΠΡΠ΅ΠΉΠ³Π° ΠΡΠΊΠ°.(ΠΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°Π·ΠΌΡΡΠ»Π΅Π½ΠΈΡ ΠΈ ΡΡΠΎΠΊΠΈ ΠΡΠ΅ΠΉΠ³Π° ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° ΡΡΠΎΠΉ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ½ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈΡΠ»Π°Π» ΠΌΠ½Π΅ Π»ΡΡΡΡΡ Π²Π΅ΡΡΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠ΅ΠΌ ΡΠ°, ΡΡΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ββΠ½Π° Π΅Π³ΠΎ ΡΠ°ΠΉΡΠ΅, ΠΊΠΎΡΠΎΡΡΡ Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π» Π·Π΄Π΅ΡΡ.)
ΠΠΎΠΎ, ΡΡΠΎ Π²ΡΠ΅ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎ ΠΈ Π²ΡΠ΅ ΡΠ°ΠΊΠΎΠ΅ ....
ΠΠΎ ΡΡΠΎ ΡΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ? ΠΠΎΡ ΠΡΠΊ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΡΡΠΎ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ:
Π Π°Π±ΠΎΡΠ°Ρ ΡΠ½Π°ΡΡΠΆΠΈ Π²Π½ΡΡΡΡ ΠΈ Π½Π°Π·Π°Π΄ Π²ΠΏΠ΅ΡΠ΅Π΄, ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΡ Π³ΡΠ°Π½ΠΈΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°Π΅ΠΌ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ Ρ Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.ΠΠ½ΡΡΡΠΈ ΠΏΠΎΠ»Ρ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΅Π³ΠΎ. ΠΡΡΡΡΠΏ - ΡΡΠΎ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°Π΅ΠΌ ΠΏΠΎΠ»Ρ ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, Π° ΡΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π΅Π½ ΡΠ΅ΡΠ΅Π· ΠΎΠ±Π»Π°ΡΡΡ ΠΎΡΡΡΡΠΏΠΎΠ². ΠΠ° Π²ΡΠ΅ ΡΡΠΎ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ Π³ΡΠ°Π½ΠΈΡΠ°, ΠΎΡΠ΅ΡΡΠΈΠ²Π°ΡΡΠ°Ρ Π²ΠΈΠ΄ΠΈΠΌΡΠΉ ΠΊΡΠ°ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΡΠΈΠ²Π΅Π½ ΠΡΡΠ΄Π»ΠΈ Π΄Π°Π΅Ρ Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ:
ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (Π±Π»ΠΎΠΊΠ°) = Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ + ΡΠΈΡΠΈΠ½Π° Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ + Π»Π΅Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ + ΡΠΈΡΠΈΠ½Π° + ΠΏΡΠ°Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ + ΠΏΡΠ°Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΠΈΡΠΈΠ½Ρ + ΠΏΠΎΠ»Π΅ ΡΠΏΡΠ°Π²Π°
Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (Π±Π»ΠΎΠΊΠ°) = margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + Π½ΠΈΠΆΠ½ΡΡ ΠΌΠ°ΡΠΆΠ°
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΠΎΠ»ΡΡ ΠΈ ΠΎΡΡΡΡΠΏΠ°Ρ .
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π±ΠΎΡΠ΄ΡΡΠ°Ρ .
ΠΠ°ΠΉΠΊ Π₯ΠΎΠ»Π» Π΄Π°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡ:
ΠΠΎΠ»Ρ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ, Π½ΠΎ Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΉ ΡΠ°ΡΡΠ΅ΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΉ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠΌ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠ°Π²Π½Π°Ρ Π½ΡΠ»Ρ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅. ΠΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°Π·Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ (ΡΠ²Π΅ΡΡ Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ ΠΈ ΡΠ»Π΅Π²Π°). ΠΠΎΠ»Ρ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ Π΄Π°ΠΆΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. Π¨ΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΡΠ°Π²Π½Ρ ΡΠΈΡΠΈΠ½Π΅ ΠΈ Π²ΡΡΠΎΡΠ΅ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ ΠΏΠΎΠ»Ρ.ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ»ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ»ΡΠΆΠΈΡ ΠΊΠΎΡΠ½Π΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΡΠΎΠΉ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ.
Π Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π ΠΎΠ± ΠΠ»Π΅ΠΉΠ·Π±ΡΡΠΊ ΡΠ΅Π·ΡΠΌΠΈΡΡΠ΅Ρ ΡΡΠΎ Π΄Π»Ρ Π½Π°Ρ:
ΠΡΠ΅, ΡΡΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ
ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ , ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠΎΠΉ (ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ, ΡΠ΅ΠΌ ΡΠ³ΠΎΠ΄Π½ΠΎ). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ΅Π³- ΡΡΠΎ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°
, Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°, Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°.Π Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Π²Ρ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΡΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΡΠΎΡΠΌΠΎΠΉ, ΡΠ²Π΅ΡΠΎΠΌ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Ρ. Π. ΠΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠΎ ΡΡΡΠΈ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π²Π°ΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π½Π° Π²Π°ΡΠ΅ΠΉ HTML-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΊΡΡΠΆΠ΅Π½ ΡΠ°ΠΌΠΊΠΎΠΉ. Π Π°Π·ΠΌΠ΅ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° width ΠΈ height Π² Π½Π°ΡΠ΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ CSS, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠ΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΡΠΈΡ ΠΠΎΠΉΠ΅Ρ ΠΏΠΈΡΠ΅Ρ, ΡΡΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ Β«Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈΒ» Π±ΡΠ»ΠΎ Π΅Π³ΠΎ Β«ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠΌ Π°Ρ -Ρ Π°Β», ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π°ΡΠ°Π» ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΠ°ΡΠ°Π΄ΠΈΠ³ΠΌΡ ΡΡΡΡΠΊΡΡΡΡ CSS.ΠΠ½ ΠΏΠΈΡΠ΅Ρ:
ΠΡΠΎ Π±ΡΠ»Π° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΡΠΈΡ [ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ] ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΠΌΠΎΠΈΠΌ "Π-Ρ Π°!" ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΊΠΎΡΠΎΠ±ΠΊΡ.
Π― ΠΌΠΎΠ³Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ ΡΡΠΈΠΊΠΎΠ².
Π― ΠΌΠΎΠ³Ρ Π΄Π°ΡΡ ΡΡΠΈΠΌ ΠΊΠΎΡΠΎΠ±ΠΊΠ°ΠΌ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ²ΡΡΠΈΡ ΠΏΡΠΎΡΡΠΎ, Π½ΠΎ ΡΡΠΈ Π²Π΅ΡΠΈ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΊΠ°ΠΆΡΡΡΡ ΠΌΠ½Π΅ ΡΠΈΠ»ΡΠ½ΡΠΌΠΈ.
Π₯ΠΎΡΠΎΡΠΎ, ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π°ΠΌΠΎΡΠΈΠΌ Π½ΠΎΠ³ΠΈ.
ΠΡΡΡ Π΄Π²Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠΈΠΏΠ° Π±ΠΎΠΊΡΠΎΠ²: Π±Π»ΠΎΠΊ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ .
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π±Π»ΠΎΡΠ½ΡΡ ΠΈ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ .
ΠΡΡΠ΄Π»ΠΈ ΠΏΠΈΡΠ΅Ρ:
ΠΠ»ΠΎΠΊΠΈ ΡΡΠΎΠ²Π½Π΅ΠΉ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄Π²Π° Π±Π»ΠΎΠΊΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π² Π²Π°ΡΠ΅ΠΌ html, Π²ΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ΄ ΠΏΠ΅ΡΠ²ΡΠΌ. Π‘ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ. ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π΅ΠΌΡ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²ΡΠ΅Ρ, ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, ΡΡΠΎ Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΡΡΡΡ.ΠΠ½ΠΈ Π½Π°ΡΠ½ΡΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ»Ρ ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΡ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. ΠΠ°ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅ ΠΈ ΡΠ½ΠΎΠ²Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. ΠΠΎΠ»Π΅ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΏΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΠ±ΡΠ°ΡΠΎΠΉ ββΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΡΡΠ΄Π»ΠΈ - ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠ΅ ΡΠΈΡΠ°ΡΡ - Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
Π ΠΏΠΎΠΊΠ° ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡΠ΅:
ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Β«ΡΡΠ°Π±Π΅Π»ΠΈΡΡΡΡΡΡΒ» Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½ Π½Π°Π΄ Π΄ΡΡΠ³ΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠ°ΠΆΠΈ Π² ΠΌΠ½ΠΎΠ³ΠΎΠΊΠ²Π°ΡΡΠΈΡΠ½ΠΎΠΌ Π΄ΠΎΠΌΠ΅:
ΠΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π΅ Π·Π°ΡΡΠ°Π²ΠΈΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ, ΠΊΠ°ΠΊ ΡΡΠ΄Ρ ΠΊΠΈΡΠΏΠΈΡΠ΅ΠΉ:
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Ρ ΠΈ ΠΎΡΡΡΡΠΏΡ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π½Π°ΡΠΈΡ Β«ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ Β» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ (Ρ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ, Β«ΠΏΡΠΈΡΠΊΡΠ°ΡΠΈΡΡΒ»).Π¦Π²Π΅ΡΠ° ΡΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ, Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΎΡΡΡΡΠΏΠΎΠΌ ΠΈ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ, Π½ΠΎ Π½Π΅ Π·Π° ΠΏΠΎΠ»ΡΠΌΠΈ.
ΠΠ°ΠΊ ΡΠ·Π½Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ? ΠΡ Π΅ΡΡΡ Π΄Π΅ΡΠΎΠ»ΡΡ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ Β«Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΉ ΡΠ±ΡΠΎΡΒ», Π²Π°ΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π±ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π½Π° Π½ΠΎΠ»Ρ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΈ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π±Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, ΠΎΠ½ΠΈ Π²Π°ΡΡΠΈΡΡΡΡΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ.
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div , ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π° ΠΊΠ°ΠΊ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
.ΠΏΡΠΈΠΌΠ΅Ρ { ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡΡΡΡΠΏΠ° ΠΊ Π±Π»ΠΎΠΊΡ, Π΅ΡΠ»ΠΈ Π·Π°Ρ ΠΎΡΠΈΠΌ, ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ°ΠΌΠΊΡ Π² 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
.example { ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }ΠΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.example
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 130 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Howzat? ΠΡΠΎΡΡΠ°Ρ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ°.5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ + 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ + 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ + 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ + 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ = 130 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΠΡΠ°Π½ΠΈΡΡ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ (ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°) ΠΏΠΎ 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ»Ρ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ - 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π·Π° ΡΡΡΠΊΡ.Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ - 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. Π‘ΡΠΌΠΌΠΈΡΡΠΉΡΠ΅ ΡΡΠΎ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΊΠ°Π»ΡΠΊΡΠ»ΡΡΠΎΡΠ΅ ΠΈΠ»ΠΈ Π² Π³ΠΎΠ»ΠΎΠ²Π΅, ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ 130 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ? Π§ΡΠΎ ΠΆ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ 115 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΡΡΡΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.example
ΠΈΠΌΠ΅ΡΡ 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.Π Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠΈΡΠΈΠ½Ρ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ Π΅ΡΠ΅ ΠΊΠΎΠ΅-ΡΡΠΎ. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° (ΠΈ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
static
ΠΈΠ»ΠΈΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
), ΡΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° 100%, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.ΠΠ±ΠΈΠ²ΠΊΠ° ΠΈ Π³ΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄ΡΡ Π²ΡΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ Π½Π° ΡΡΡ 100% ΡΠΈΡΠΈΠ½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠ°Π²Π½ΠΎΠΉ 100%, ΡΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²ΡΡΠΎΠ»ΠΊΠ½Π΅Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π°ΡΡΠΆΡ Π½Π° . ΠΠΎΠΉΠ΅Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ:Π£ΡΠΎΠΊ Π·Π΄Π΅ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ 100%, Π° ΠΌΠ΅Π½Π΅Π΅ ΠΎΡΡΡΠΈΠΌΠΎΠ΅ Β«Π²ΡΠ΅, ΡΡΠΎ ΠΎΡΡΠ°Π»ΠΎΡΡΒ». ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ², Π² ΠΊΠΎΡΠΎΡΡΡ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π»ΠΈΠ±ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ , Π»ΠΈΠ±ΠΎ Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ.
Π ΠΎΠ±ΡΠ΅ΠΌ, ΡΠΈΡΠΈΠ½Ρ Π»ΡΡΡΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ.ΠΠΎΠΉΠ΅ Π½Π°Π±Π»ΡΠ΄Π°Π΅Ρ:
[T] ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ΅Π³Π΄Π° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΡΠ΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡΡ.
ΠΡΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅? ΠΠ»Π΅ΠΉΠ·Π±ΡΡΠΊ Π΄Π°Π΅Ρ Π½Π°ΠΌ ΠΏΠΎΡΡΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΡΠ°ΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΏΡΠΎΡΡΠΎ ΡΠΊΡΠ°Π΄Ρ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΊΡΠ°Π΄Ρ Π΅Π³ΠΎ ΡΠ΅Π»Π΅Π²ΠΈΠ·ΠΎΡ (Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Ρ Π²Π΅ΡΡ ΡΡΠΎΠΌΡ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π²Π°ΠΌ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π²ΡΡ Π΅Π³ΠΎ ΡΡΠ°ΡΡΡ Π½Π° ΡΡΡ ΡΠ΅ΠΌΡ).
[H] ΠΡΠΎ ΡΠ°ΠΌΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎ ΠΊΠΎΡΠΎΡΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡΡΡΡ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΡΡ: Π³ΡΠ°Π½ΠΈΡΠ°, ΡΠΎΠ½, ΠΎΡΡΡΡΠΏΡ, ΡΠΈΡΠΈΠ½Π° ΠΈ ΠΏΠΎΠ»Ρ.ΠΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠ΄Π½ΠΎ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ Π½ΠΈΠΆΠ΅. Π ΡΡΠΎΠ±Ρ ΡΡΠΎ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΌΡ ΡΠ²ΡΠΆΠ΅ΠΌ ΡΡΠΎ Ρ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π²Ρ ΡΠΏΠ°ΠΊΠΎΠ²ΡΠ²Π°Π΅ΡΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΉ ΠΆΠΈΠ·Π½ΠΈ.
- ΠΡΠ°Π½ΠΈΡΠ° : ΠΡΠΎ ΠΊΠΎΡΠΎΠ±ΠΊΠ°. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄ΡΠΌΠ°ΡΡ ΠΎ Π³ΡΠ°Π½ΠΈΡΠ΅ ΠΊΠ°ΠΊ ΠΎΠ± ΠΎΡΠ΅ΡΡΠ°Π½ΠΈΠΈ Π½Π°ΡΡΠΎΡΡΠ΅Π³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°. ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΡ ΡΠΎΠ»ΡΠΈΠ½Ρ (ΡΠΈΡΠΈΠ½Ρ) ΠΈ ΡΠ²Π΅Ρ, Π½ΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΆΠ΅ΡΡΠΊΠ°Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΠ΅ Π²Π΅ΡΠΈ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π½ΡΠ»Π΅Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄ΡΠΌΠ°ΡΡ ΠΎ Π³ΡΠ°Π½ΠΈΡΠ΅ ΠΊΠ°ΠΊ ΠΎ ΡΠ°ΠΌΠΎΠΉ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π΅Π΅ ΡΠ°ΠΌ Π½Π΅Ρ.
- Π€ΠΎΠ½ : ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠΎΠ½ ΠΊ ΡΠ΅ΠΌΡ-Π»ΠΈΠ±ΠΎ, ΠΎΠ½ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ Π΄ΠΎ Π΄ΡΡΠ³ΠΎΠΉ, ΠΏΠΎΠΊΡΡΠ²Π°Ρ Π²ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ°ΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΠΈ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΡΠ²Π΅ΡΠ°.
- ΠΠ°Π±ΠΈΠ²ΠΊΠ° : ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎ Π½Π°Π±ΠΈΠ²ΠΊΠ΅ ΠΊΠ°ΠΊ ΠΎ ΠΏΡΠ·ΡΡΡΠ°ΡΠΎΠΉ ββΠΏΠ»Π΅Π½ΠΊΠ΅ ΠΈΠ»ΠΈ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠ΅ Π°ΡΠ°Ρ ΠΈΡΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ Π² ΠΊΠΎΡΠΎΠ±ΠΊΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΊΡΠ΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ Π΅Π΅ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ. ΠΡΡΡΡΠΏ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°ΠΌΠΊΠΎΠΉ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. ΠΡΠΎ ΡΠ°ΠΌΠΎΠ΅ ΡΠ°Π·ΡΠΌΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈΠ· Π²ΡΠ΅Ρ .
- Π¨ΠΈΡΠΈΠ½Π° : ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° Π²Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. Π‘Π½Π°ΡΠ°Π»Π° ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΡΠΈΡΠΈΠ½Π° Π²Π°ΡΠ΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π²Π½ΡΡΡΠΈ Π²Π°ΡΠ΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Π²Π½ΡΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΈΡΠΈΠ½Ρ 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Ρ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½ ΠΈ ΡΠ°ΠΌΠΊΠΎΠΉ Π² ββ5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Π°Ρ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Β«ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΒ» Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 400 + 20 + 20 + 5 + 5 (ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ ΠΊΠ°ΠΊ 450) ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. .
- Margin : ΠΏΠΎΠ»Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π½Π°ΡΠ΅Π³ΠΎ Π³ΠΈΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π²ΠΎΠΊΡΡΠ³ Π²Π°ΡΠ΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ.ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΡΠΈΠΊΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Π½Π°ΠΌΠ΅ΡΠ΅Π½Π½ΠΎ ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΠΏΡΡΡΡΠΌ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π²Π΅ΡΠΈ Π²Π½ΡΡΡΠΈ ΡΡΠΈΠΊΠ° Π±ΡΠ»ΠΈ Π»Π΅ΡΡΡΠΈΠΌΠΈ, ΠΎΠΏΠ°ΡΠ½ΡΠΌΠΈ, Π²ΠΎΠ½ΡΡΠΈΠΌΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΠΌ-ΡΠΎ Π΅ΡΠ΅, ΠΎΡ ΡΠ΅Π³ΠΎ Π²Ρ Ρ ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ. ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Π²Ρ Π²Π·ΡΠ»ΠΈ Π½Π°ΡΡ ΡΠ°ΠΌΠΊΡ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π»Ρ Π½Π΅Π΅ ΠΏΠΎΠ»Ρ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΡΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ Β«ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΒ» ΡΠΈΡΠΈΠ½ΠΎΠΉ 450 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΠΉ 470 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΠΎΡ ΠΈ Π²ΡΠ΅, ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ!
ΠΡ, Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠ°ΠΊ. ΠΠ°ΠΊ ΠΎΡΠΌΠ΅ΡΠ°Π΅Ρ ΠΠ»Π΅ΠΉΠ·Π±ΡΡΠΊ (ΠΈ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅), Internet Explorer ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΊΠΎΡΠΎΠ±ΠΎΡΠ½ΡΡ ΠΌΠΎΠ΄Π΅Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½Π°ΡΠ΅.(ΠΠ°ΠΊ ΠΌΡ ΡΠ·Π½Π°Π»ΠΈ, ΡΡΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ IE, Π° Π½Π΅ Π΄ΡΡΠ³ΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ?) ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΏΠ»ΠΎΡ ΠΎ: Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ DOCTYPE ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ IE 6 ΠΈΠ»ΠΈ Π½ΠΎΠ²Π΅Π΅, Ρ Π²Π°Ρ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌ. IE 5.5 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ ΡΡΡΠ°Π΄Π°ΡΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠΉ Β«ΠΌΠΎΠ΄Π΅Π»ΡΡ ΡΠ»ΠΎΠΌΠ°Π½Π½ΠΎΠ³ΠΎ ΡΡΠΈΠΊΠ°Β». Π’Π°ΠΊ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½Ρ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅Π³ΠΎ ΠΈ Π±ΡΡΡΡΠΎ ΠΈΡΡΠ΅Π·Π°ΡΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ ΠΎΠ± ΡΡΠΎΠΌ. Π Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΠ΅, ΡΡΠΎ ΠΏΠΈΡΠ΅ΡΠ΅ Π΄Π»Ρ IE 5x, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠ°ΡΡ Ρ ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΉ Glazebrook ΠΏΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π‘Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΏΠΎΠ»Ρ
ΠΠ½ΠΎΠ³Π΄Π° ΠΏΠΎΠ»Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π±Π»ΠΎΠΊΠ° Β«ΡΠΆΠΈΠΌΠ°ΡΡΡΡΒ», Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅Π΅ ΠΈΠ· Π΄Π²ΡΡ ΠΏΠΎΠ»Π΅ΠΉ, Π° Π΄ΡΡΠ³ΠΎΠ΅ Β«ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡΒ» Π΄ΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½ΡΠ»Ρ.ΠΡΠ΅Π½Ρ Π½Π΅ΠΊΡΡΡΠΎ.
Π― Π½Π΅ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ Π²Π΄Π°Π²Π°ΡΡΡΡ Π² ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π½ΠΎ Π΄Π°ΠΌ Π²Π°ΠΌ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΡΡ ΡΡΠ°ΡΡΡ Π’ΠΎΠΌΠΌΠΈ ΠΠ»ΡΡΠΎΠ½Π° ΠΈ ΠΠΎΠ»Π° Π'ΠΡΠ°ΠΉΠ΅Π½Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΡΠΎΠ³ΠΎ. ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ.
ΠΡΠ½ΠΎΠ²Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π CSS Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
- ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ;
- , ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ;
- Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; ΠΈ
- ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΠ»ΠΈ Π² ΡΠ΅ΡΠΌΠΈΠ½Π°Ρ ΠΊΠΎΠ΄Π° CSS:
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;ΠΡΠΎ Π²ΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ, Π½ΠΎ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΡΡΠΈ ΡΠ΅ΡΠΌΠΈΠ½Ρ? Π ΡΡΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°ΡΡ ΠΈ ΠΊΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ ?
ΠΡ, ΡΠ΅ΡΠΌΠΈΠ½Ρ ΡΠ±ΠΈΠ²Π°ΡΡ Ρ ΡΠΎΠ»ΠΊΡ.ΠΠ°ΠΊ ΠΏΠΈΡΠ΅Ρ ΠΌΠΎΠΉ Π΄ΡΡΠ³ Π’ΠΎΠΌΠΌΠΈ ΠΠ»ΡΡΠΎΠ½:
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ· Π½Π°Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΊΠ°ΠΆΡΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΡΠ°Π½Π½ΡΠΌΠΈ. Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΎΠ²ΡΠ΅ Π½Π΅ ΡΡΠ°ΡΠΈΡΠ΅Π½, ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ°ΠΌΠΎΠΌΡ ΡΠ΅Π±Π΅. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ, Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ, ΡΠ°ΠΊ ΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ.
ΠΠΎ W3C ΠΏΡΠΈΡΠ²ΠΎΠΈΠ» ΡΡΠΈ ΠΈΠΌΠ΅Π½Π° Π½Π΅ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.ΠΡΠ΄ΠΈ Π² ΡΡΠΎΠΉ Π³ΡΡΠΏΠΏΠ΅ ΠΏΡΠΈΡΠ²ΠΎΠΈΠ»ΠΈ ΡΡΠΈ ΠΈΠΌΠ΅Π½Π° Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ Β«Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Β».
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ ΠΈ ββΡΠ΅Π³Π°Ρ .
Π Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ HTML ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Β«ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΒ» - Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΠΌ - Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Β«ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΒ» - ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Β«Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΒ» Π²Π½ΡΡΡΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ². Π ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Β«ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΒ» ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΎΠ±ΠΎΡΠΎΡΡ.
ΠΠΎΠΌΠΎΠ³Π°Ρ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Ρ ΠΌΠΎΠ³Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΠΏΡΠΈΠ½ΡΡΡ ΠΎΠ±ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ .
ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ Ρ Π½ΠΈΠΌΠΈ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ. ΠΠΎ ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ Π½Π°ΡΠΈΠ½Π°ΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΡΡΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π½Π΅ ΡΠ΅ΠΉΡΠ°Ρ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
CSS Π΄Π°Π΅Ρ Π½Π°ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π²ΡΡΠ΅. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π΄Π°Π΅Ρ Π½Π°ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ , Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΠΌΠΎΠ΅ :
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;ΠΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ - ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½ΠΈΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ - Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π΅ ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π°
position: Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ
ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ.ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ CSS-ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°Ρ , ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ .
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²Π΅ .
ΠΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²ΠΊΠ»ΡΡΠ°Ρ Π²ΡΠ΅ Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎ Π±Π»ΠΎΡΠ½ΡΠΉ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ .
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΈΠ΄Π΅Π΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, - ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠΏΠ°ΠΊΠΎΠ²ΡΠ²Π°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ Π²Π΅ΡΠΈ Π² ΠΊΠ°ΡΡΠΎΠ½Π½ΡΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΈ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ Π²ΡΠΈΡΠ½ΡΡΡ Π² Π½ΠΈΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Β«ΠΊΠΎΡΠΎΠ±ΠΊΠΈΒ» CSS ΠΌΠΎΠΆΠ΅Ρ Β«ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΒ» Π² Π΄ΡΡΠ³ΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ.
ΠΠ΅Π±-Π½ΠΈΠ½Π΄Π·Ρ Π’ΠΎΠΌΠΌΠΈ ΠΠ»ΡΡΠΎΠ½ ΠΈ ΠΠΎΠ» Π'ΠΡΠ°ΠΉΠ΅Π½ Π΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΡ:
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ - ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ»ΠΎ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ Π΄ΠΎ Π³ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ html Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ HTML, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ [Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ»ΠΈ Π΄ΡΡΠ³Π°Ρ Π²Π΅Π±-ΡΡΠΈΠ»ΠΈΡΠ°] ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ XHTML.
ΠΠ΅ ΡΠΎ ΡΡΠΎΠ±Ρ Π½Π°Ρ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ XHTML Π½Π° ΡΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π·Π½Π°ΡΡ.
ΠΠ»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
- Π²ΠΈΠ΄ΠΈΠΌΡΠΉ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- ΡΠΊΡΡΡΠΎ
- ΡΠ²ΠΈΡΠΎΠΊ
- Π°Π²ΡΠΎ
- Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
ΠΡΡΡ Π΄Π²Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°,
overflow-y
ΠΈoverflow-x
, Π½ΠΎ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS3, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΡΠΎΠΊΠΎ, Π½ΠΎ Π½Π΅ ΠΏΠΎΠ²ΡΠ΅ΠΌΠ΅ΡΡΠ½ΠΎ ΠΏΡΠΈΠ½ΡΡΡ.ΠΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΡ Π·Π΄Π΅ΡΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ.ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π²ΠΈΠ΄ΠΈΠΌΡΠΉ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΡΠ΅Π΄ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°Π½Π΅Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ. ΠΠΎ ΡΡΡΠΈ, ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ "Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ" ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΠ΅ Π±Π°Π½Π½Π΅ΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ½ Π²ΡΠ»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΈ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ.Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ; Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΡΡ 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π²Ρ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅ΠΊΡΡΠ°, ΡΠ΅ΠΌ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, ΠΎΠ½ Π²ΡΠΉΠ΄Π΅Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠΊΠ½Π° ΠΈ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ.
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΠ΅Π΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠΎ Π΅ΡΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Π±Ρ.
ΠΠ½ΠΎΠ³Π΄Π° ΠΏΠΎΠ»Ρ ΠΌΠΎΠ³ΡΡ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
visible
. ΠΡΠΎΠ³ΠΎ Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠΊΡΡΡΠΎ
ΠΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΡΡΡ
Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
.ΠΡΠ΅, ΡΡΠΎ Β«ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π°Π΅ΡΡΡΒ» ΠΈΠ· ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΊΡΡΡΠΎ ΠΎΡ Π³Π»Π°Π·. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎ (Π΄ΡΠΌΠ°Ρ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎ) Π½ΠΈΠΊΠΎΠΌΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄. ΠΠ΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΡΠΈΡ ΠΠΎΠΉΠ΅Ρ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΡΠΌΠ΅ΡΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΊΡΡΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΎΡ ΠΈΡ ΠΏΠΎΠ»Ρ Π·ΡΠ΅Π½ΠΈΡ.
ΠΡΡΡ ΠΊΠΎΠ΅-ΡΡΠΎ, ΠΎ ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ.
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
Β«ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΠ΅Π΅Β» ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ, Π½ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΆΠ΅Π»Π°Π΅Ρ.Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΎ Π½Π° ΡΡΠΎΠΌ ΡΠ°ΠΉΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ ΠΎΡΠΎΡΠΈΡ Π°ΡΠΏΠ΅ΠΊΡΠΎΠ² ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΠ°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: Π°Π²ΡΠΎ
ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ Π½ΡΠΆΠ½Ρ, ΠΎΠ½ΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ.
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠ΅ ΡΡΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘Π±ΡΠΎΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ°
ΠΠ΄Π½Π° ΡΡΡΠ°Π½Π½ΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ ΡΠΎΡΠΊΠΎΠΉ .
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ°Ρ .
ΠΡ, Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΈΡΠ°ΡΡ float: auto ΠΈΠ»ΠΈ hidden .
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π΅ ΠΎΡΠΈΡΠ°Π΅Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΡΠ°ΠΌΠΎ ΠΎΡΠΈΡΠ°Π΅Ρ . Π ΡΠ΅Π°Π»ΡΠ½ΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ, ΡΡΠΎΠ±Ρ Π·Π°ΠΊΠ»ΡΡΠΈΡΡ Π²Π½ΡΡΡΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ.ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π½Π΅ ΠΎΠ±ΡΡΠ²Π»ΡΠΉΡΠ΅ Π²ΡΡΠΎΡΡ.
Coyier ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ Π½Π°Π³Π»ΡΠ΄Π½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΈΠ»Π»ΡΡΡΡΠΈΡΡΡΡΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠ΄ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ
overflow
. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ· Π½ΠΈΡ , Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Π΅ΡΡΡ Π² Internet Explorer. ΠΠ° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΠΎΠΉΠ΅ΡΠ° ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΈ Π΄Π°Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡ ΡΡΡΡΠ°Π½ΠΈΡΡ.ΠΡΠΈΠ±ΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
overflow
Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .Internet Explorer 6 ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ ΡΡΡΠ°Π½Π½ΠΎΡΡΠ΅ΠΉ. ΠΠ½ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° body, ΠΊ ΡΠ°ΠΉΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΠΎΠΊΠ½Π΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π°
html
ΡΠ°Π²Π½ΠΎvisible
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ
, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ. Π, Π΅ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π²Π½ΠΎauto
,hidden
ΠΈΠ»ΠΈscroll
, Π° ΡΠΈΡΠΈΠ½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π½Π° ΠΊΠ°ΠΊauto
, ΡΠΈΡΠΈΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.Internet Explorer 7 ΠΈ Π½ΠΈΠΆΠ΅ (Π΄Π°, ΡΡΠΎ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ IE6) Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅: Π² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π½Π°
auto
ΠΈΠ»ΠΈscroll
, ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ;ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ .
, Π° Π΅ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ -
, ΡΠΊΡΡΡΠΎ
, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π΅Π½, Π΅ΡΠ»ΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, IE7 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ
.Π’ΠΎΠ»ΡΠΊΠΎ IE7 , Ρ
auto
,hidden
ΠΈscroll
, Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ°.Internet Explorer 8 ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ Π½Π΅ΠΏΡΠΈΡΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΠ΅ΡΡΡ Ρ
max-width
ΠΈΠ»ΠΈmax-height
. Π‘Π°ΠΉΡ Hilbrand Edskes Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΡΠ΅Ρ ΡΡΠ΄ ΡΠ΅ΡΡΠΎΠ²ΡΡ ΡΠ»ΡΡΠ°Π΅Π².ΠΠΏΠ΅ΡΠ° 9.5 ΠΈ 10 ΠΈΠΌΠ΅ΡΡ ΠΎΡΠΈΠ±ΠΊΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π°ΡΡΡΠΎΠ΅Π½ Π½Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΡ
Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ
, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΠ»ΠΈ Π²Π΅ΡΡ Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π²ΡΡΠΎΡΠ° ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. (ΠΠ΅ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ Π±Π°Π³!)Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Β«ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡΒ» Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML.ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡ Π½Π΅ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
position: static
ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ, ΠΊΡΠΎΠΌΠ΅ ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΎΡΠΌΠ΅Π½Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½Π΅Π³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠΈΠΌΠ΅Ρ (ΠΏΠ»ΠΎΡ ΠΎΠΉ):body { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; } #footer { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅; }ΠΠ°ΠΊΠΈΠΌ Π±Ρ ΠΌΠ°Π»ΠΎΠ²Π΅ΡΠΎΡΡΠ½ΡΠΌ (ΠΈ Π±Π΅Π·ΡΠΌΠ½ΡΠΌ!) ΠΡΠ»ΠΎ Π±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π² Π²Π°ΡΠ΅ΠΌ ΡΠ΅Π»Π΅
ΠΊΠ°ΠΊ absolute , ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ»ΡΠΆΠΈΡ ΡΠ΅Π»ΠΈ: ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π΅ΡΠ½ΡΡΡ
#footer
ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ static ΡΡΠ°ΡΡΡ.Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ»ΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌΠΈ. ΠΠ·ΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠΌΠΈ ΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° ΡΠ²ΠΎΠΈΡ ΠΌΠ΅ΡΡΠ°Ρ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ. ΠΡΠ»ΠΈ Π²Ρ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ Π² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, Π²Ρ ΡΠ°ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ Β«ΡΡΠΎΠΏΠΊΡΒ» ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΠΎΠ»ΡΡΡΡ ΡΡΠΎΠΏΠΊΡ ΠΎΠ»Π°Π΄ΠΈΠΉ, ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Π½ΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π° Π² Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΠΊΡΡΠ½ΠΎΠΌ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ»Π±ΡΠ΅.
ΠΠ°Π΄Π½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π½Π΅ ΡΠ°ΠΊ ΡΠΊΡΡΠ½ΠΎ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ±Π»Π°Π·Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ....
Π₯ΠΎΡΠΈΡΠ΅ Π·Π°ΠΏΡΡΠ°ΡΡΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅? ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ, ΡΠ°ΠΊ ΠΈ ΡΡΡΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. Π‘Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΠ°ΡΡΡ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ ΠΈΠ½Π»Π°ΠΉΠ½.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎ Π±Π»ΠΎΡΠ½ΡΠΉ ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ .
ΠΠΎΠΉΠ΅Ρ ΠΏΠΈΡΠ΅Ρ:
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΏΡΠΈΡΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
: static
, - ΡΡΠΎ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ»ΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π½Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ.ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ΅Π΄ΠΊΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎ.ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ°ΠΊ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π·ΠΌΡΡΠ»Π΅Π½ΠΈΠΉ ΠΈ ΡΡΠΈΠ»ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ . Π§Π΅Π³ΠΎ-ΡΠ΅Π³ΠΎ?
ΠΠΎΠΉΠ΅Ρ ΠΏΠΈΡΠ΅Ρ:
ΠΡΠΎΡ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ±ΠΈΠ²Π°Π΅Ρ Ρ ΡΠΎΠ»ΠΊΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π±ΡΒ».
ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, ΠΌΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠΌ ΠΠ»ΡΡΠΎΠ½Ρ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΡΠΎ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠ½ Π½Π°Π·ΡΠ²Π°Π΅Ρ Β«Π½Π΅ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅ΡΠΌΠΈΠ½Π°ΠΌΠΈΒ».
ΠΠ»ΠΎΠΊ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°ΡΠ΅ΠΌ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ / ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ² top, right, bottom ΠΈ left. ΠΠΎ Π²ΠΎΡ ΡΠ»ΠΎΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ - ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΠ±ΠΊΠ° Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅! ΠΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΡΠ°ΠΌ, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ, ΠΈ Π·Π°ΠΉΠΌΠ΅Ρ ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ. ΠΡΠ»ΠΈ ΠΎΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡ Π΅Π³ΠΎ Π½Π° Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π΄ΡΡΠ°.
Π₯ΠΌΠΌΠΌΠΌ. ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΠΠ°Π»ΠΊΡ ΠΎΡΡ Π½Π°Π½Π΅ΡΡΠΈ ΡΠ΄Π°Ρ:
ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π°
position: static
, Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΡΠ»ΠΈΡΠΈΠ΅ΠΌ: Ρ ΠΎΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π΅Π³ΠΎ ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°.Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π΄Π΅ΡΡ - ΡΡΠΎ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ ΡΡΠΎ ΡΠ°ΠΊ (ΠΈ ΡΡΠΎ ΡΠ°ΠΊ Π½Π΅Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΡΠ±ΠΈΠ²Π°Π΅Ρ Ρ ΡΠΎΠ»ΠΊΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ), ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
position: relative
Π΄Π»Ρ ΡΡΠΎΠ»Π±ΡΠ°ΡΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². Π Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅ΠΉ ΡΠΎΡΠΌΠ΅, ΠΎΠ½ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠ°ΠΊ, Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΏΡΠ°Π²Π΄Π°? ΠΠΈΡΠΊΠΎΠ»ΡΠΊΠΎ. Π£ Π½Π΅Π³ΠΎ Π΅ΡΡΡ ΠΏΠΎΠ±ΠΎΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΌΠ½ΡΠ΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ Π΄Π°Π²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π² ΡΠ²ΠΎΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ°Ρ .ΠΠΎΠΌΠ½ΠΈΡΠ΅ ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ²Π΅ΡΡ Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ, ΠΈ ΡΠ»Π΅Π²Π°, ? ΠΠ½ΠΈ Β«Π²ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΒ» Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (Π΄ΡΠΌΠ°ΠΉΡΠ΅, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅) ΠΈΠ· Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ .ΠΠ°ΠΊ ΡΠ°ΠΊ?
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ Ρ:
#element { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; Π²Π΅ΡΡ : 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ Β«ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΒ» Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΎΡ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» Π±Ρ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΌΡ Π½Π΅ ΠΎΡΠΈΠ±Π»ΠΈΡΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
(ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ , ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ:
#element { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; Π²Π½ΠΈΠ·Ρ: -20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }, Ρ ΠΎΡΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΌΡ ΡΠ°ΠΊ Π½Π΅ ΠΏΠΎΡΡΡΠΏΠ°Π΅ΠΌ - ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·Π»ΠΈΡΠ½Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎ.
ΠΠ΅ΡΡ Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π·Π°ΠΈΠΌΠ½ΠΎ ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡΡΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, Π° ΡΠ°ΠΊΠΆΠ΅ Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ½ΠΈ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅, Π²Π΅ΡΡ Π½Π΅Π΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅, Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ.
ΠΡΠΎΡ ΠΊΠΎΠ΄:
#element { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; Π²Π΅ΡΡ : 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 60 ββΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ Ρ ΠΈ 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π° (ΠΈΠ»ΠΈ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΈ 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΏΡΠ°Π²Π°, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅).
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π’ΠΎΠΌΠΌΠΈ ΠΠ»ΡΡΠΎΠ½ ΠΏΠΈΡΠ΅Ρ:
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ
position: absolute
ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΌ Π½Π΅ Π±ΡΠ»ΠΎ. ΠΡΠΎ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π΅ΡΠ»ΠΈ ΠΌΡ Π½Π΅ ΡΠ±Π΅Π΄ΠΈΠΌΡΡ, ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΡΠ°ΠΊ.Π ΡΠΎΡΡΠ°ΡΡΠ½ΠΈΠΊ ΠΏΡΠ΅ΡΡΡΠΏΠ»Π΅Π½ΠΈΡ ΠΠ»ΡΡΠΎΠ½Π°, ΠΠΎΠ» Π'ΠΡΠ°ΠΉΠ΅Π½, Π΄Π°Π΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΡΡΠ°ΡΡΡ ΠΎ ΠΏΠΎΡΠΎΠΊΠ°Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΠ±ΠΎΡΠ½ΠΈΠΊ ΠΎΡΠΈΠ±ΠΎΠΊ, Π²ΡΠ·Π²Π°Π½Π½ΡΡ ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.
Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² - ΠΊΠ»ΡΡ ΠΊ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΡ ΠΊΠ°ΠΌΠ½Π΅ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ½ΠΎΠ³ΠΈΠ΅, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΠΏΡΡΠ½ΡΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΠΎΠ², ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΡΡΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌ. Π Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΡΡΠΎ Π΄Π°Π΅Ρ ΠΈΠΌ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ Ρ ΠΎΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Ρ ΠΎΡΠΈΡΠ΅, Ρ ΡΠΎΡΠ½ΠΎΡΡΡΡ Π΄ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ. ΠΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ ΡΠ°ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΡΡΠΎΠ»Π±ΠΈΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ ΡΠ΅ΡΡΠ΅Π·Π½ΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ².
ΠΠ°ΠΊ ΠΌΡ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, Π»ΡΠ±ΠΎΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² . ΠΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅ΡΡΡ ΡΠ²ΠΎΠΈΠΌ Π΄Π΅Π»ΠΎΠΌ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°ΡΡΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠ°ΠΊ ΠΏΠΈΡΠ΅Ρ Π’ΠΎΠΌΠΌΠΈ. ΠΡΠ²Π°ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ, Π½ΠΎ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΡΠΎ Π½Π΅ ΡΠΎΡ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½.
ΠΠ»ΠΈ, ΡΡΠΎ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΠ°Π΄Π½ΠΎ, Π²Π°ΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ. ΠΠΎΡΠΎΠΌ Π²Ρ ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΡΠ°Π½Π°, ΠΈ Π²ΡΠ΅ ΠΈΠ΄Π΅Ρ Π² Π³ΠΎΡΡΠΎΠΊ. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π΄Π°ΠΏΡΠΈΡΡΡΡΡΡ ΠΊ Π½ΠΎΠ²ΠΎΠΌΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ... Π½Π΅Ρ.
(Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΠΈΡ Π·Π½Π°ΡΡ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±Π΅Π· ΡΠΈΡΠΈΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΈΠ½Ρ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π΄Π»Ρ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ±Π·Π°Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΈΡΠΎΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΡΠΎ ΡΠ»ΠΎΠ²ΠΎ ΠΈ Π½Π΅ Π±ΠΎΠ»Π΅Π΅.Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈΠ»ΠΈ ΡΠ΅ΠΌ-ΡΠΎ Π΅ΡΠ΅. ΠΡΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΡΡΡ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ 100% ΡΠΈΡΠΈΠ½Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π·Π°Π±Π°Π²Π½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ Ρ ΡΡΠΈΠΌ.)
Π‘ΡΠΈΠ²Π΅Π½ ΠΡΡΠ΄Π»ΠΈ ΠΏΠΈΡΠ΅Ρ:
ΠΠ»ΡΡΠΎΠΌ ΠΊ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΈΡΡ ΠΎΠ΄Π½Π°Ρ ΡΠΎΡΠΊΠ°. ΠΡΠ»ΠΈ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΏΡΠ΅Π΄Π΅Π» ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²ΠΎΠΏΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π΄Π°ΡΡ, - ΡΡΠΎ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡΠΊΡΠ΄Π°.
ΠΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom, ΠΈ left , Π½ΠΎ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΈΠ½Π°ΡΠ΅, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.Π§Π΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΡΡΡΠ΅Ρ ΠΊΡΠ°Π΅Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Β«Π±ΠΎΠΊΡΒ». ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ ΠΈΠ»ΠΈ em (ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅, ΠΌΠ΅Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅) Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ². ΠΡ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ, Π½ΠΎ ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ - Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π²Π΅ΡΡ Π° ΠΈ Π½ΠΈΠ·Π° ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ° , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ , Π° Π΄Π»Ρ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ - ΠΊ ΡΠΈΡΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ° , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ .
Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, Π²ΡΡ ΠΈΠ΄Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΅ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ»ΠΎΠΆΠ½ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ Π±Π»ΠΎΠΊΠ° , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊ .ΠΡΠΈΡΡΠ΅Π³Π½ΠΈΡΠ΅ ΠΏΠ°Π½ΡΠ°Π»ΠΎΠ½Ρ ΠΈ ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΡΡΠ΅ΡΡ ΠΊ ΠΏΠΎΠ΅Π·Π΄ΠΊΠ΅ ....
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ
ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π±Π»ΠΎΠΊΠ° , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊ , ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π½ΠΎ ΡΡΠΎ ΠΊΠ»ΡΡΠ΅Π²Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΡΡΠΈΠΌ ΠΏΡΡΠΌΠΎ Π·Π΄Π΅ΡΡ. Π’ΠΎΠΌΠΌΠΈ ΡΠΈΡΠΈΡΡΠ΅Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS 2.1:
.ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ Β«position: absoluteΒ», ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ Ρ Β«ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌΒ» Β«absoluteΒ», Β«relativeΒ» ΠΈΠ»ΠΈ Β«fixedΒ»... ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π½Π΅Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ.
Π§ΡΠΎ, ΡΠ΅ΡΡ Π²ΠΎΠ·ΡΠΌΠΈ, ΡΡΠΎ Π·Π½Π°ΡΠΈΡ? ΠΡΠΈ ΡΠ΅ΠΌ ΡΡΡ ΠΌΠΎΠΈ ΠΏΡΠ΅Π΄ΠΊΠΈ? ΠΠ°Π±ΡΡΠΊΠ°, ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅ΡΡ ΠΌΠΎΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ?
Π ΡΡΠ°ΡΡΡΡ, Π±Π°Π±ΡΡΠΊΠ° Π² ΡΡΠΎΠΌ Π½Π΅ ΡΡΠ°ΡΡΠ²ΡΠ΅Ρ.
ΠΠ»ΠΎΠΊ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ-Β«ΠΏΡΠ΅Π΄ΠΊΠΎΠΌΒ», ΡΠΊΠ°ΠΆΠ΅ΠΌ,
#body
ΠΈΠ»ΠΈ#div
, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ.ΠΡΠ»ΠΈ ΠΈΡ Π½Π΅Ρ, Π±Π»ΠΎΠΊ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ , ΠΏΠΎ ΡΡΡΠΈ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌhtml
. Π’ΠΎΠΌΠΌΠΈ ΠΏΠΈΡΠ΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΠΎ:ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π½Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΌΠΈΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΠΎΡ Π±ΡΡΡΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠ΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅.
Div
#whatever
ΡΠΎΠ·Π΄Π°Π΅Ρ Π±Π»ΠΎΠΊ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ Π°Π±Π·Π°ΡΠ°.Π ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρp
ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° Β«ΠΠ΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅Β».ΠΠ΄ΠΈΠ½ ΠΈΠ· ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠ°ΡΠ°Π΄ΠΈΠ³ΠΌΡ Π±Π»ΠΎΠΊΠ° , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ , Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ.
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ "ΠΏΡΠ΅Π΄ΠΎΠΊ" ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π° ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ.ΠΠ»ΠΎΠΊ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ , Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠΉ ΠΊ Π½Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ
: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
, ΠΎΠ½ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ Β«ΠΏΠΎΡΠΎΠΌΠΊΠ°Β» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΡΠΎ:ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;ΠΈΠΌΠ΅Π΅Ρ Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π² 10 ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ° , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊ .
ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Internet Explorer 5 ΠΈ 6 Π² Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΠΎΠ΄Π°Π²Π»ΡΡΡΡΡ ΡΡΠΈΠΌ. Π’ΠΎΠΌΠΌΠΈ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ:
Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΠΌ Ρ CSS2, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π²ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π½Π°ΡΠ΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, IE5 / 6 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΌΠΈΡΠ΅ Π½Π°ΠΌ ΡΠ°ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ΄Π½Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ (Π²Π΅ΡΡ Π½ΡΡ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΡΡ) ΠΈ ΠΎΠ΄Π½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ (Π»Π΅Π²ΡΡ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΡΡ), Π° Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΈ, ΠΈΠ½ΠΎΠ³Π΄Π°, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²ΡΡΠΎΡΡ.ΠΡΠΈ ΠΎΡΠΈΠ±ΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ . Π IE5 / 6 ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π½Π΅ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, Π° ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ Π±Π»ΠΎΠΊΡ. ΠΠ°ΠΊ ΠΌΡ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΡΡΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄Π²Π΅ ΠΎΡΠ΅Π½Ρ ΡΠ°Π·Π½ΡΠ΅ Π²Π΅ΡΠΈ. ΠΡΠΎΡΠ΅Π½Ρ ΠΎΡΠΈΠ±ΠΎΠΊ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² Opera, Π²ΠΏΠ»ΠΎΡΡ Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 8. ΠΠ½ΠΈ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Ρ Π² Opera 9.
Π― Π½Π΅ ΠΎΡΠΎΠ±ΠΎ Π±Π΅ΡΠΏΠΎΠΊΠΎΡΡΡ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ°Ρ Π² ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ Π²Π΅ΡΡΠΈΡΡ Opera (ΠΈ Firefox), ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ ΡΠ²ΠΎΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π² ΠΎΡΠ΅Π½Ρ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΡΡΠΎΠΊΠΈ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΏΡΡΠΊΠ° Π½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Internet Explorer, Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, Π·Π°ΡΡΡΠ΅Π²Π°ΡΡ Π½Π° ΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΈΡ ΠΊΠΎΠΏΠΈΠ΅ΠΉ Windows, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΊΡΠΏΡΡ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, Π½Π΅ ΠΎΠ±Π½ΠΎΠ²ΡΡ ΡΠ²ΠΎΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΈΠ»ΠΈ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΈΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° , ΠΎΠ½ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΡΠΉ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ . ΠΠ°ΠΉΠΊ Π₯ΠΎΠ»Π» ΠΏΠΈΡΠ΅Ρ: Β«Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΒ« ΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ Β»ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ. "ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ , ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ, ΠΎΠ½ Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΡΠΉ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ , Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊ . Π₯ΠΎΠ»Π». ΡΠ½ΠΎΠ²Π°: Β«ΠΡΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ, Π΅Π³ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ ΡΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ². ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.Β«
ΠΡΠ΅ ΠΎΠ΄Π½Π° Π²Π΅ΡΡ: Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² top, right, bottom ΠΈ left, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ
auto
:ΡΠ»Π΅Π²Π°: Π°Π²ΡΠΎ;ΠΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» Π±Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΊΠ°ΠΊ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ, ΡΠΎ Π΅ΡΡΡ static , ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.
ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ±ΠΈΠ²Π°Π΅Ρ Ρ ΡΠΎΠ»ΠΊΡ; Π― ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π²Π°ΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ, ΠΏΡΠΎΡΠΈΡΠ°Π² ΡΡΠ°ΡΡΡ Π’ΠΎΠΌΠΌΠΈ ΠΠ»ΡΡΠΎΠ½Π°, ΠΎΠ±ΡΡΡΠ½ΡΡΡΡΡ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ.
ΠΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π―Π½ ΠΠ»ΠΎΠΉΠ΄ Π΄Π°Π΅Ρ Π½Π°ΠΌ ΠΈΠ·ΡΡΠ½ΡΠΉ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ΄ΠΈΠ½ Π² Π΄ΡΡΠ³ΠΎΠΉ.
ΠΡΠ»ΠΈ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ Ρ ΠΈ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π°:
#redblock { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΈ Π²Π½ΡΡΡΡ.
ΠΠΎΡ HTML-ΠΊΠΎΠ΄:
(ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ div Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.)
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΆΠ΅Π»ΡΠ°Ρ ΡΠ°ΠΌΠΊΠ° ΠΏΠΎΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π²Π½ΡΡΡΠΈ Π½Π°ΡΠ΅ΠΉ ΠΊΡΠ°ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΈ.
ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π·Π°Ρ ΠΎΡΠ΅ΡΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΆΠ΅Π»ΡΡΡ ΡΠ°ΠΌΠΊΡ Π½Π° 220 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΈ 220 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΡΡΡΡ. ΠΡ ΠΎΡΠΈΠ±Π°Π΅ΠΌΡΡ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π±Π»ΠΎΠΊ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ID
#yellowblock
, Π²Π½ΡΡΡΡ Π±Π»ΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ID#redblock
.ΠΠΎΡ ΡΠ°ΠΊ:ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ div
#yellowblock
Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, div#redblock
.ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²Π΅ .
Π’Π΅ΠΏΠ΅ΡΡ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ Π·Π°ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ, ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ CSS
#yellowblock
. ΠΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΠΆΠ΅Π»ΡΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΈ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π° ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ ΠΈ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΡΠΈΡΠΈΠ½Ρ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ:#yellowblock { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΆΠ΅Π»ΡΡΠΉ; ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ; ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΎΡΡΡΡΠΏ: 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π―Π½Π°.
ΠΡΠ»ΠΈΡΠ½ΠΎ, Π΄Π°? Π―Π½ ΠΠ»ΠΎΠΉΠ΄ Π΄Π°Π» Π½Π°ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ Ρ ΠΊΠΎΠ΄ΠΎΠΌ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΏΡΡΡΠΎΠΉ ΡΠ°ΠΉΠ» HTML). ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ
#yellowbox
ΠΈ Π²ΡΡΠΎΡΡ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΠ²Π΅ΡΠ΅Π»ΠΈΡΡ Ρ ΡΡΠΈΠΌ.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ²
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS - ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π½ΡΡΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠΎ ΡΡΡΠΈ, ΠΊΠ»ΡΡΠΎΠΌ ΠΊ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡ ΡΠ΅Π±Ρ Π²Π½ΡΡΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π° Π½Π΅ ΡΠ΅Π»Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΠΏΡΠΎΡΡΠ°Ρ, Π½ΠΎ ΠΊΠ»ΡΡΠ΅Π²Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠΈΡΡΠ½ΠΊΠ΅ (Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΡΠΊΡΠΈΠ½ΡΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΠ΄Π΅Π»Π°Π», ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ, Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ° ΠΡΠΈΡΠ° ΠΠΎΠΉΠ΅ΡΠ°), ΠΏΠΎΠΊΠ°Π·Π°Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Ρ ΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ ΠΈ ΡΡΠ΅ΠΌΡ ΠΌΠ΅Π½ΡΡΠΈΠΌΠΈ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²Π½ΡΡΡΠΈ.ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, Π° ΠΌΠ΅Π½ΡΡΠΈΠ΅ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠΌΠΈ Π½Π° ΡΠ½ΠΈΠΌΠΊΠ΅ ΡΠΊΡΠ°Π½Π°.
ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΡΠ°ΡΡΡΡ Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΡΡΡΡ ΠΊ ΠΎΠΊΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΈΠ»ΠΈ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅).
ΠΠΎΠΉΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π°Π³Π»ΡΠ΄Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΡΡΠ½ΡΡ Π΅Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠ»ΠΈ Π²Ρ Π²ΡΡΡΠ½ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π²Ρ Π² Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ . (ΠΠ°ΠΉΠΊ Π₯ΠΎΠ»Π» Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΊΠ»Π°ΡΡΠΈΡΠΈΡΠΈΡΡΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π²Π°ΡΠΈΠ°Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ). Π‘Π°ΠΌΠ°Ρ Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°Π·Π½ΠΈΡΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±Π»ΠΎΠΊ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ , Π²ΡΠ΅Π³Π΄Π° , Π²ΡΠ΅Π³Π΄Π° Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ - ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ
html
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²Π΅ΡΡ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. Π‘Π²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left Π²ΡΠ΅Π³Π΄Π° ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°) ΠΈΠ»ΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠ΅ΡΠ°ΡΠΈ, Π½Π° Π±ΡΠΌΠ°Π³Ρ.ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΡΠ°Π±Π»ΠΈΡΠ°Ρ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠ΅ΡΠ°ΡΠΈ .
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ. ΠΠ΅ΡΠΈΠΎΠ΄. ΠΡΠ»ΠΈ Π²Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΡ Π΅ΠΌΠ°ΠΌΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ (Π²ΠΎΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡ Π³ΡΡΡ CSS Π‘ΠΎΡ Π’Π°Π½Π°ΠΊΠΈ, Π° Π·Π΄Π΅ΡΡ Π³Π»Π°Π²Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ), ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ.
ΠΠΎΠΉΠ΅Ρ ΠΏΠΈΡΠ΅Ρ:
ΠΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΎΠΊΠ½Π°, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΡΡΡΠ΅ΠΊΡ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ Π½Π° ΡΡΠ°ΡΡΠ΅ ΡΠΊΠΎΠ»ΡΠ½ΡΠ΅ Β«ΡΠ°ΠΌΠΊΠΈΒ».
ΠΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Π² Internet Explorer 5/6 Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
position: fixed;
. ΠΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π²Ρ Π½Π΅ ΡΠ°ΡΡΠΎ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΅Π³ΠΎ.(ΠΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ, ΠΊΡΠΎΠΌΠ΅ ΠΌΠ΅Π½Ρ, ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ "ΠΎΠ±ΡΠ°ΡΠ½ΡΠ΅ ΡΠ²ΡΠ·ΠΈ" ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ?)
Π‘Π°ΠΉΡ Bluelounge ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Π»Π΅Π²ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π½ΠΈΠ· Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅.
Coyier ΠΏΠΈΡΠ΅Ρ Π½Π° ΡΠ°ΠΉΡΠ΅:
ΠΡΠΎΡ ΡΠ°ΠΉΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ [ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ], ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΊΠ°ΠΊ Ρ ΠΎΡΠΎΡΠΈΠ΅, ΡΠ°ΠΊ ΠΈ ΠΏΠ»ΠΎΡ ΠΈΠ΅ ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.ΠΠ»ΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»ΠΎΡ ΠΎ ΡΠΎ, ΡΡΠΎ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ° ΠΌΠΎΠ΅ΠΌ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΌ Π½ΠΎΡΡΠ±ΡΠΊΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΠ±ΡΠ΅Π·Π°Π½, ΠΈ Ρ ΠΌΠ΅Π½Ρ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π½ΠΈΠ·, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. Π’Π°ΠΊΠΆΠ΅, Π΅ΡΠ»ΠΈ Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π΄ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°, ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°, Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΠΌΠ½Π΅ Π²ΡΠ΅ ΡΡΠΎ Π²ΠΈΠ΄Π΅ΡΡ. ΠΠ»Π°ΡΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π΅Π½, Π½ΠΎ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ.
Z-ΠΈΠ½Π΄Π΅ΠΊΡ
ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π²ΠΏΠΎΠ»Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ Ρ Π²Π°Ρ Π΅ΡΡΡ Β«Π±Π»ΠΎΠΊΠΈΒ» Π΄ΡΡΠ³ Π½Π°Π΄ Π΄ΡΡΠ³ΠΎΠΌ Π² ΡΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ: ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ.ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Β«ΡΠ²Π΅ΡΡ ΡΒ» Π½Π° Π½Π°ΡΠ΅ΠΌ Π΄ΠΈΡΠΏΠ»Π΅Π΅, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index .
(ΠΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.)
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ z-index - ΡΡΠΎ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π° ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . (ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΡΠΊΠΎΡΠΈΡΡ ΠΊ ΠΈΠ·ΡΡΠ½ΠΎΠΉ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ ΠΊΠΎΡΠΎΠ±ΡΠ°ΡΠΎΠΉ ββΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΡΠ΅ΠΉΠ³Π° ΠΡΠΊΠ°, ΡΡΠΎΠ±Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.)
ΠΠ°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΠ°ΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ W3C, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΠΏΠΎΠ½ΡΡΡ z-index:
Π CSS 2.1, ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π²Π΄ΠΎΠ»Ρ Β«ΠΎΡΠΈ zΒ» ΠΈ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
Π£Ρ , ΠΌΠ½Π΅ Π½Π΅ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΡΠΎΠΊΡΠ°ΡΠ°ΡΡ Π²ΡΠ΅ ΡΡΠΈ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ ... Π― ΠΏΠΎΠ·Π²ΠΎΠ»Ρ Π’ΠΎΠΌΠΌΠΈ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΡΠΎ ΡΠ½ΠΎΠ²Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΅Π³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π³Π»ΡΠ±ΠΆΠ΅ ΠΌΠΎΠ΅Π³ΠΎ:
ΠΠΊΡΠ°Π½ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° (Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ) Π΄Π²ΡΠΌΠ΅ΡΠ½ΡΠΉ. ΠΡΠΎ ΠΏΠ»ΠΎΡΠΊΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΡΠΈ CSS-Π±Π»ΠΎΠΊΠΈ.ΠΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ CSS ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ . ΠΡΠΈ X ΠΈ Y ΡΠ²Π»ΡΡΡΡΡ Π½Π°ΡΠΈΠΌΠΈ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΎΡΡΠΌΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΡ Z ΠΏΠ΅ΡΠΏΠ΅Π½Π΄ΠΈΠΊΡΠ»ΡΡΠ½Π° ΡΡΠΈΠΌ Π΄Π²ΡΠΌ. ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΡΠΌΠΎ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΡΡ ΠΈ Π·Π°Π΄Π½ΡΡ ΡΠ°ΡΡΡ ΡΠΊΡΠ°Π½Π°. Π§Π΅ΠΌ Π²ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index, ΡΠ΅ΠΌ Π±Π»ΠΈΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠ΅ΠΊΠ° .
Π’ΠΎΠΌΠΌΠΈ Π½Π΅ Π²Π΄Π°Π²Π°Π»ΡΡ Π² ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΠΎ ΡΡΠΎΠ²Π½ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ , Π·Π° ΡΡΠΎ, Ρ ΠΏΠΎΠ»Π°Π³Π°Ρ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π±ΡΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½Ρ.ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π·Π½Π°ΡΠΈΡΡ Β«ΡΡΠΎΠ²Π΅Π½Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡΒ» - ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° Π² ΡΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡΡ - Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index .
Π― ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ Π±Π΅Π·Π·Π°ΡΡΠ΅Π½ΡΠΈΠ²ΠΎ ΡΠΊΡΠ°ΡΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π’ΠΎΠΌΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ. Π£ΡΠΈΡΡΠ²Π°Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ HTML-ΠΊΠΎΠ΄:
............ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS:
#first { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; } #ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; }ΠΠ±Π° Π±Π»ΠΎΠΊΠ° ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°.Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΠ½ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ Π±Π»ΠΎΠΊΠΈ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ Π΄Π»Ρ Π»ΡΠ±ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Β«Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ Β» ΠΈΠ»ΠΈ Β«Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ Β» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ Β«Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅Β» Π±Π»ΠΎΠΊΠΈ div ( a, b, c, ΠΈ d ) ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ΅ΡΡΡΠ΅Ρ Π±ΡΠΊΠ²Π΅Π½Π½ΡΡ div, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ z-index . ΠΠ°ΠΊ ΡΠ°ΠΊ:
#a { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 4; } #b { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 3; } #c { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; } #d { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; }ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ a div ΠΈΠΌΠ΅Π΅Ρ Π½Π°ΠΈΠ²ΡΡΡΠΈΠΉ (ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½Π°ΠΈΠ²ΡΡΡΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ) Π½ΠΎΠΌΠ΅Ρ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Β«ΡΠ²Π΅ΡΡ ΡΒ» Π² ΡΡΠ΅ΠΊΠ΅.Div d Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ Β«Π½ΠΈΠΆΠ½ΠΈΠΌΒ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΡΠΈΡΠ»Π° Π½Π΅ Π²Π°ΠΆΠ½Ρ - Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
#a { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 9999; } #b { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 100 } #c { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 10; } #d { z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; }Π’ΠΎΠΌΠΌΠΈ Π΄Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ:
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.ΠΠΎ ΡΡΠΎ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ next ΠΈΠ»ΠΈ c ΡΠΊΠΎΠ»ΡΠ·ΠΈΠ»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ a ΠΈ b? Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΌ Π½Π΅ ΠΏΠΎΠ²Π΅Π·Π»ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ next ΠΈ c ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π² ΡΠ°Π·Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠ΅ΠΌ a ΠΈ b, ΠΈ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ Π΄Π²ΡΠΌΡ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΅ΡΠ΅Π΄ΠΎΠ²Π°ΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ b Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ a, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ a ΠΈ b ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π·Π½Π°Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π²Π°ΠΆΠ΅Π½ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ z-index.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΠ»Π° Π² Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ z-index , ΡΡΠΈ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΠ²ΡΡΡΡ ΠΏΠΎΠ·Π°Π΄ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΈΠΌΠ΅ΡΡ Π»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ z-index ΠΈΠ»ΠΈ Π½Π΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Ρ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½ΠΈΠΆΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ:
z-ΠΈΠ½Π΄Π΅ΠΊΡ: -9999;ΠΠ΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΡΠΈ ΠΠ°Π·Π°ΡΠΈΡ Π΄Π°Π΅Ρ Π½Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ z-index Π² ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Smashing Magazine, Π²ΠΊΠ»ΡΡΠ°Ρ Π²Π·Π³Π»ΡΠ΄ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ z-index Ρ JavaScript, ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Ρ IE ΠΈ Firefox ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ²ΠΎΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index .
Π Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π’ΠΈΠΌ ΠΠ°Π΄Π»Π΅Ρ Π³Π»ΡΠ±ΠΆΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Β«Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡΒ» Ρ ΠΏΠΎΠΌΠΎΡΡΡ z-ΠΈΠ½Π΄Π΅ΠΊΡΠ°.
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎ-ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index , ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠΊΡΠΈΠ½ΠΊΠ°ΡΡ ΠΡΠΈΡΠ° ΠΠΎΠΉΠ΅ΡΠ°, ΠΎΠ·Π°Π³Π»Π°Π²Π»Π΅Π½Π½ΡΠΉ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, Β«ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ z-indexΒ».
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅
Π₯ΠΎΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ ΡΡΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
vertical-align
ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°Π±Π»ΠΈΡΠ°Ρ , Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ :
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ Π±Π»ΠΎΡΠ½ΡΡ ΠΈ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ .
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π°
div
Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎdiv
.ΠΠΎ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΡΡΠ½ΡΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ, Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ΅ΡΡΡΡ - ΡΠΎΡΡΠΈΡΠ°ΠΉΡΠ΅, Π΄Π΅ΡΡΡΡ - Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄ΠΎ
Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ
:
- Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
- ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΠΈΠΊ
- ΡΡΠΏΠ΅Ρ
- Π²Π΅ΡΡ
- ΡΠ΅ΠΊΡΡ Π²Π²Π΅ΡΡ Ρ
- ΡΡΠ΅Π΄Π½ΠΈΠΉ
- Π½ΠΈΠ·
- Π½ΠΈΠΆΠ½ΠΈΠΉ ΡΠ΅ΠΊΡΡ
- Π΄Π»ΠΈΠ½Π°
- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
Π ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊΠ΅ SitePoint Π’ΠΎΠΌΠΌΠΈ ΠΠ»ΡΡΠΎΠ½ ΠΈ ΠΠΎΠ» Π'ΠΡΠ°ΠΉΠ΅Π½ Π΄Π°ΡΡ Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ :
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Ρ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Π΅Ρ ΠΈΠ»ΠΈ ΠΎΠΏΡΡΠΊΠ°Π΅Ρ (Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΠΊΠ°) ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅.
ΠΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Π΅Ρ ΠΈΠ»ΠΈ ΠΎΠΏΡΡΠΊΠ°Π΅Ρ (Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΠΊΠ°) ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΊ Π²ΡΡΠΎΡΠ΅ ΡΡΡΠΎΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ»Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ² Π±Π°Π·ΠΎΠ²Π°Ρ Π»ΠΈΠ½ΠΈΡ - ΡΡΠΎ Π±Π°Π·ΠΎΠ²Π°Ρ Π»ΠΈΠ½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅. ΠΡΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π»ΡΠ±Π΅Π·Π½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΎ Π²Π΅Π±-Π½ΠΈΠ½Π΄Π·Ρ ΠΡΠΈΡΠΎΠΌ ΠΠΎΠΉΠ΅ΡΠΎΠΌ. ΠΠΎΡΠ΅ΡΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠ°ΠΉΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΉ.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ΄ΠΎΠΌ Ρ ΡΡΡΠΎΠΊΠΎΠΉ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎΡ ΡΠ°ΠΉΡ:
Π‘Π»Π΅Π²Π° ΠΎΡ ΡΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π΅ΡΡΡ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΠΉ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ Π·Π½Π°ΡΠΎΠΊ CSS.
Π― Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
vertical-align
, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΎΡΠΎΡΠΎ (Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄) ΡΠΈΠ΄ΠΈΡ ΡΡΠ΄ΠΎΠΌ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Ρ Π΄Π΅ΠΉΡΡΠ²ΡΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ .ΠΡΡ ΠΎΠ΄Π½ΡΠΉ
ΠΠ»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°
baseline
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΊΡΠ°Π΅ΠΌ ΡΠ΅ΠΊΡΡΠ° (Π° Π½Π΅ Ρ Π½ΠΈΠΆΠ½ΠΈΠΌΠΈ Π½ΠΈΠΆΠ½ΠΈΠΌΠΈ ΡΠ°ΡΡΡΠΌΠΈ, ΠΊΠ°ΠΊ Π½ΠΈΠΆΠ½ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ p ΠΈΠ»ΠΈ q .Π‘ΡΠ΅Π΄Π½ΠΈΠΉ
ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΡΠ°Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΌΠ΅ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΈΠ»ΠΈ ΡΠ΅Π½ΡΡΠ° ΡΠ΅ΠΊΡΡΠ°. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΠ΅ Π·Π½Π°ΡΠΎΠΊ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ Π°Π±Π·Π°ΡΠ°, ΠΈ ΠΎΠ½ Π²ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π²ΠΈΠ³Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π²Π½ΠΈΠ·, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ.
ΠΠΈΠΆΠ½ΠΈΠΉ ΡΠ΅ΠΊΡΡ
Π‘Π°ΠΌΠΎΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ baseline
ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ
text-bottom
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ°ΠΌΠΎΠΉ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠΎΡΠΊΠΎΠΉ ΡΠ΅ΠΊΡΡΠ°: Π½ΠΈΠΆΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ p ΠΈΠ»ΠΈ q .Π’Π΅ΠΊΡΡ Π²Π²Π΅ΡΡ Ρ
ΠΠΎΠ»Π½Π°Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΡΡΡ
text-bottom
,text-top
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ°ΠΌΠΎΠΌΡ Π²Π΅ΡΡ Ρ ΡΠ΅ΠΊΡΡΠ°: ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ Π·Π°Π³Π»Π°Π²Π½ΠΎΠΉ T ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ Π±ΡΠΊΠ².ΠΠ΅ΡΡ ΠΈ Π½ΠΈΠ·
ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΠΊΡΠ°Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ - ΡΠ΅ΠΊΡΡΠ°, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ. Π. ΠΠΎΠΉΠ΅Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ:
ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π±ΡΠ»ΠΎ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΠΈ ΠΎΠ±Π° Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ Π² ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, ΠΈΡ Π²Π΅ΡΡ (ΠΈΠ»ΠΈ Π½ΠΈΠ·) Π²ΡΡΠΎΠ²Π½ΡΠ»ΡΡ Π±Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°.
Sub ΠΈ super
ΠΡΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π²Π΅ΡΡ Π½ΠΈΠΉ ΠΈΠ½Π΄Π΅ΠΊΡ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅ (ΠΈΠ»ΠΈ Π²ΡΡΠ΅) ΡΠ΅ΠΊΡΡΠ°.
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΠΌΡΡΠ»ΠΈ
Tommy ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π½Π°ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ΅ΠΉ Π²ΡΠ΅ ΡΡ Π΅ΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² ΡΠΎΠΌ ΠΆΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ IE 5/6 Π½Π΅ ΡΠ²ΠΈΠ΄ΡΡ Π΅Π³ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ»ΠΎΠΌΠ°Π½Ρ. ΠΠ°ΠΉΠΊ Π₯ΠΎΠ»Π» ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².Π‘ΠΎΡΡΡΠ΄Π½ΠΈΠΊΠΈ Onyx Design ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΈΠ»Π»ΡΡΡΡΠΈΡΡΡΡΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠΈΡΠ΅Ρ-ΠΠΎΠ» ΠΠΎΡ Π΄Π°Π΅Ρ ΠΊΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΡΠΏΠ»Π΅Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ Π²Π½ΠΈΠ· Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΡΠ°ΡΡΠΈ).
Π Π°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Β· ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ WebPlatform
Π‘Π²ΠΎΠ΄ΠΊΠ°
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠ° ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²ΡΠΎΡΡΡ ΠΏΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°
position
-absolute
ΠΈfixed
.ΠΠ΅ΡΠ²Π°Ρ ΠΏΠ°ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ -ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ
ΠΈΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
- ΡΠ΅ΡΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½Ρ, ΠΈ ΠΌΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΈΡ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅.ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π° Π½ΠΈΠΌΠΈ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΏΡΠ΅Π΄ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ. ΠΠ½ΠΎΠ³Π΄Π°, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΡΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ - ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, Π½ΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π½ΡΠΆΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ!
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΎΡΠΌΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ; ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΊΡΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° / Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°; Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ, ΠΎΠ½ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
absolute
ΠΈfixed
, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΠΈΡΡΠ»Π΅Π΄ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ z-index.ΠΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π²ΡΠ΅ ΡΡΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²Π°ΠΆΠ½ΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ - ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ².
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΡ Π±Π»ΠΎΠΊΠΈ
ΠΠ°ΠΆΠ½ΡΠΌ ΠΏΠΎΠ½ΡΡΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ: Π±Π»ΠΎΠΊ Π±Π»ΠΎΠΊΠ°, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΠ»Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Π±Π»ΠΎΠΊΠΎΠ², ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ°, Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ , ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ . ΠΠΎΠ΄ Β«ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΒ» ΠΌΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
position
ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π°relative
,absolute
ΠΈΠ»ΠΈfixed
- Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π²ΡΠ΅, ΠΊΡΠΎΠΌΠ΅ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΡΠ°ΠΊ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ
position: relative
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠ° (Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²), Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π»ΠΈ ΠΎΠ½ΠΈ ΡΡΠ°Π·Ρ ΠΏΠΎΠ΄ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ.ΠΡΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ - ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌΒ», ΡΡΠΎ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΠΏΡΠΈΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
html
.ΠΡΠ»ΠΈ Π²Ρ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°; Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠ΅ΡΠ°ΡΠ°Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΡΠΎΠ³ΠΎ - ΠΎΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΈΠΌΠ΅ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΈΡ Π±Π»ΠΎΠΊΠ°.
ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΡΠΌΠΌΠΈΡΡΠ΅ΠΌ ΡΡΠΎ Π² Π²ΠΈΠ΄Π΅ Π½Π°Π±ΠΎΡΠ° ΠΏΡΠΎΡΡΡΡ ΡΠ°Π³ΠΎΠ² - ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ
: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
, ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ:
- ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° - ΠΈΠΌΠ΅Π΅Ρ Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
position
ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
,Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΈΠ»ΠΈΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
?- ΠΡΠ»ΠΈ Π΄Π°, ΡΠΎ Π²Ρ Π½Π°ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ.
- ΠΡΠ»ΠΈ Π½Π΅Ρ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠΈΡΠ΅, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΡΠ°Π³Π° 1, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠ»ΠΈ Π½Π΅ ΠΈΡΡΠ΅ΡΠΏΠ°Π΅ΡΠ΅ ΠΏΡΠ΅Π΄ΠΊΠΎΠ².
- ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΎΡΡΠΈΠ³Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
html
, Π½ΠΎ Π½Π΅ Π½Π°ΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρhtml
.ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - ΡΡΠΎ ΠΎΡΠΎΠ±Π°Ρ ΡΠΎΡΠΌΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΈΠ·ΡΡΠΈΠΌ ΡΡΠΎ ΠΏΠΎΠ·ΠΆΠ΅ ΠΈ ΡΠΊΠΎΠ½ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌΡΡ Π·Π΄Π΅ΡΡ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅. ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠΎΠ³Π΄Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅ΡΠΌΠΈΠ½ Β«Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉΒ» Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° ΠΈ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΡΠ°ΡΡΠΈ, Ρ Π±ΡΠ΄Ρ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° ΠΎΠ±Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ
: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅
ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
.Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π²Ρ ΡΠ·Π½Π°Π»ΠΈ, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°
Π²Π΅ΡΡ Π½ΠΈΠΉ
,ΠΏΡΠ°Π²ΡΠΉ
,Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈΠ»Π΅Π²ΡΠΉ
ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ΅ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π½ΠΎ ΡΠΏΠΎΡΠΎΠ± ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³ΠΎΠΉ.ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π² ΡΠ»ΡΡΠ°Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ½ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΡΠ°ΠΊ ΡΡΠΎ
top: 1em
ΠΈbottom: -1em
ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅, ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π° ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎtop
ΠΈbottom
(ΠΈΠ»ΠΈΡΠ»Π΅Π²Π°
). ΠΈΡΠΏΡΠ°Π²Π°
) Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΎ.ΠΡΠΈ ΡΠΎΡΠΊΠΈ Π½Π΅Π²Π΅ΡΠ½Ρ Π² ΡΠ»ΡΡΠ°Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π΅ΡΡ Π²ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡΠ³Π»ΠΎΠ² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° - ΡΠΊΠ°ΠΆΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ
Π²Π΅ΡΡ Π½ΠΈΠΉ
ΠΈΠ»Π΅Π²ΡΠΉ
- Π° Π·Π°ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡΠΈΠ½Ρ
ΠΈΠ²ΡΡΠΎΡΡ
(ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΠΈΡΠΈΠ½Π°
ΠΈΠ²ΡΡΠΎΡΠ°
, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» ΡΠΏΠ°ΠΊΠΎΠ²Π°Π½ Π² ΡΠ΅ΡΠΌΠΎΡΡΠ°Π΄ΠΎΡΠ½ΡΡ ΠΏΠ»Π΅Π½ΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ).Microsoft Internet Explorer Π²Π΅ΡΡΠΈΠΈ 6 ΠΈ ΡΡΠ°ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅Ρ ΠΊΡΠ°Π΅Π², Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ³Π»Π° ΠΏΠ»ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ.
/ * ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE6 * / #foo { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 3em; ΡΠ»Π΅Π²Π°: 0; ΡΠΈΡΠΈΠ½Π°: 30em; Π²ΡΡΠΎΡΠ°: 20em; } / * ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE6 * / #foo { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 3em; ΡΠΏΡΠ°Π²Π°: 0; Π²Π½ΠΈΠ·Ρ: 3em; ΡΠ»Π΅Π²Π°: 0; }
ΠΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²
Π²Π΅ΡΡ Π½ΠΈΠΉ
,ΠΏΡΠ°Π²ΡΠΉ
,Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈΠ»Π΅Π²ΡΠΉ
, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΎΡ ΠΊΡΠ°Π΅Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΠΈΠΌ , ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ°.ΠΡΠΎ Π½Π΅ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,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 ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ - Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π²Π΅ΡΡ Π½ΡΡ ΠΈ Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ, ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅Ρ.ΠΡΠΎΡΠ°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ Π²Π΅ΡΡ - Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠ° Π½Π΅ Π΄Π²ΠΈΠ³Π°Π»Π°ΡΡ.ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²
ΡΠ²Π΅ΡΡ Ρ
,ΡΠΏΡΠ°Π²Π°
,ΡΠ½ΠΈΠ·Ρ
ΠΈΡΠ»Π΅Π²Π°
-auto
, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΠ»Π΅ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ, Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡΠ»ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ΄Π°Π»Π΅Π½ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ°, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π° Π½ΠΈΠΌ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ - Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡΡΡ Π½Π° ΡΡΠΎ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΠΌΠ΅Π½Ρ, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠΌ 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
, Π° Π½Π΅ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠΆΠ°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ, Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°
left
ΠΈright
, ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎwidth
. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ Π²ΡΡΠΎΡΡ, Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Π²Π΅ΡΡ Π½ΠΈΠΉ
ΠΈΠ½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠ²ΡΡΠΎΡΠ°
.ΠΡΠ±ΠΎΠ΅ ΠΈΠ· ΡΡΠΈΡ ΡΠ΅ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ .ΠΡΠΎΡΠ΅Π½ΡΡ ΠΏΠΎ ΡΠ°ΠΌΠΎΠΉ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ΅ΠΌΡ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΠ»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²
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
ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, Π²Ρ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΠ΅ Π΅ΠΌΡ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° Β«ΠΏΠ΅ΡΠ΅Π΄Β» Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°. Z-index
0 (Π½ΠΎΠ»Ρ) ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ ΠΈ
auto
, Π½ΠΎ Π΅ΡΡΡ ΡΠ°Π·Π½ΠΈΡΠ°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ Π²Π΅ΡΠ½ΡΡΡ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠ½ΡΡΡ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρz-index
Π½Π°Π·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° Β«ΠΏΠΎΠ·Π°Π΄ΠΈΒ» ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ ΡΡΠ΅ΠΊΠ°.ΠΠΎΠ³Π΄Π° Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°, ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ.
Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΡΠ΅ΠΌΠΈ ΡΠ»ΠΎΠ΅Π² Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΡΠΈΡ ΡΠ»ΠΎΡΡ , Π½ΠΎ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΠ΅ΡΡ - Π²Π°ΠΌ Π²ΡΡΠ΄ Π»ΠΈ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΠΌΠ΅ΡΡ Π΄Π΅Π»ΠΎ Ρ ΡΠ΅ΠΌΡΡ ΡΠ»ΠΎΡΠΌΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅) Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΡΡ, ΠΎΡ Π·Π°Π΄Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΊ ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΉ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π€ΠΎΠ½ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΎΠ±ΡΠ°Π·ΡΡΡΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ ΡΡΠ΅ΠΊΠ°
- ΠΠΎΡΠΎΠΌΠΊΠΈ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠΎΠ² Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅
- ΠΠ»Π°Π²ΡΡΠΈΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ
- ΠΠΎΡΠΎΠΌΠΊΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ Ρ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠ΅ΠΊΠ°, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ ΠΊΠ°ΠΊ
Π°Π²ΡΠΎ
ΠΈΠ»ΠΈ (Π½ΠΎΠ»Ρ)- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΈ Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ ΡΡΠ΅ΠΊΠ°
ΠΡΠ΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π·Π°ΠΏΠΈΡΠΈ - ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
z-index
.ΠΡΠ΅ ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠ²Π΅Π΄Π΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Z-ΠΈΠ½Π΄Π΅ΠΊΡ.
ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π² ΡΠ²ΠΎΠΉ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°:
<ΡΠ΅Π»ΠΎ>
ΠΠ°ΡΠ΅ΠΌ Ρ Π²Π°ΠΌ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΡ Π²ΠΎΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ CSS ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ
#outer
Π±ΡΠ» ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Π½Π΅ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ#inner
.ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ#outer
Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ Ρ Π²Π°Ρ Π±ΡΠ»ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ². ΠΠ½Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π΄Π²Π° ΠΏΡΠ°Π²ΠΈΠ»Π°:#outer { ΠΌΠ°ΡΠΆΠ°: 5em; Π³ΡΠ°Π½ΠΈΡΠ°: 1px solid # f00; Π²ΡΡΠΎΡΠ°: 8em; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; } #Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ { ΡΠΈΡΠΈΠ½Π°: 5em; Π²ΡΡΠΎΡΠ°: 5em; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 999; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; ΡΠ»Π΅Π²Π°: 1em; }
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
#second
:#second { ΡΠΈΡΠΈΠ½Π°: 5em; Π²ΡΡΠΎΡΠ°: 5em; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 00f; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 1em; ΡΠ»Π΅Π²Π°: 2em; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅, ΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΡΠΊΠΎ-ΡΠΈΠ½ΡΡ ΡΠ°ΠΌΠΊΡ, ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ ΡΠ΅ΡΡΡ.ΠΠ±Π° ΠΏΠΎΠ»Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° (
auto
, Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° 0), Π½ΠΎ ΡΠΈΠ½ΠΈΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΡΡΠΌ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠΎΡΠ²Π»ΡΠ»ΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ, Π·Π°Π΄Π°Π² Π΅ΠΌΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ 0 - Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠΎΠ΄Π΅ 10000. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΡ ΡΡΡΠΎΠΊΡ Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ#inner
:#inner { ΡΠΈΡΠΈΠ½Π°: 5em; Π²ΡΡΠΎΡΠ°: 5em; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 999; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; ΡΠ»Π΅Π²Π°: 1em; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ΅ΡΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΈΠ½ΠΈΠΌ.
ΠΠΎΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ
Π ΠΎΡΡΠ°Π²ΡΠ΅ΠΉΡΡ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π° ΠΎΠ±ΡΡΠΆΠ΄Π°ΡΡΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅ ΡΠΎ, Ρ ΡΠ΅ΠΌ Π²Ρ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΉ ΠΎΠ±ΡΡΠ½ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΎΠΉ ΡΠ°Π±ΠΎΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ Π½Π΅ ΠΏΠΎΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ Π²Π΅ΡΠΈ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π½ΠΎ Ρ ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ Π²ΠΊΠ»ΡΡΡ ΡΡΠΎ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ ΡΡΠΎ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ΅ΠΉ z-index
Π·Π°Π΄Π°Π½ ΠΊΠ°ΠΊ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ, Β«Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉΒ» ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΡΠ΅ΠΊΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° 0.ΠΡΠΎ ΡΠ°Π·Π½ΠΈΡΠ°, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» ΡΠ°Π½Π΅Π΅, ΠΌΠ΅ΠΆΠ΄Ρ
z-index: auto
ΠΈz-index: 0
. ΠΠ΅ΡΠ²ΠΎΠ΅ Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π° Π²ΡΠΎΡΠΎΠ΅ - ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ.ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΡΠΎΠ²Π½ΠΈ ΡΡΠ΅ΠΊΠ° Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΡΠΎΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅. ΠΡΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Ρ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ ΠΈ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, Π½ΠΎ Π½Π΅ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ Π±ΡΠ°ΡΡΡΠΌ ΠΈ ΡΠ΅ΡΡΡΠ°ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ Β«ΠΊΠ»Π΅ΡΠΊΡΒ» Π²ΠΎΠΊΡΡΠ³ ΡΠ²ΠΎΠΈΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΠΈΠ· Π½Π΅Π΅ Π²ΡΠ±ΡΠ°ΡΡΡΡ.ΠΠΎΡΠΎΠΌΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ· Π² ΡΡΠΎΠΉ ΠΊΠ»Π΅ΡΠΊΠ΅, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π²ΡΠ±ΡΠ°ΡΡΡΡ ΠΈΠ· ΠΊΠ»Π΅ΡΠΊΠΈ. Π ΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠΈ ΠΎΠ±ΡΠ°Π·ΡΡΡ Π½Π΅Π΄Π΅Π»ΠΈΠΌΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΊΡΡΠΆΠ°Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅, ΡΡΠΎ Π²Ρ ΡΠ°Π·Π±ΠΈΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΡ Π±ΡΡ Π³Π°Π»ΡΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ»Π°ΡΠΈΡ Π²Π°ΠΌ Π½Π°Π»ΠΎΠ³ΠΈ. Π£ Π²Π°Ρ Π΅ΡΡΡ ΠΎΡΡΠ΅ΡΡ ΠΎ ΡΠ°ΡΡ ΠΎΠ΄Π°Ρ , ΠΊΠ²ΠΈΡΠ°Π½ΡΠΈΠΈ, ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ Π·Π°ΠΊΠ°Π·ΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅, ΠΈ Π²Ρ ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ Π±ΡΠΌΠ°Π³Ρ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΎΠΉ - ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΠΆΠΈΠ·Π½Ρ Π²Π°ΡΠ΅ΠΌΡ Π±ΡΡ Π³Π°Π»ΡΠ΅ΡΡ, Π²Ρ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΠΈΠΏΡ Π±ΡΠΌΠ°Π³, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅, Π² ΡΠ°Π·Π½ΡΠ΅ ΠΊΠΎΠ½Π²Π΅ΡΡΡ.
ΠΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΡΠ°ΠΊΠΎΠΌΡ ΠΊΠΎΠ½Π²Π΅ΡΡΡ. ΠΠ½ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ Π²ΡΡΠ°Π²ΠΊΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ, Π½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ½Π²Π΅ΡΡΠ° ΠΈ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΡΠΎΠΏΠΊΡ Π±ΡΠΌΠ°Π³ Π² ΡΠ΅Π»ΠΎΠΌ. ΠΠ°ΡΠ° ΡΡΠΎΠΏΠΊΠ° ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΌΠ΅ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π±ΡΠΌΠ°Π³ (ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠ΅ΠΊΠ°
, Π°Π²ΡΠΎ
) ΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠΎΠ² (ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠ΅ΠΊΠ°). ΠΠΎΠ½Π²Π΅ΡΡΡ Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠΎΠΏΠΊΠΈ Π»Π΅ΠΆΠ°Ρ ΠΏΠΎΠ²Π΅ΡΡ ΡΠ°Π·ΠΎΡΠ²Π°Π½Π½ΠΎΠΉ Π±ΡΠΌΠ°Π³ΠΈ, Π° ΠΊΠΎΠ½Π²Π΅ΡΡΡ Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠΎΠΏΠΊΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π²Π½ΠΈΠ·Ρ ΡΡΠΎΠΏΠΊΠΈ.ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Ρ
z-index
Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ Β«ΠΊΠΎΠ½Π²Π΅ΡΡΒ», ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ².ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΡΠΈ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π·Π°ΠΏΡΡΠ°Π½Π½ΡΠΌ, Π½ΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ Π½Π΅ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Ρ ΡΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊ Π²Π°ΡΠΈΠΌ Π΄Π²ΡΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ - Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π² ΡΠ²ΠΎΠΉ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ:
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΎΠ±ΠΎΠΈΠΌ ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
span
:ΠΏΡΠΎΠ»Π΅Ρ { ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 2em; ΡΠ»Π΅Π²Π°: 2em; ΡΠΈΡΠΈΠ½Π°: 3em; Π²ΡΡΠΎΡΠ°: 3em; }
ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
span
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΈ Π·Π°Π΄Π°Π΅Ρ ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ.ΠΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ -span
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΡΡΡΠΎΠ΅Π½Ρ - ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΄Π»Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²? ΠΡΠ²Π΅Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Π±Π»ΠΎΠΊΠΈ Π±Π»ΠΎΠΊΠΎΠ². Π£ΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π²Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°span
β. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ±Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°span
ΠΈΠΌΠ΅ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉdiv
ΠΊΠ°ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ, ΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±Π΅ΡΡΡ Π½Π° ΡΠ΅Π±Ρ ΡΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ ΡΡ Π±Π»ΠΎΠΊΠΎΠ².ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ²Π΅Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
span
, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ.ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π² ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°:#inner span { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # ff0; } #second span { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 0ff; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅, ΠΈ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΆΠ΅Π»ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ³Π»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ΅ΡΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° ΠΈ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ³Π»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠΈΠ½Π΅Π³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°. Π‘Π΅ΡΡΠΉ ΠΈ ΠΆΠ΅Π»ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΈΠ½ΠΈΠΌ ΠΈ Π³ΠΎΠ»ΡΠ±ΡΠΌ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ z-index
: 1
.Π§ΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π±ΡΠ» Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠ²? ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°, ΡΠ΅ΠΌ ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π΅ΠΌΡ ΡΠΎΡ ΠΆΠ΅ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° , ΡΡΠΎ ΠΈ ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ - Π²Π½Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ²ΠΎΠΉ CSS:
#second span { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 0ff; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ. ΠΡΠ»ΠΈ Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ CSS, Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ.Π‘Π΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ
z-index: 1
, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π²Ρ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡΠΈΡ Β«ΠΊΠΎΠ½Π²Π΅ΡΡΠΎΠ²Β» ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΈ Π²Π½ΡΡΡΡ ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈ Π΅Π³ΠΎ ΠΆΠ΅Π»ΡΡΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ.ΠΡΠ΅ Π½Π΅ Π·Π°ΠΏΡΡΠ°Π»ΠΈΡΡ? Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΎΡΡΠ½ΠΈΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π²ΡΡΠΎΠΊΠΈΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΆΠ΅Π»ΡΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°, ΡΡΠΎΠ±Ρ Π²ΡΠ²Π΅ΡΡΠΈ Π΅Π³ΠΎ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ - Π²Π½Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ²ΠΎΠΉ CSS:
#inner span { ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # ff0; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 4; }
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅β¦ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ! Π£ΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ Π΄Π»Ρ ΠΆΠ΅Π»ΡΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ΅ΠΊΠ°, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌ ΡΠ΅ΡΡΠΌ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠΌ - ΠΆΠ΅Π»ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½Π²Π΅ΡΡΠ° Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΡΠ΅ΡΡΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ) Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ - ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌΡΠΉ z-index
: auto
. Π‘ΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ - ΡΡΠΎ Π½Π΅Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½Π°Ρ Π±ΡΠΌΠ°Π³Π° Π² ΡΡΠΎΠΏΠΊΠ΅. ΠΠ΅Π»ΡΡΠ΅ ΠΈ Π³ΠΎΠ»ΡΠ±ΡΠ΅ ΠΊΠ²Π°Π΄ΡΠ°ΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠ°Ρ ΡΠ°ΠΌΠΈ ΠΏΠΎ ΡΠ΅Π±Π΅ (ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ΅Π»ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° ΠΈ ΡΠ°ΠΌΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΡΠ΅ΠΊΠ°).ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΠ΅ ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, Π²Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ) Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½.ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ - Π²Π½Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ²ΠΎΠΉ CSS:
#inner { ... z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; } #Π²ΡΠΎΡΠΎΠΉ { ... z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; } #second span { ... z-ΠΈΠ½Π΄Π΅ΠΊΡ: 3; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ. Π’Π΅ΠΏΠ΅ΡΡ ΡΠ΅ΡΡΠΉ ΠΈ ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎ Π΄Π°Π΅Ρ Π½Π°ΠΌ Π΄Π²Π° ΠΊΠΎΠ½Π²Π΅ΡΡΠ°. ΠΠ½ΠΈΠ·Ρ ΡΡΠΎΠΏΠΊΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΠΎΠ½Π²Π΅ΡΡ Ρ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠΎΠΏΠΊΠΈ 1, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π΄Π²Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠ° (ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ). ΠΠ²Π΅ΡΡ Ρ ΡΡΠΎΠΏΠΊΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΠΎΠ½Π²Π΅ΡΡ Ρ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠΎΠΏΠΊΠΈ 2, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π΄Π²Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠ° (ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈ ΠΆΠ΅Π»ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ).Π ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ ΡΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° 0, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π° Π³ΠΎΠ»ΡΠ±ΡΠΌ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° 3. ΠΠΎ Π²ΡΠΎΡΠΎΠΌ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅ ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° 0, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π° ΠΆΠ΅Π»ΡΡΠΌ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΎΠΌ Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ ΡΡΠ΅ΠΊΠ°. ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° 4. ΠΠ° ΡΠΈΡΡΠ½ΠΊΠ΅ 1 ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ΅ΡΡΡΠ΅ Π±ΠΎΠΊΡΠ° ΠΈ Π΄Π²Π° Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΡΡΠ΅ΠΊΠ° ΡΠ±ΠΎΠΊΡ ΠΏΠΎ ΠΎΡΠΈ Z.
Π ΠΈΡΡΠ½ΠΎΠΊ 1: ΠΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²Π½ΡΡΡΠΈ Β«2Β», Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ΅ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²Π½ΡΡΡΠΈ Β«1Β».ΠΠ°ΡΠ΅ΠΌ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌ Π½ΠΎΠΌΠ΅ΡΠΎΠΌ z-ΠΈΠ½Π΄Π΅ΠΊΡΠ° ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ Π½ΠΎΠΌΠ΅ΡΠΎΠΌ z-ΠΈΠ½Π΄Π΅ΠΊΡΠ°. ΠΡΠ»ΠΈ Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ Π½ΠΎΠΌΠ΅Ρ z-index, ΡΠΎ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅, ΠΏΠΎΡΠ²ΠΈΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ.
ΠΡΠ° ΡΠ°ΡΡΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ»Π° Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π·Π°ΠΏΡΡΠ°Π½Π½ΠΎΠΉ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² CSS. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎΠ²Π½ΠΈ ΡΡΠ΅ΠΊΠ° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΎΡΠΈ Z Π² ΡΡΠΎΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅.ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π΄ΡΡΠ³ΠΎΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π₯ΠΎΡΠΎΡΠ°Ρ Π½ΠΎΠ²ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ ΡΡΠΈΠΌΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ. ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²
z-index
Π½Π΅ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Ρ Π² Ρ ΠΎΡΠΎΡΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ , ΠΈ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ, ΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΡΡΠ΅ΠΊΠ°.Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠ΅ΠΉ
: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ.ΠΠ»Ρmedia = "print"
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ΅ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Internet Explorer Π²Π΅ΡΡΠΈΠΈ 6 ΠΈ ΡΡΠ°ΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π²Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π² ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅.
Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ
position: absolute
ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ Π±Π»ΠΎΠΊΡ, ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρposition: fixed
Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ Π±Π»ΠΎΠΊΡ.ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°: ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΡΡΡΠ°Π½ΠΈΡΡ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ, Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅ Π²ΡΠΎΡΠΎΠΉ ΠΎΡΠ΅Π½Ρ Π²ΡΡΠΎΠΊΠΈΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ.
ΠΠ½Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄ CSS:
#inner { ΡΠΈΡΠΈΠ½Π°: 5em; Π²ΡΡΠΎΡΠ°: 5em; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 999; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅; Π²Π΅ΡΡ : 1em; ΡΠ»Π΅Π²Π°: 1em; } #Π²ΡΠΎΡΠΎΠΉ { ΡΠΈΡΠΈΠ½Π°: 5em; Π²ΡΡΠΎΡΠ°: 150ΠΌΠΌ; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 00f; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; Π²Π΅ΡΡ : 1em; ΡΠ»Π΅Π²Π°: 2em; }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡ.ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠ²Π΅Π»ΠΈΡΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΡΠΎΡΡ
Π΄Π»Ρ
#second
. (Π ΠΊΠ°ΠΊΠΎΠΉ Ρ Π²Π°Ρ Π³ΠΈΠ³Π°Π½ΡΡΠΊΠΈΠΉ ΠΌΠΎΠ½ΠΈΡΠΎΡ?) ΠΡΡΠΎΠΊΠΈΠΉ ΡΠΈΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΡΡΡΠΏΠ°Π΅Ρ Π·Π° Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ ΠΎΠΊΠ½Π°. ΠΡΠΎΠΊΡΡΡΠΈΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ· ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ.#inner
ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ Π² ΠΏΠΎΠ·ΠΈΡΠΈΠΈ 1em ΡΠ²Π΅ΡΡ Ρ ΠΎΠΊΠ½Π° ΠΈ 1em ΡΠ»Π΅Π²Π°; ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠ΅ΡΠ°Ρ ΡΠ°ΠΌΠΊΠ° ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅.ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².ΠΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡΠ΅ Π΄Π»Ρ Π½ΠΈΡ ΠΌΠ΅ΡΡΠΎ. ΠΡΠ»ΠΈ Π²ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Ρ, Π²ΡΡΠΎΡΠ° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡ Π΄ΠΎ Π½ΡΠ»Ρ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ. ΠΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π½Π΅Ρ, ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΊΡΠΈΡΡΡΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° - ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ.ΠΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΎΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°; ΠΏΡΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²ΡΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²
Π²Π΅ΡΡ Π½ΠΈΠΉ
,ΠΏΡΠ°Π²ΡΠΉ
,Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈΠ»Π΅Π²ΡΠΉ
. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΠΊΡΠ°Ρ Π΄ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.ΠΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ ΡΡΠ΅ΠΊΠ° Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΡΡΠ΅ΠΊΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
z-index
. ΠΠΎΠ³Π΄Π°z-index
ΡΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΡΠ΅ΠΊΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ².Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅
ΠΠΎΠΏΡΠΎΡΡ ΠΊ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡΠΌ
- ΠΡΠΌΠ΅Π½ΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅ΡΡΡΡΠΌΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ°ΠΌΠΈ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π±ΡΠ» ΡΠ·Π°Π΄ΠΈ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΈΠ½ΠΈΠΉ, ΠΆΠ΅Π»ΡΡΠΉ ΠΈ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄ΡΠ°ΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅.(Π‘ΠΎΠ²Π΅Ρ: ΡΠ΄Π°Π»ΠΈΡΠ΅ Π²ΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ
z-index
ΠΈ Π½Π°ΡΠ½ΠΈΡΠ΅ Π·Π°Π½ΠΎΠ²ΠΎ.)- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΆΠ΅Π»ΡΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π²Π²Π΅ΡΡ ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ²
top: -1em
ΠΈleft: 8em
. ΠΠ°ΡΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ Π·Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ#outer
, ΡΡΠΎΠ±Ρ ΠΊΡΠ°ΡΠ½Π°Ρ Π³ΡΠ°Π½ΠΈΡΠ° ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ Π½Π° ΠΆΠ΅Π»ΡΠΎΠΌ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ΅.- Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· ΡΡΠ΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π² ΡΡΠ°ΡΡΠ΅ ΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ», Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
#footer
, Π½ΠΎ Π²Π°ΠΌ Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ Π΅ΡΠ΅ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ (ΠΊΡΠΎΠΌΠ΅ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ).- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΡΠ°Π»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π°Π»ΠΈΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅
body
. ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΠΈ / ΠΈΠ»ΠΈ Π½Π° Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΎΠ½Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ»ΠΎΠΈ CSS - ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ°Π±ΠΎΡΠ° CSS - Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS
- ΠΠΎΠΌ
- Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS
- ΠΠ½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ CSS
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ»ΠΎΠΈ CSS
Π ΠΏΠΎΡΠΎΠΊΠ΅ ΠΎΠ±ΡΡΠ½ΠΎΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ Π²Π²ΠΎΠ΄ΡΡΡΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ.CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΡΠ΅ΡΡΠ²Π°Π½ΠΈΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠ°Π·Π½ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΡ.
ΠΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π·Π°Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ. Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ, ΡΠ°ΠΌΠ°Ρ ΡΠ»ΠΎΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ CSS Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ, Π½ΠΎ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ½ΠΎΠ²Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²Π²Π΅Π΄Π΅Π½ΠΈΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΡ Π½Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΠΈΡΠ½Ρ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ»Π΅Π΄ΡΡΡ ΠΏΠΎΡΠΎΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π³Π΄Π΅ Π±Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠ½ΠΈ Π½ΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»ΠΈΡΡ. ΠΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊ ΡΡΠ΅Π΄ΡΡΠ²ΠΎ ΠΎΡΠΌΠ΅Π½Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΠΡΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΌΠ΅ΡΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ, ΠΎΡΡΠ°Π²Π»ΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ.
ΠΏ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ : -20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}ΠΠ΅ΡΡ Π½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡΡΡ ΡΠΈΡΠ»ΠΎΠ²ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΎΠ΄Π½ΠΈΠΌ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ.ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡ Π½Π° ΡΠ°ΠΊΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ (Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π·Π° Π²Π΅ΡΡ ) ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡ Π½Π° ΡΠ°ΠΊΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΡΡΡΠΈ (Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Π½ΡΡΡΡ Ρ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ) ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΡΡΠ΄Π½ΡΠΌ ΠΈ Π½Π΅Π½ΡΠΆΠ½ΡΠΌ, Π½ΠΎ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΄Π°Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅Ρ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Π΅ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΠ΅.ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ, ΠΈ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅, Π½Π΅ ΠΎΡΡΠ°Π²Π»ΡΡ ΠΏΡΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΡ, Π½Π΅ ΡΠ²Π»ΡΡΡΠ°ΡΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π΅ΡΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎ ΠΎΠ½ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΠΎΠΊΠ½Π°, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΊΠ°ΠΆΠ΅ΡΠ΅, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ , Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈ / ΠΈΠ»ΠΈ Π»Π΅Π²ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΏ {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ : 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π°Ρ Π°Π±Π·Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ (Π½ΠΈΠΆΠ΅ / Π²Π½ΡΡΡΠΈ) Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π° 5 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ (Π²Π½ΡΡΡΠΈ) Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ;
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΡΡΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡΠΌ Π² ΡΠΎΠΌ ΡΠΌΡΡΠ»Π΅, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΈΠΊΡΠΈΡΡΡΡΡΡ Π² ΡΠΎΡΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΈΡ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ.ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π°Π±ΡΠΎΠ»ΡΡΠΈΠΈ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ.
ΠΏ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ : 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π°Ρ Π°Π±Π·Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ (Π½ΠΈΠΆΠ΅ / Π²Π½ΡΡΡΠΈ) Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π° 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ (Π²Π½ΡΡΡΠΈ) ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΡΠ»ΠΎΠ΅Π²
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π§ΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· ΡΡΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π½Π°Π²Π΅ΡΡ Ρ, Π° ΠΊΠ°ΠΊΠΈΠ΅ - Π²Π½ΠΈΠ·Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ z-index ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, Π³Π΄Π΅ Π² ΡΡΠ΅ΠΊΠ΅ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΠ»ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π² Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΡΡΠ΅ΠΊΠ°, Π° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΠ»ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π² Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΡΡΡ ΡΡΠ΅ΠΊΠ°.Π§Π΅ΠΌ Π²ΡΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ Π²ΡΡΠ΅ Π² ΡΡΠ΅ΠΊΠ΅ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π§Π΅ΠΌ ΠΌΠ΅Π½ΡΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ Π΄Π°Π»ΡΡΠ΅ ΠΏΠΎ ΡΡΠ΅ΠΊΡ Π±ΡΠ΄Π΅Ρ ΡΠΆΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
p.top {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 5;
}ΠΏ. Π‘Π΅ΡΠ΅Π΄ΠΈΠ½Π° {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 0;
}ΡΡΡ.