ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — ΠΠ·ΡΡΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ | MDN
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΈΠ·ΡΠΌΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΈΡ
Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ; Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π΅ ΠΈΠ»ΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π²Π½ΡΡΡΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ° ΡΡΠ°ΡΡΡ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ position
ΠΈ ΠΊΠ°ΠΊ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π·Π½Π°Π½ΠΈΡ: | ΠΡΠ½ΠΎΠ²Ρ HTML (ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² HTML), ΠΈΠ΄Π΅Ρ ΠΎ ΡΠΎΠΌ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ CSS (ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² CSS.) |
---|---|
ΠΠ°Π΄Π°ΡΠ°: | ΠΠ·ΡΡΠΈΡΡ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. |
ΠΠ°ΠΌ Π±Ρ Ρ
ΠΎΡΠ΅Π»ΠΎΡΡ ΡΡΠΎΠ±Ρ Π²Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΈ Π·Π° Π½Π°ΠΌΠΈ Ρ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΡΠΌΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΠ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΠ·ΡΠΌΠΈΡΠ΅ ΠΊΠΎΠΏΠΈΡ 0_basic-flow.html
ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ GitHub ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ (ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π·Π΄Π΅ΡΡ) ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΎΡΠΏΡΠ°Π²Π½ΡΡ ΡΠΎΡΠΊΡ.
ΠΡΡ ΠΈΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΠΌ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅, Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ
ΡΠΈΠΏΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ HTML. ΠΠ»Ρ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ position
.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅Β β ΡΡΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ Π·Π½Π°ΡΠΈΡ «ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° β Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ».
Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π°Ρ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π΄Π»Ρ Π±ΡΠ΄ΡΡΠΈΡ
ΡΠ°Π·Π΄Π΅Π»ΠΎΠ², ΡΠ½Π°ΡΠ°Π»Π° Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ class
positioned
ΠΊΠΎ Π²ΡΠΎΡΠΎΠΌΡ <p>
Π²Β HTML:
<p> . .. </p>
Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ Π²Π°ΡΠ΅Π³ΠΎ CSS:
.positioned {
position: static;
background: yellow;
}
Π Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, ΡΠΎ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π½Π΅ ΡΡΠΈΡΠ°Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° 2-Π³ΠΎ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ°. ΠΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΡΠ°Π½Π΅Π΅, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ!
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΏ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ. ΠΠ½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π·Π°Π½ΡΠ²ΡΠ΅Π³ΠΎ ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ²ΠΈΠ³Π°ΠΉΡΠ΅ΡΡ Π΄Π°Π»Π΅Π΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅
Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅:
position: relative;
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ Π½Π° Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠ°ΠΏΠ΅, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²Ρ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ Π²Π°ΠΌ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅? ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top
, bottom
, left
, ΠΈ right
ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² top, bottom, left, ΠΈ right
top
, bottom
, left
, ΠΈ right
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ position
ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΡΠ΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»Ρ .positioned
Π² Π²Π°ΡΠ΅ΠΌ CSS:
top: 30px;
left: 30px;
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π»ΡΠ±ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΡΠ΅ ΠΏΠΎ Π»ΠΎΠ³ΠΈΠΊΠ΅: ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, ΠΌΠΌ, rems, %, ΠΈ Ρ.Π΄.
ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈΒ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅, Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΡΡΠΎ, ΠΏΡΠ°Π²Π΄Π°? Π₯ΠΎΡΠΎΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΡΡΠΎ Π½Π΅ ΡΠΎ, ΡΠ΅Π³ΠΎ Π²Ρ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ β ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΠ»ΡΡ Π²Π½ΠΈΠ· ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ Π²Π²Π΅ΡΡ
ΠΈ Π²Π»Π΅Π²ΠΎ? ΠΠ°ΠΊ Π±Ρ Π½Π΅Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΡΡΠΎ Π½ΠΈ Π·Π²ΡΡΠ°Π»ΠΎ ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ β Π²Π°ΠΌ Π½Π°Π΄ΠΎ Π΄ΡΠΌΠ°ΡΡ ΠΎ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΡΠΈΠ»Π΅ ΡΠΎΠ»ΠΊΠ°ΡΡΠ΅ΠΉ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ Π΅Π³ΠΎ Π² ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ. Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΊΠ°Π·Π°Π»ΠΈ top: 30px;
, ΡΠΈΠ»Π° ΡΠΎΠ»ΠΊΠ°Π΅Ρ Π±Π»ΠΎΠΊ, Π·Π°ΡΡΠ°Π²Π»ΡΡ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π²Π½ΠΈΠ· Π½Π° 30px.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π΅Ρ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:
position: absolute;
ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π½ΠΎΠ²ΠΈΡΠ΅, ΡΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π΅ΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅:
Π ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΡΠ°ΠΌ, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ β ΠΏΠ΅ΡΠ²ΡΠΉ ΠΈ ΡΡΠ΅ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ±Π»ΠΈΠ·ΠΈΠ»ΠΈΡΡ ΡΠ°ΠΊ Π±ΡΠ΄ΡΠΎ, ΠΎΠ½ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ! ΠΡ, Π² ΠΊΠ°ΠΊΠΎΠΌ-ΡΠΎ ΡΠΌΡΡΠ»Π΅ ΡΡΠΎ ΠΏΡΠ°Π²Π΄Π°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΠ»ΠΎΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ ΠΎΡ Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ: ΡΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈ ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ; ΠΎΠΏΡΠΎΠΊΠΈΠ΄ΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ; ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°ΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ; ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅…
ΠΠΎ-Π²ΡΠΎΡΡΡ
, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π°ΡΡ β ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ top
, bottom
, left
, ΠΈ right
Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ ΠΎΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΡΡΠΎΡΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΡΠΎΠΌΡ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² 30px ΠΎΡ Π²Π΅ΡΡ
Π° «ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°» ΠΈΒ 30px ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ (Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ «ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ» ΡΠ²Π»ΡΠ΅ΡΡΡΒ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ. Π‘ΠΌ. ΡΠ°Π·Π΄Π΅Π» Π½ΠΈΠΆΠ΅ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ top
, bottom
, left
, ΠΈ right
Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½Π°Π΄ΠΎ.
top: 0; bottom: 0; left: 0; right: 0;
ΠΈ margin: 0;
Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ! ΠΠΎΡΠΎΠΌ ΡΠ½ΠΎΠ²Π° Π²ΡΠ΅ Π²Π΅ΡΠ½ΠΈΡΠ΅…ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ°, margin-Ρ Π²ΡΠ΅ Π΅ΡΠ΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΡ Π»ΠΎΠΏΡΠ²Π°Π½ΠΈΡ margin Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ.
ΠΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ «ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°? ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠ΅Π΄ΠΊΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (ΡΠΌ. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°).
ΠΡΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΡΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π² ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ΅. ΠΡΡ
ΠΎΠ΄Π½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΎΠΊΠΎΠΌ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ <html>
. ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <html>
ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½ Π² <body>
Π² ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌ HTML, Π½ΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΎΠ½ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π°Β 30px ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ β ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ Π²Π»ΠΎΠΆΠ΅Π½ (Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ ΠΠ Π²Π»ΠΎΠΆΠ΅Π½). Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ Π² ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π²Π°ΡΠ΅Π³ΠΎΒ body
:
position: relative;
ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <body>
.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² 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>
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;
}
ΠΠΈΠΏΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²Π»ΡΡΡΡΡ «Π»ΠΈΠΏΠΊΠΈΠΌΠΈ» ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ «ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΠΈΠΌΡΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠΎΠΌ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°.
ΠΡ Π΄ΠΎΡΡΠΈΠ³Π»ΠΈ ΠΊΠΎΠ½ΡΠ° ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅ Π»ΠΈ Π²Ρ ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ ΡΡΠΎ Π²Ρ ΡΡΠ²ΠΎΠΈΠ»ΠΈ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ, ΠΎΡΠΏΡΠ°Π²ΠΈΡΠ΅ΡΡ Π΄Π°Π»ΡΡΠ΅ β ΡΠΌ. ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΈ Π½Π°Π²ΡΠΊΠΈ: ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
Π― ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ Π²Ρ ΠΏΠΎΠ²Π΅ΡΠ΅Π»ΠΈΠ»ΠΈΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ; Ρ ΠΎΡΡ ΡΡΠΎ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄Π»Ρ ΡΠ΅Π»ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π²ΡΠ΅ ΠΆΠ΅ ΠΊΠ°ΠΊ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°Π΄Π°Ρ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ.
CSS — ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ — CoderLessons.com
CSS ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π²Π°Ρ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π»ΡΠ±ΠΎΠΉ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π»ΡΠ±ΠΎΠ΅ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π²Π°ΠΌ ΠΌΠ΅ΡΡΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ, Ρ ΠΎΡΠΈΡΠ΅ Π»ΠΈ Π²Ρ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ Π²ΡΠ΅ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ β
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Β«left: 20Β» Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π»Π΅Π²ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ top ΠΈ left Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML Π² Π»ΡΠ±ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²Π»Π΅Π²ΠΎ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ .
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²ΠΏΡΠ°Π²ΠΎ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ .
- Move Up β ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ .
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²Π½ΠΈΠ· β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ .
ΠΠ ΠΠΠΠ§ΠΠΠΠ. β ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ .
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ β
Live Demo
<html> <head> </head> <body> <div style = " position:relative; left:80px; top:2px; background-color:yellow;"> This div has relative positioning. </div> </body> </html>
ΠΡΠΎ Π΄Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ β
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ position: absolute ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΠ³Π»Π° ΡΠΊΡΠ°Π½Π°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ top ΠΈ left Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML Π² Π»ΡΠ±ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²Π»Π΅Π²ΠΎ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ .
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²ΠΏΡΠ°Π²ΠΎ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ .
- Move Up β ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ .
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²Π½ΠΈΠ· β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ .
ΠΠ ΠΠΠΠ§ΠΠΠΠ. β ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ β
Live Demo
<html> <head> </head> <body> <div style = " position:absolute; left:80px; top:20px; background-color:yellow;"> This div has absolute positioning. </div> </body> </html>
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π£ΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π±ΡΠ΄ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ top ΠΈ left Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ position, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML Π² Π»ΡΠ±ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²Π»Π΅Π²ΠΎ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ .
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²ΠΏΡΠ°Π²ΠΎ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ .
- Move Up β ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ .
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²Π½ΠΈΠ· β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ .
ΠΠ ΠΠΠΠ§ΠΠΠΠ. β ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ .
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ β
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS?
- ΠΠ»Π°Π²Π½Π°Ρ
- ->
- ΠΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ
- ->
- ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS?
Reg. ru: Π΄ΠΎΠΌΠ΅Π½Ρ ΠΈ Ρ ΠΎΡΡΠΈΠ½Π³
ΠΡΡΠΏΠ½Π΅ΠΉΡΠΈΠΉ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΎΡ ΠΈ Ρ ΠΎΡΡΠΈΠ½Π³-ΠΏΡΠΎΠ²Π°ΠΉΠ΄Π΅Ρ Π² Π ΠΎΡΡΠΈΠΈ.
ΠΠΎΠ»Π΅Π΅ 2 ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² Π΄ΠΎΠΌΠ΅Π½Π½ΡΡ ΠΈΠΌΠ΅Π½ Π½Π° ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΠΈ.
ΠΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΡΠ° Π΄Π»Ρ Π΄ΠΎΠΌΠ΅Π½Π°, ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π±ΠΈΠ·Π½Π΅ΡΠ°.
ΠΠΎΠ»Π΅Π΅ 700 ΡΡΡ. ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΠΌΠΈΡΡ ΡΠΆΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠ²ΠΎΠΉ Π²ΡΠ±ΠΎΡ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΠ°ΠΉΡ->
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΡΡΡ «ΠΡΠ°ΠΊΡΠΈΠΊΠ° HTML5 ΠΈ CSS3»
ΠΡΠ²ΠΎΠΉΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ
ΠΏΠΎ ΠΎΡΠ½ΠΎΠ²Π°ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
Π½Π° HTML5 ΠΈ CSS3 Ρ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Π½ΡΠ»Ρ.
ΠΠ°ΡΠ°ΡΡ->
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Bootstrap: Π±ΡΡΡΡΠ°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²ΡΡΡΡΠΊΠ°
ΠΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΠ²Π°ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ Π² ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅ Bootstrap.
ΠΠ°ΡΡΠΈΡΠ΅ΡΡ Π²Π΅ΡΡΡΠ°ΡΡ ΠΏΡΠΎΡΡΠΎ, Π±ΡΡΡΡΠΎ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠΎΡΠ½ΡΠΉ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ.
ΠΠ΅ΡΡΡΠ°ΠΉΡΠ΅ Π½Π° Π·Π°ΠΊΠ°Π· ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΠΉΡΠ΅ Π΄Π΅Π½ΡΠ³ΠΈ.
ΠΠΎΠ»ΡΡΠΈΡΡ Π² ΠΏΠΎΠ΄Π°ΡΠΎΠΊ->
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΊΡΡΡ «Π‘Π°ΠΉΡ Π½Π° WordPress»
Π₯ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ CMS WordPress?
ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΎΠΊΠΈ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° WordPress.
ΠΠ°ΡΡΠΈΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΠΈ Π½Π°ΡΠ΅Π·Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ.
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ°ΠΉΡΠ°, Π΅Π³ΠΎ Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ Π½Π° CMS WordPress!
ΠΠΎΠ»ΡΡΠΈΡΡ Π² ΠΏΠΎΠ΄Π°ΡΠΎΠΊ->
*ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π΄Π»Ρ ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ°Π·Π°Π΄ ΠΠΏΠ΅ΡΠ΅Π΄
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS?
ΠΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ |
ΠΡΠΈΠΌΠ΅Ρ |
ΠΠ΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡΠ½ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌ ΠΎΠ±Π»Π°Π΄Π°ΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡΡ Π² ΡΡΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² Π² ΡΡΠΏΠΈΠΊ.
ΠΡΠ°ΠΊ, ΡΡΠΎ ΠΆΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅?
ΠΠΎΠ³Π΄Π° ΠΠ°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ½ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΡ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΡ (ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ (Π±Π»ΠΎΠΊΠΈ div, ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΡ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ Ρ.ΠΏ.) Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ HTML-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ 4 ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ inherit, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
1. static
2. relative
3. absolute
4. fixed
5. inherit
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ static
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ static. Π’Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌΡ ΠΏΠΎΡΡΠ΄ΠΊΡ — ΠΏΠΎΡΡΠ΄ΠΊΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΅Π³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ΄ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ.
Π ΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΡΠ½ΡΠΌΠΈ ΠΈ ΡΡΡΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ?
Π‘ΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (inline) ΠΏΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ°. Π ΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ΄ΡΡ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ, ΡΠΎ Π΅ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅. ΠΠ° Π΄ΡΡΠ³ΡΡ ΠΆΠ΅ ΡΡΡΠΎΠΊΡ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΡ ΠΎΠ΄ΡΡ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΡΡΡΠΎΠΊΠΈ, Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ-ΡΠΎ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ.
ΠΠ»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (block), Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΡΡΠΎΡΠ½ΡΡ , Π² ΠΎΠ±ΡΠ΅ΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΈΠΌ, ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²ΠΎΠΉΡΡΠ²Π° position Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ relative ΡΠ°ΠΌΠ° ΠΏΠΎ ΡΠ΅Π±Π΅ Π½Π΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΡΡΠΈΡ ΠΏΠΎΡ ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left.
ΠΠ°Π½Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½ΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΊ ΠΆΠ΅ΡΡΠΊΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
.relativeDiv{ /*ΡΠ΄Π²ΠΈΠ³Π°Π΅ΠΌ Π±Π»ΠΎΠΊ Π²Π²Π΅ΡΡ -Π²Π»Π΅Π²ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ:*/ position:relative; top:-50px; left:-100px; }
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ position: fixed ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΠ°Π½Π΅Π»ΠΈ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ ΠΈ Ρ.ΠΏ. Π²ΡΠ΅Π³Π΄Π° Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ ΡΠΊΡΠ°Π½Π°, Π² Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠ»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, right, bottom ΠΈ left.
.fixedDiv{ /*Π€ΠΈΠΊΡΠΈΡΡΠ΅ΠΌ Π±Π»ΠΎΠΊ div Π² 20 ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΎΡ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°*/ position:fixed; right:20px; bottom:20px; }
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅Ρ.
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠΆΠ΅ ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌΠΈ Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ left, top, right ΠΈ bottom. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π° Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π’Π°ΠΊ, Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ static, Π»ΠΈΠ±ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ fixed, relative ΠΈΠ»ΠΈ absolute, ΡΠΎ ΠΎΡΡΡΠ΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄Π΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
.parentDiv{ /* Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈ position: fixed; ΠΈ position: absolute;*/ position:relative; } .absoluteDiv{ /*ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ absoluteDiv ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ parentDiv*/ position:absolute; right:50px; top:90px; }
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΡΡΡΠ°Π½ΠΈΡ. Π ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ z-index ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΠΉΡΠΈ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΠ΄ΡΡΠΈΠ΅ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΠ·ΠΆΠ΅, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ΅Π΄ΡΠΈΡ ΡΠ°Π½Π΅Π΅).
ΠΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°ΠΌ tutorialzine.com
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ — ΠΠΌΠΈΡΡΠΈΠΉ ΠΠ°ΡΠΌΠ΅Π½ΠΊΠΎ
P.S. Π₯ΠΎΡΠΈΡΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ CSS ΠΈ Π½Π°ΡΡΠΈΡΡΡΡ Π²Π΅ΡΡΡΠ°ΡΡ? ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π΅ΡΠ΅ ΡΠ΅ΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΊΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΠ²Π°ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ. ΠΡΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΡΡΡΡΠ΅Π΅:
ΠΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΈ Ρ
ΠΎΡΠΈΡΠ΅ ΠΎΡΠ±Π»Π°Π³ΠΎΠ΄Π°ΡΠΈΡΡ?
ΠΡΠΎΡΡΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ Ρ Π΄ΡΡΠ·ΡΡΠΌΠΈ ΠΈ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ!
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
ΠΠ°Π²Π΅ΡΡ
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS?
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅Π΄Π΅Π»Ρ Π½Π°Π·Π°Π΄ ΠΠ½Π΄ΡΠ΅ΠΉ Π·Π°Π΄Π°Π» ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΌΠΎΠΈΡ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΉ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ². ΠΠ½Π΄ΡΠ΅ΠΉ ΠΎΡΠΌΠ΅ΡΠΈΠ» ΡΡΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π½ΠΈ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½ΠΎ Π½Π΅ Π±ΡΠ»ΠΎ. ΠΠΎΡΠ΅ΠΌΡ ΡΠΎΠ³Π΄Π° ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ΄ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ?
ΠΡΠ»ΠΈ ΡΠ΅ΡΡΠ½ΠΎ, Ρ Π½Π΅ Π·Π½Π°Π» ΡΡΠΎ ΠΎΡΠ²Π΅ΡΠΈΡΡ. ΠΠ°ΠΊ ΠΈ ΠΠ½Π΄ΡΠ΅Ρ, ΠΌΠ½Π΅ ΠΊΠ°Π·Π°Π»ΠΎΡΡ ΡΡΠΎ ΠΏΡΠΈ
ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html
ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ
Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½ΠΎ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π²ΡΠ΅ ΠΎΠ±ΡΡΠΎΡΠ»ΠΎ ΠΈΠ½Π°ΡΠ΅.
ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡΠΌ, Ρ ΠΎΡΡ ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ Π½Π°ΠΉΡΠΈ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΏΡΠΎΠ²Π΅ΡΡΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΡΠ°ΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ΅ Π±ΡΠ΄Ρ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ Π½Π°ΡΠ΅Π» ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ΄Π΅Π»ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ.
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ Π·Π°Π΄Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²ΠΊΡΠ°ΡΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΎΠ½ΠΎ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. Π’Π°ΠΊΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ static
. ΠΡΠ»ΠΈ Π΄Π»Ρ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ — ΡΠ»Π΅ΠΌΠ΅Π½Ρ html
.
Π ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ Ρ ΠΎΠΏΠΈΡΠ°Π» ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
ΡΠ°Π±Π»ΠΎΠ½Π° Suckerfish. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Suckerfish ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅ ΠΈ
Π²Ρ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΠ±ΡΡΠ½ΠΎ Π½Π°
-999em ΡΠ»Π΅Π²Π° ΠΎΡ Π½Π΅Π΅. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ left
ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° auto
ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΠΌΠΎ ΠΏΠΎΠ΄ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΏΡΠ½ΠΊΡΠΎΠΌ ΠΌΠ΅Π½Ρ.
ΠΠ° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄, ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ΄Π²Π΅ΡΠ³Π°Π΅ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π²ΡΡΠ΅ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
Π±Π»ΠΎΠΊΠΎΠ². ΠΠΈ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π΅Π³ΠΎ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ, Π·Π½Π°ΡΠΈΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html
ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΡΠ°ΠΊ Π΄ΡΠΌΠ°Π»ΠΈ Ρ ΠΈ ΠΠ½Π΄ΡΠ΅ΠΉ. ΠΠ°ΡΠ° ΠΎΡΠΈΠ±ΠΊΠ° ΡΠΎΡΡΠΎΡΠ»Π° Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ
ΠΏΡΠΈΠ½ΡΠΈΠΏΠ° ΡΠ°Π±ΠΎΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ auto
.
ΠΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
?
ΠΡ ΠΎΠ±Π° ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΈ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ 0, ΡΠΎΠ΅ΡΡΡ Π·Π°ΠΏΠΈΡΡ left:auto
ΡΠ°Π²Π½ΡΠ΅ΡΡΡ left:0
. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
Π² Π‘SS
Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π²Π½ΡΠ΅ΡΡΡ Π½ΡΠ»Ρ, Π½ΠΎ Π½Π΅ Π² ΡΡΠΎΠΌ.
ΠΠΎΠ³Π΄Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΊΠ°Π·Π°Π½ΠΎ position: absolute
, Π΅Π³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (ΠΈ ΡΠ°ΡΡΠΎ
ΡΠ°Π·ΠΌΠ΅Ρ) ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ top
, right
, bottom
ΠΈ left
. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΡΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΠ΅ ΠΎΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ
Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΠΏΠ°ΡΠ½ΡΡ
ΡΠ΅Π³ΠΎΠ² (<img>
, <input>
), ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ auto
(Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° top
, right
, bottom
ΠΈΠ»ΠΈ left
) Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ΠΎ Π»ΠΈ ΠΎΠ½ΠΎ Π΄Π»Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ auto
Π½Π΅ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ 0. ΠΠ½ΠΎ
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π²Π½ΠΎ 0, Π½ΠΎ ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Π½Ρ Π΄Π»Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Suckerfish Π·Π°Π΄Π°Π΅Ρ ΠΈ Π²ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° left
, ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡΡΠ°ΡΡΡΡ auto
. ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ left: -999em
, Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π²ΡΡΡΠΏΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ right
ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ
Π΄Π°Π»Π΅ΠΊΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΠΊΠΎΠ³Π΄Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° left
ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° auto
, Π²ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ ΠΏΠΎΠ»ΡΡΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
.
Π‘ΡΠ°ΡΡΡ ΠΎΠ± ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ Π°Π²ΡΠΎ-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ ΡΡΠ° ΡΡΠ°ΡΡΡ Ρ Dev.Opera ΠΎΠ± Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π° ΡΠΈΡΠ°ΡΠ° ΠΈΠ· ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠ²
top
,right
,bottom
ΠΈleft
ΡΠ²Π»ΡΠ΅ΡΡΡauto
, Π·Π½Π°ΡΠΈΡ Π±Π»ΠΎΠΊ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠ°ΠΌ Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» Π±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π±Π΅Π· ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΎΠ½ ΡΠ΄Π°Π»Π΅Π½ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° Π½ΠΈΠΌ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ
Π½ΠΈΠΆΠ΅ ΠΈ Π²ΡΡΠ΅ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅. ΠΠ°
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²ΡΡΠ΅ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΡΡ ΡΡΡΠ»ΠΊΡ. Π
ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° left
(Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ top
, right
ΠΈ bottom
) ΡΠ²Π»ΡΠ΅ΡΡΡ auto
.
ΠΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΌΠ΅Π½Ρ Π±Π΅Π· ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. ΠΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²ΡΡΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΡΠ°Π·Π½ΡΡ ΡΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π½ΠΎ ΡΠ°ΠΌΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ Π½Π° ΠΎΠ±Π΅ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ .
ΠΡΠ»ΠΈ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ, Π²ΡΠ΅ Π»ΠΎΠ³ΠΈΡΠ½ΠΎ. ΠΡΠ»ΠΈ Π±Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ auto
Π±ΡΠ»ΠΎ ΡΠ°Π²Π½ΠΎ 0, ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 0 Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΠΎΡΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΠ» Π±Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π΄ΠΎ Π³ΡΠ°Π½ΠΈΡ ΡΠ²ΠΎΠ΅Π³ΠΎ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. Π Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΌΡ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΠΌ Π½Π° ΡΠΎ ΡΡΠΎ ΠΎΠ½ ΡΠ°ΠΊ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π±Ρ
Π²Π΅ΡΡΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ. ΠΠΎΠ³Π΄Π° Π΄Π»Ρ Π²ΡΠ΅Ρ
4 ΡΡΠΎΡΠΎΠ½ (ΠΈΠ»ΠΈ ΠΆΠ΅ Π΄Π»Ρ Π΄Π²ΡΡ
ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΡ
ΡΡΠΎΡΠΎΠ½) ΡΠΊΠ°Π·Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ
ΠΎΡ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ.
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΏΠΎ
Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ margin-left: auto
ΠΈ margin-right: auto
. Π ΡΡΠΎΠΌ
ΡΠ»ΡΡΠ°Π΅ margin
Π΄Π΅Π»ΠΈΡΡΡ Π½Π° Π΄Π²Π΅ ΡΠ°Π²Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ. Π ΡΠ»ΡΡΠ°Π΅ Ρ
Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΌΠ΅Π½Ρ, Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π±Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»ΡΡ Π±Π΅Π·
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠΎΠ³
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ΄ΠΈΠ²ΠΈΡΡΡΡ Π·Π°ΡΠ΅ΠΌ Ρ ΡΡΠ°ΡΡ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎΠ³ΠΎ. ΠΡΠΈ Π²Π·Π³Π»ΡΠ΄Π΅ Π½Π° Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π°Π²ΡΠΎ-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ, Π½ΠΎ ΠΎΠ½ Π½Π΅ Π±ΡΠ» ΡΠ°ΠΊΠΈΠΌ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΠΊΠΎΠ³Π΄Π° Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π» ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅ ΡΠ°Π±ΠΎΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Π°Π²ΡΠΎ-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π Π°Π· ΠΠ½Π΄ΡΠ΅ΠΉ ΠΏΠΎΠ΄Π½ΡΠ» ΡΡΠΎΡ Π²ΠΎΠΏΡΠΎΡ, Π΄Π»Ρ Π½Π΅Π³ΠΎ Π²ΡΠ΅ ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ Π±ΡΠ»ΠΎ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ. ΠΡΠΌΠ°Ρ ΠΌΡ Π½Π΅ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π°ΠΉΠ΄ΡΡΡΡ ΡΠ΅ ΠΊΡΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ΄ΠΈΡ ΡΡΠΎ Π²ΡΠ΅ ΡΡΠΎ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ ΠΈ Π΄Π»Ρ Π½ΠΈΡ .
ΠΠ½ΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ΅ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π½Π΅ ΠΏΡΡΠ°ΡΡΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠΎΠ³Π΄Π° ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΠΈΡ ΡΠ°Π±ΠΎΡΡ, ΠΌΡ Π·Π°ΡΡΡΠ΄Π½ΡΠ΅ΠΌΡΡ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. Π₯ΠΎΡΡ ΠΈΠ½ΠΎΠ³Π΄Π° ΡΡΠΎΠΈΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ΅ ΡΠ°Π±ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ².
Π― Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ΄Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ΅ ΡΠΎ, ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ
ΡΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΡΡ ΡΡΠΎ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΠΎΠΆΠΈΠ΄Π°Ρ. Π’Π΅ΠΏΠ΅ΡΡ Ρ Π²ΡΠ΅Π³Π΄Π° Π΄ΡΠΌΠ°Ρ Π½Π°ΠΏΠ΅ΡΠ΅Π΄ ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠΉ Π°Π½Π°Π»ΠΎΠ³ Π΄Π»Ρ auto
ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΎΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ auto
Π΄Π»Ρ ΡΠΌΠ΅ΠΆΠ½ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ². Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ Ρ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π», Π½ΠΎ
Π΄ΡΠΌΠ°Ρ Π²Π΅ΡΠΎΡΡΠ½Ρ ΡΠ»ΡΡΠ°ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ
ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ.
CSS3 ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ
Π― Ρ
ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΌΠΎΠ΅ ΠΌΠ΅Π½Ρ Π·Π°ΡΡΡΡΠ»ΠΎ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ , ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ position: fixed
, Π½ΠΎ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ Π½ΠΈΠΆΠ΅ ΠΌΠ΅Π½Ρ — Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π΅Π³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, margin-top
Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΈ Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ.
ΠΠΎΡ ΡΠ΅Π±Π΅ JSFiddle .
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ GoshoPepoto Β Β 17 Π½ΠΎΡΠ±ΡΡ 2015 Π² 00:53
3 ΠΎΡΠ²Π΅ΡΠ°
- ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ CSS3
ΠΡΠ»ΠΈ Π²Ρ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΌΠ΅Π½Ρ User , ΡΠΎ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠ»Π΅Π²Π° = 0. ΠΠΎ, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ΄ User ‘button’. ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? (ΡΠΎΠ»ΡΠΊΠΎ CSS3)
- z-index issue — ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° css3 ΠΏΠΎΠ΄ ΠΌΠ΅Π½Ρ
ΠΡΠΈΠ²Π΅Ρ ΠΈ ΡΠΏΠ°ΡΠΈΠ±ΠΎ, ΡΡΠΎ Π½Π°ΡΠ»ΠΈ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΌΠΎΠ΅ΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅. Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ : ΠΠ»Π°Π²Π½ΠΎΠ΅ Π·Π΄Π΅ΡΡ-ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ Π΄Π»Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΠΈΡ ΠΏΠΎΠ΄ ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ Π΅ΠΌΡ ΡΡΡΠ΅ΠΊΡ 3d. Π― Π·Π°ΡΡΠ°Π²ΠΈΠ» Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΉΠ΄Ρ Π½Π° ΡΠ°ΠΉΡΠ΅ Π²ΡΡΠ΅, Π½ΠΎ Ρ…
0
ΠΠ°ΠΉΡΠ΅ ΠΌΠ΅Π½Ρ Π²Π΅ΡΡ
Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ 0
#menu{
top:0;
}
#content{
margin-top: 50px;
}
Π ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈΠ»Ρ/ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ div Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡΠΎΠΌ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» id, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ Π²Ρ Π²ΡΠ±ΡΠ°Π»ΠΈ, Π½ΠΎ Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ ΡΡΠΈΡΠ°Π΅ΡΡΡ Π»ΡΡΡΠ΅ΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΡΠΉΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ID Π΄Π»Ρ javascript ΠΊΡΡΡΠΊΠΎΠ².
ΠΠΎΡ Π²Π°ΡΠ΅ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅: https://jsfiddle.net/8gjfLe5d/2/
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Mark Simpson Β Β 17 Π½ΠΎΡΠ±ΡΡ 2015 Π² 01:03
0
Π½Ρ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΏΠ°ΡΠ° ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅, Π²ΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π» @mgiesa, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ
top:0;
Π΄ΡΡΠ³Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌ ΡΠ΅Π³ΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ dafualt, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΡΡ Π°Π³Π΅Π½ΡΠΎΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ .content Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠ»Π°ΡΡΠ°, Ρ Π²Π°Ρ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΡΠΈΠΌ fiddle
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ javiercf Β Β 17 Π½ΠΎΡΠ±ΡΡ 2015 Π² 01:09
-1
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄Π°ΡΡ ΠΌΠ΅Π½Ρ id a top
ΠΈ left
#menu{
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
}
ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ: ΡΡΠΎ ΠΊΠ°ΠΊ-ΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅Π³ΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
https://jsfiddle. net/wgg9bkmr/2/
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ mgiesa Β Β 17 Π½ΠΎΡΠ±ΡΡ 2015 Π² 00:57
- iOS UITableView Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ
Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ UITableView ΡΠΎ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΠΈΠΌΡΡ Π²ΠΈΠ΄ΠΎΠΌ ΡΠ²Π΅ΡΡ Ρ ΠΈ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ Ρ ΡΠ΄Π΅Π»Π°Π» 3 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ: Π― Π΄ΡΠΌΠ°Π», ΡΡΠΎ ΡΠ΄Π΅Π»Π°Ρ UITableViewController ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ Π²ΠΈΠ΄ Π½Π°Π΄ ΡΡΠΎΠ»ΠΎΠΌ, Π½ΠΎ Ρ Π½Π΅ Π·Π½Π°Ρ, ΠΊΠ°ΠΊ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΠ°ΠΊΠΎΠ² Π½Π°ΠΈΠ»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎΠ³ΠΎ?
- Π£Π΄Π°Π»ΠΈΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ
ΠΠ½Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π§ΡΠΎ Π½Π΅ ΡΠ°ΠΊ Ρ ΠΌΠΎΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ? Π²ΠΎΡ ΡΡΠ° ΡΡΡΠ»ΠΊΠ°: http://liveweave.com/0M2mU9 ΠΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ.
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ΅Π½Ρ wordpress Π»ΠΈΠΏΠΊΠΈΠΌ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, Ρ ΠΏΡΡΠ°ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠ΅Π½Ρ wordpress Π»ΠΈΠΏΠΊΠΈΠΌ Π½Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΠΎΡ ΡΡΠΎ Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ Π² ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΏΠ»Π°Π½Π΅ http://dev. thegabrielmethod.com/ -ΡΡΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈΠΏΠΊΠΈΠΌ…
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΠ΅Π½Ρ
Π― ΡΠΎΠ·Π΄Π°Ρ ΡΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ HubSpot COS. Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ΅Π³ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΌΠ΅Π½Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ class =custom-menu-primary…
ΠΠ°Π½Π°Π²Π΅Ρ js Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ
ΠΠΎΡ ΡΠ΅Π»Ρ-ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π·Π°Π½Π°Π²Π΅ΡΠ° ΠΈ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ Π½Π° Π½Π΅ΠΌ. Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» curtain.js lib Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° curtain ΠΈ ΡΡΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΠ΅Π±Π½ΠΈΠΊ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ…
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ CSS3
ΠΡΠ»ΠΈ Π²Ρ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΌΠ΅Π½Ρ User , ΡΠΎ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠ»Π΅Π²Π° = 0. ΠΠΎ, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ΄ User ‘button’. ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? (ΡΠΎΠ»ΡΠΊΠΎ CSS3)
z-index issue — ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° css3 ΠΏΠΎΠ΄ ΠΌΠ΅Π½Ρ
ΠΡΠΈΠ²Π΅Ρ ΠΈ ΡΠΏΠ°ΡΠΈΠ±ΠΎ, ΡΡΠΎ Π½Π°ΡΠ»ΠΈ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΌΠΎΠ΅ΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅. Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ : ΠΠ»Π°Π²Π½ΠΎΠ΅ Π·Π΄Π΅ΡΡ-ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ Π΄Π»Ρ ΠΎΠ±Π΅ΠΈΡ ΡΡΠΎΡΠΎΠ½, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ. ..
iOS UITableView Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ
Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ UITableView ΡΠΎ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΠΈΠΌΡΡ Π²ΠΈΠ΄ΠΎΠΌ ΡΠ²Π΅ΡΡ Ρ ΠΈ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ Ρ ΡΠ΄Π΅Π»Π°Π» 3 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ: Π― Π΄ΡΠΌΠ°Π», ΡΡΠΎ ΡΠ΄Π΅Π»Π°Ρ UITableViewController ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ Π²ΠΈΠ΄ Π½Π°Π΄…
Π£Π΄Π°Π»ΠΈΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ
ΠΠ½Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π§ΡΠΎ Π½Π΅ ΡΠ°ΠΊ Ρ ΠΌΠΎΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ? Π²ΠΎΡ ΡΡΠ° ΡΡΡΠ»ΠΊΠ°: http://liveweave.com/0M2mU9 ΠΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ.
Π€ΠΈΠΊΡΠΈΡΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ΄ Π»ΠΈΠΏΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Bootstrap 4. Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ , ΠΏΠΎΠ΄ Π½ΠΈΠΌ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈΠΏΠΊΠΈΠΌ Π²Π΅ΡΡ ΠΎΠΌ . ΠΠΈΠΆΠ΅ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΡΠ΄ ΠΈΠ· 2 ΡΡΠΎΠ»Π±ΡΠΎΠ² . Π Π»Π΅Π²ΠΎΠΌ ΡΡΠΎΠ»Π±ΡΠ΅ Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡΡΠ°Π²Π°Π»ΡΡ…
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π»ΠΈΠΏΠΊΠΈΠΌ
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ. Π― ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΈ Ρ ΠΌΠΎΠ³Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ (ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΌΠ΅Π½Ρ Π±ΡΡΠ³Π΅ΡΠΎΠ² Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅), Π½ΠΎ Ρ Π½Π΅. ..
ΠΠΎΡΠ΅ΠΌΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ΄Π΅Ρ ΠΏΠΎΠ΄ Π»ΠΈΠΏΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ?
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΠ°Π±Π»ΠΈΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π΄Π²Π° ΡΡΠΎΠ»Π±ΡΠ° ΡΠΈΠΊΡΠΈΡΡΡΡΡΡ position = sticky, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ ΠΈΡ ΠΈΠ· ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Π² ΠΎΠ΄ΠΈΠ½ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ…
CSS ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (CSS position) // Β«Π€ΡΠΈΠ»Π°Π½ΡΠ΅Ρ ΠΏΠΎ ΠΆΠΈΠ·Π½ΠΈΒ»
StaticΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
Relative +top,left
Relative +z-index
Absolute+ position: relative; Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ +top,left
Absolute+top,left
Fixed+width: 100%;+top,left
Sticky*
.block-1
.block-2
.block-3
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right, bottom ΠΈ z-index Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ.
CSS ΠΊΠΎΠ΄:
.mainblock{
background-color: #eee; position: static;}
.block-1{
position: static;}
.block-2{
position: static;}
.block-3{
position: static;}
.block-1
.block-2
.block-3
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄Π΅. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
CSS ΠΊΠΎΠ΄:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: relative; top: 30px; left: 20px;}
.block-3{
}
.block-1
.block-2
.block-3
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊ Π½ΠΈΠΆΠ΅, ΡΠ°ΠΊ ΠΈ Π²ΡΡΠ΅ Π΄ΡΡΠ³ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ z-ΠΎΡΠΈ ΠΈ ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ z-index. ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Ρ ΠΊΠΎΡΠΎΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊ absolute, fixed ΠΈΠ»ΠΈ relative.
CSS ΠΊΠΎΠ΄:
. mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: relative; top: 30px; left: 20px;}
.block-3{
position: relative; z-index: 2;}
.block-1
.block-2
.block-3
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΊΠΎΠ±Ρ Π²ΡΡΡΠ²Π°Π΅ΡΡΡ ΠΈΠ· ΠΊΠΎΠ΄Π° ΠΈ Π·Π°Π²ΠΈΡΠ°ΠΉΡ Π² Π²ΠΎΠ·Π΄ΡΡ Π΅. ΠΠ½ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π΅Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Ρ ΠΊΠΎΠ»ΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ position: relative;
CSS ΠΊΠΎΠ΄:
. mainblock{
background-color: #eee; position: relative;}
.block-1{
}
.block-2{
position: absolute; top: 30px; left: 20px;}
.block-3{
}
.block-1
.block-2
.block-3
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΊΠΎΠ±Ρ Π²ΡΡΡΠ²Π°Π΅ΡΡΡ ΠΈΠ· ΠΊΠΎΠ΄Π° ΠΈ Π·Π°Π²ΠΈΡΠ°ΠΉΡ Π² Π²ΠΎΠ·Π΄ΡΡ Π΅. ΠΠ½ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π΅Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Ρ ΠΊΠΎΠ»ΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ position: relative; ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π½Π΅Ρ ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
CSS ΠΊΠΎΠ΄:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: absolute; top: 30px; left: 20px;}
.block-3{
}
.block-1
.block-2
.block-3
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΊΠΎΠ±Ρ Π²ΡΡΡΠ²Π°Π΅ΡΡΡ ΠΈΠ· ΠΊΠΎΠ΄Π° ΠΈ Π·Π°Π²ΠΈΡΠ°ΠΉΡ Π² Π²ΠΎΠ·Π΄ΡΡ Π΅. Π€ΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ, ΡΠΎ Π΅ΡΡΡ Π½Π΅ ΡΠΊΡΠΎΠ»ΠΈΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. ΠΠ½ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π΅Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² left, top, right ΠΈ bottom ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
CSS ΠΊΠΎΠ΄:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: fixed; width: 100%; top: 0px; left: 0px;}
.block-3{
}
.block-1
.block-2
.block-3
ΠΡΠΎ Π³ΠΈΠ±ΡΠΈΠ΄Π½ΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ static ΠΈ fixed. ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ static Π½ΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠΊΡΠΎΠ»Π» Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠ½ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ fixed ΠΈ ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π΅Ρ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ top ΠΈΠ»ΠΈ bottom.
* Π‘ΠΌΠΎΡΡΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
** ΠΠ»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ°Π±ΠΎΡΡ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΊΡΠΎΠ»ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ°
CSS ΠΊΠΎΠ΄:
. mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: sticky; top: 0px;}
.block-3{
}
position | CSS (ΠΡΠΈΠΌΠ΅ΡΡ)
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
/* Keyword values */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
/* Global values */
position: inherit;
position: initial;
position: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
absolute
- ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ»ΠΎΠ²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Ρ. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π΄Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ
left
,top
,right
ΠΈbottom
, ΡΠ°ΠΊΠΆΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°position
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’Π°ΠΊ, Π΅ΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅position
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊstatic
ΠΈΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π½Π΅Ρ, ΡΠΎ ΠΎΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄ΡΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠ»ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅position
Π·Π°Π΄Π°Π½ΠΎ ΠΊΠ°ΠΊrelative
, ΡΠΎ ΠΎΡΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π²Π΅Π΄ΡΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. fixed
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ
absolute
, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈleft
,top
,right
ΠΈbottom
ΡΠΎΡΠΊΠ΅ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. relative
- ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²
left
,top
,right
ΠΈbottom
ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠ΄Π²ΠΈΠ³Π°Π΅Ρ Π΅Π³ΠΎ Π² ΡΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Ρ ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. static
- Π‘ΡΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²
left
,top
,right
ΠΈbottom
Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌ. sticky
- ΠΡΠΎ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ. ΠΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΡΠ°ΡΠ·Π΅Ρ Safari ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ -webkit-sticky
.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: static
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
position: fixed
:
Can I Use css-fixed? Data on support for the css-fixed feature across the major browsers from caniuse. com.
position: sticky
:
Can I Use css-sticky? Data on support for the css-sticky feature across the major browsers from caniuse.com.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>position</title>
<style>
.layer1 {
position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
background: #f0f0f0; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */
height: 200px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */
}
.layer2 {
position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
bottom: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ */
right: 15px; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src="image/girl.jpg" alt="ΠΠ΅Π²ΠΎΡΠΊΠ°" />
</div>
</div>
</body>
</html>
Π‘ΡΡΠ»ΠΊΠΈ
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
: h3
{
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ » ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ «ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ» Π½ΠΈΠΆΠ΅.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΎΠ·ΠΈΡΠΈΡ Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: β ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅: Π½Π΅Ρ. ΠΡΠΎΡΠΈΡΠ°ΡΡ ΠΎ animatable ΠΠ΅ΡΡΠΈΡ: CSS2 Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: ΠΎΠ±ΡΠ΅ΠΊΡ .style.position = «absolute»
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΡΠΎ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π§ΠΈΡΠ»Π° Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΠ±ΡΠ΅ΠΊΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ 1,0 7,0 1,0 1,0 4,0
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Internet Explorer, Edge 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ | Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ | ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ | ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ | Π»ΠΈΠΏΠΊΠ°Ρ | Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΠ³ΡΠ°ΠΉ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² ΠΠ³ΡΠ°ΠΉ Β» Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ (Π½Π΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ) ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΏΡΠ΅Π΄ΠΊΠ° ΠΠ³ΡΠ°ΠΉ Β» ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΠ³ΡΠ°ΠΉ Β» ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ "left: 20px"
Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊ ΠΠΠΠΠ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΠ³ΡΠ°ΠΉ Β» Π»ΠΈΠΏΠΊΠΈΠΉ ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° Π·Π°Π΄Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎ Π²ΡΡΠΏΠΎΡΡΠ΅ - Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Β«Π·Π°ΡΡΡΠ΅Π²Π°Π΅ΡΒ» Π½Π° ΠΌΠ΅ΡΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, position: fixed).
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² IE / Edge 15 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Safari Ρ Π²Π΅ΡΡΠΈΠΈ 6.1 Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ -webkit-. ΠΠΎΠΏΡΠΎΠ±ΡΠΉ Β» Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΠ³ΡΠ°ΠΉ Β» Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.Π§ΠΈΡΠ°ΡΡ ΠΏΡΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΠ²ΠΎ
ΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ°ΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
h3.pos_left {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: -20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
} h3. pos_right {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ " ΠΡΠΈΠΌΠ΅Ρ
ΠΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
# parent1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
} # child1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ:
Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ
: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
# parent2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
# child2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ
: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ "
ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ
Π£ΡΠ΅Π±Π½ΠΈΠΊ CSS: ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ CSS
Π‘ΡΡΠ»ΠΊΠ° HTML DOM:
ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
ΠΏΠΎΠ·ΠΈΡΠΈΡ - CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
CSS ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΡΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ
ΡΠ°Π½ΠΈΡΡΡ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ GitHub. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π²Π½Π΅ΡΡΠΈ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡΠΎΠ΅ΠΊΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠ»ΠΎΠ½ΠΈΡΡΠΉΡΠ΅ https://github.com/mdn/interactive-examples ΠΈ ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ Π½Π°ΠΌ Π·Π°ΠΏΡΠΎΡ Π½Π° ΠΏΠ΅ΡΠ΅Π½ΠΎΡ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π½ΠΈΠΆΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
-
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π‘Π²ΠΎΠΉΡΡΠ²Π°
Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
ΠΈ z-index
ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° . ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. -
ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π±Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
Π²Π²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, Π²Π½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²; ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π±ΡΠ»Π° static
. - ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
z-index
Π½Π΅ ΡΠ°Π²Π½ΠΎ auto
. ΠΠ³ΠΎ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ table - * - group
, table-row
, table-column
, table-cell
ΠΈ table-caption
Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ. -
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π½Π΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ°, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ ΠΈΠΌΠ΅Π΅ΡΡΡ; Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ³ΠΎ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ
Π²Π²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, Π²Π½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
. - ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
z-index
Π½Π΅ ΡΠ°Π²Π½ΠΎ auto
. ΠΠΎΠ»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ. -
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ², ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π½Π΅ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΎΠΊΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅Π², ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅
, ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ
ΠΈΠ»ΠΈ ΡΠΈΠ»ΡΡΡ
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ Π½Π° ΡΡΠΎ-ΡΠΎ ΠΈΠ½ΠΎΠ΅, ΡΠ΅ΠΌ Π½Π΅Ρ
(ΡΠΌ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ CSS) , ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎΡ ΠΏΡΠ΅Π΄ΠΎΠΊ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ. (ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π½Π΅ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Ρ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²ΠΎΠΉ
ΠΈ ΡΠΈΠ»ΡΡΡΠΎΠΌ
, ΡΠΏΠΎΡΠΎΠ±ΡΡΠ²ΡΡΡΠΈΠΌ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.) ΠΠ³ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
. - ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. Π ΠΏΠ΅ΡΠ°ΡΠ½ΡΡ
Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ .
-
Π»ΠΈΠΏΠΊΠΈΠΉ
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° (Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ°), Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΠ°Π±Π»ΠΈΡΠ΅ΠΉ, Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
top
, ΡΠΏΡΠ°Π²Π°
, ΡΠ½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
.Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². - ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠ·Π΄Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π»ΠΈΠΏΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Β«ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π΅ΡΒ» ΠΊ ΡΠ²ΠΎΠ΅ΠΌΡ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅ΠΌΡ ΠΏΡΠ΅Π΄ΠΊΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΅ΡΡΡ Β«ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈΒ» (ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
ΡΠΊΡΡΡΠΎ , ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
, Π°Π²ΡΠΎ
ΠΈΠ»ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅
), Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΠΎΡ ΠΏΡΠ΅Π΄ΠΎΠΊ Π½Π΅ t Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ, Π²ΡΠΏΠΎΠ»Π½ΡΡΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΡ. ΠΡΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ Π»ΡΠ±ΠΎΠ΅ Β«Π»ΠΈΠΏΠΊΠΎΠ΅Β» ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ (ΡΠΌ. ΠΡΠΎΠ±Π»Π΅ΠΌΡ GitHub Π½Π° W3C CSSWG).
Π’ΠΈΠΏΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
- ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈΠ±ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ , Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ
, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΌ
. (ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΡΠΎ ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ, ΠΊΡΠΎΠΌΠ΅ static
.) - ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ°Π²Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
. Π‘Π²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ; ΡΠ²ΠΎΠΉΡΡΠ²Π° left
ΠΈ right
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. - ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ°Π²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
. Π‘Π²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡ ΠΊΡΠ°Π΅Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. (Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.) ΠΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΠΏΠΎΠ»Ρ, ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° (BFC) Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. - ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π»ΠΈΠΏΠΊΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ°Π²Π½ΠΎ Π»ΠΈΠΏΠΊΠΎΠ΅
. ΠΠ½ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π΅Π³ΠΎ Π±Π»ΠΎΠΊ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° top
Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ auto) Π² Π΅Π³ΠΎ ΠΊΠΎΡΠ½Π΅ ΠΏΠΎΡΠΎΠΊΠ° (ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ), ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Β«Π·Π°ΡΡΡΡΠ²ΡΠΈΠΉΒ» Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π²ΡΡΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π²ΡΡΠΎΡΠΎΠΉ
ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π½Π° Π°Π²ΡΠΎ
, ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ.ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΊΠ°Π·Π°Π² ΠΊΠ°ΠΊ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΡΠ°ΠΊ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ ΠΎΡΡΠ°Π²ΠΈΠ² Π²ΡΡΠΎΡΡ
Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ (ΡΠΎ Π΅ΡΡΡ Π°Π²ΡΠΎ
). ΠΡ
ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΊΠ°Π·Π°Π² ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
ΠΈ ΠΎΡΡΠ°Π²ΠΈΠ² ΡΠΈΡΠΈΠ½Ρ
ΠΊΠ°ΠΊ Π°Π²ΡΠΎ
.
ΠΠ° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ»ΡΡΠ°Ρ (Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π·Π°ΠΏΠΎΠ»Π½ΡΡΡΠΈΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ):
- ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½Ρ ΠΈ
Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
(ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈ, Π½Π΅ Π°Π²ΡΠΎ
), Π²ΡΠΈΠ³ΡΡΠ²Π°Π΅Ρ Π²Π΅ΡΡ
Π½ΠΈΠΉ
. - ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½Ρ ΠΎΠ±Π°
left
ΠΈ right
, left
ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅
ΡΠ°Π²Π½ΠΎ ltr
(Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ, Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΠ½ΡΠΊΠΈΠΉ ΠΈ Ρ. Π.) Π right
Π²ΡΠΈΠ³ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅
ΡΠ°Π²Π½ΠΎ rtl
(ΠΏΠ΅ΡΡΠΈΠ΄ΡΠΊΠΈΠΉ, ΠΡΠ°Π±ΡΠΊΠΈΠΉ, ΠΈΠ²ΡΠΈΡ ΠΈ Π΄Ρ.).
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
, Π½Π΅ Π·Π°ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°.
ΠΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ
ΠΡΠΎΠΊΡΡΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡΡ.ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΉ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ ΡΠΎ ΡΠΊΠΎΡΠΎΡΡΡΡ 60 ΠΊΠ°Π΄ΡΠ° Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ , Π²ΡΠ·ΡΠ²Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½Π½ΠΎΠΉ ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ Π΄ΡΡΠ½Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ
. ΠΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΡΠ΅Π½ΠΈΠΉ — Π΄ΠΎΠ±Π°Π²ΠΈΡΡ will-change: transform
ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΠ»ΠΎΠ΅, ΡΠ»ΡΡΡΠΈΠ² ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ»ΡΡΡΠΈΠ² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ.
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ | ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ | Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ | Π»ΠΈΠΏΠΊΠΈΠΉ | ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΌΠ΅ΡΠ΅Π½Ρ Π½Π° Π·Π°Π΄Π°Π½Π½ΡΡ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ ΠΎΡ ΠΈΡ
Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π½ΠΎ Π±Π΅Π· Π²Π»ΠΈΡΠ½ΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Ρ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Β«ΠΠ²Π°Β» Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
HTML
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
CSS
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
.box {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΡΠ²Π΅Ρ Π±Π΅Π»ΡΠΉ;
}
#Π΄Π²Π° {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ;
}
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, ΠΎΡΡΠ°ΡΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΏΡΠΎΡΠΈΠ², Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ· ΠΏΠΎΡΠΎΠΊΠ°; ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π΅Π³ΠΎ Π½Π΅ Π±ΡΠ»ΠΎ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° (Ρ.Π΅.Π΅. Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ static
). ΠΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ, ΠΎΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ICB (Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ — ΡΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ W3C), ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
HTML
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π― ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ. Π‘ΠΎΡΠ΅Π΄Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ
ΡΡΡΠΎΠΊΠ°Ρ
Π½ΠΈΠΆΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΌΡ ΠΏΠΎΠΊΡΡΠ²Π°Π΅ΠΌ 100% ΡΠΈΡΠΈΠ½Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ ΠΌΡ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π½Π°ΡΠ΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ°ΡΠ° ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° - ΡΡΠΎ Π½Π°ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ + ΠΎΡΡΡΡΠΏ + ΡΠΈΡΠΈΠ½Π° / Π²ΡΡΠΎΡΠ° Π³ΡΠ°Π½ΠΈΡΡ.
ΠΠ°Ρ ΡΠ°Π·Π΄Π΅Π»ΡΡΡ Π½Π°ΡΠΈ ΠΏΠΎΠ»Ρ. ΠΠ·-Π·Π° ΡΠΆΠ°ΡΠΈΡ ΠΏΠΎΠ»Ρ ΠΌΡ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΡΠΈΡ
ΠΏΠΎΠ»Π΅ΠΉ, Π° Π½Π΅ ΠΎΠ±ΠΎΠΈΡ
.
Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ , ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΡΠΎΠΌΡ ΠΈ this , ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ ΠΈ ΡΠΌΠ΅ΠΆΠ½ΡΠΌΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌΠΈ ΡΠ·Π»Π°ΠΌΠΈ, Π΅ΡΠ»ΠΈ Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠΎΠΊΠ΅ Π΅ΡΡΡ ΠΌΠ΅ΡΡΠΎ. ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΠΈΠ΅ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ - ΠΊΠ°ΠΊ ΡΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ ΡΠ΅ΠΊΡΡ , ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΠ΅ ΠΊ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, Π΅ΡΠ»ΠΈ Π½Π΅Ρ, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Ρ ΡΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ:
CSS
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
body {
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
}
ΠΏ {
ΡΠΎΠ½: ΡΠ²Π΅Ρ ΠΌΠΎΡΡΠΊΠΎΠΉ Π²ΠΎΠ»Π½Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ 3px;
ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΡΠΆΠ°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
span {
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ 1px;
}
.positioned {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠΎΠ½: ΠΆΠ΅Π»ΡΡΠΉ;
Π²Π΅ΡΡ
: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ ΠΎΠΊΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° , Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΡΠ΅Π΄ΠΎΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅
, ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ
ΠΈΠ»ΠΈ ΡΠΈΠ»ΡΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ none
(ΡΠΌ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ CSS), ΡΡΠΎ Π·Π°ΡΠ΅ΠΌ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π·Π°Π½ΡΡΡ ΠΌΠ΅ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
Π±Π»ΠΎΠΊ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Β«ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎΒ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠ»Π΅ Β«ΠΠ΄ΠΈΠ½Β» Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΠ°ΠΆΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
HTML
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis.
Vestibulum ante ipsum primis Π² faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror.
Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum.Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis.
Vestibulum ante ipsum primis Π² faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror.
Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
ΠΠ΄ΠΈΠ½
CSS
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
. box {
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΡΠ²Π΅Ρ Π±Π΅Π»ΡΠΉ;
}
#ΠΎΠ΄ΠΈΠ½ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ;
}
.outer {
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°: 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π³ΠΈΠ±ΡΠΈΠ΄ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ, ΠΏΠΎΠΊΠ° Π½Π΅ Π΄ΠΎΡΡΠΈΠ³Π½Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ …
#one {position: sticky; Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
… ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½Π° ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»ΡΡ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΌΠ΅Π½Π΅Π΅ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ
Π°. ΠΠ° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠ³Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ Π½Π° 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ
Ρ.
ΠΠ±ΡΡΠ½ΠΎ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π² Π°Π»ΡΠ°Π²ΠΈΡΠ½ΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«BΒ» Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΡΡΡ Π½ΠΈΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
ΡΡ Ρ Β«AΒ», ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΊΡΠ°Π½Π°.ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΊΡΠ°Π½Π° Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«BΒ» Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΌ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Β«BΒ» Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΊΡΠ°Π½Π°, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΊΡΡΡ Π±ΡΠΊΠ²ΠΎΠΉ Β«CΒ» Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΡΠΎΠ³ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈΠ»ΠΈ Π»Π΅Π²ΡΠΉ
, ΡΡΠΎΠ±Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΅Π³ΠΎ Π½Π΅Π»ΡΠ·Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠΈΡΡ ΠΎΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
HTML
- Π
- ΠΠ½Π΄ΡΡ Π.Π.
- ΠΠΏΠΏΠ°ΡΠ°Ρ
- Arcade Fire
- Π£ ΠΏΠΎΠ΄ΡΠ΅Π·Π΄Π°
- ΠΠ·ΠΈΠ· ΠΠ½ΡΠ°ΡΠΈ
- C
- Chromeo
- ΠΠ±ΡΡΠ½ΡΠΉ
- Π‘Π²Π΅ΡΡΠΈ
- Π₯ΡΡΡΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π°ΠΌΠΊΠΈ
- ΠΡΡΡΠΈΠ²
- E
- ΠΠ·ΡΡΠ²Ρ Π² Π½Π΅Π±Π΅
- Π’
- Π’Π΅Π΄ ΠΠ΅ΠΎ & amp; Π€Π°ΡΠΌΠ°ΡΠ΅Π²ΡΡ
- Π’-ΠΠ΅ΠΉΠ½
- Π’ΡΠΈΠΆΠ΄Ρ
- Π’Π΅Π»Π΅Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ°Π΄ΠΈΠΎ
- ΠΠ²Π° Π³Π°Π»Π°Π½ΡΠ°
CSS
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
dl> div {
ΡΠΎΠ½: #FFF;
ΠΎΡΡΡΡΠΏ: 24px 0 0 0;
}
dt {
ΡΠΎΠ½: # B8C1C8;
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ 1px # 989EA4;
border-top: 1px solid # 717D85;
ΡΠ²Π΅Ρ: #FFF;
ΡΡΠΈΡΡ: ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ 18px / 21px Helvetica, Arial, sans-serif;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 2px 0 0 12px;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: -webkit-sticky;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠΏΠΊΠΎΠ΅;
Π²Π΅ΡΡ
: -1px;
}
dd {
ΡΡΠΈΡΡ: ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ, 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ / 45 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Helvetica, Arial, Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 0 0 0 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π±Π΅Π»ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ: nowrap;
}
dd + dd {
Π²Π΅ΡΡ
Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ 1px #CCC;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Π’Π°Π±Π»ΠΈΡΡ BCD Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
CSS Positioning 101 — A List Apart
ΠΡΠ»ΠΈ Π²Ρ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π»ΡΠ±ΠΈΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°ΡΡ, ΠΌΠ°ΠΊΠ΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS Π»Π΅ΠΆΠ°Ρ Π² ΠΎΡΠ½ΠΎΠ²Π΅ Π²Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ. Π ΡΠΎΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΠ²Π΅ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Β«Π°-Ρ
Π°!Β» Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ
Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS position
, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΡ
ΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS Π±Π΅Π· ΡΠ°Π±Π»ΠΈΡ.
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ Π½ΠΈΠΆΠ΅
CSS-ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΡΡΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. ΠΠ½ΠΎΠ³Π΄Π°, Π² ΡΡΠΎΡΡΠΈ ΠΎΡ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ, ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠΎ ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ, Π½ΠΎ Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΡ , ΠΏΠΎΡΠ΅ΠΌΡ , ΡΠΊΠ°Π·Π°Π² ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ position: relative
, ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ Π²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΡ ΠΌΠ°ΠΊΠ΅ΡΠ°.Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΡΠ·Π½Π°ΡΡ ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΈ, ΡΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ.
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π°ΠΌ ΠΏΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² position
: static
, relative
, absolute
, fixed
ΠΈ Π½Π°ΡΠ»Π΅Π΄Ρ
. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ»ΡΠΆΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅Π»ΠΈ. ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ — ΠΊΠ»ΡΡ ΠΊ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS.
ΠΠΎΠ»ΡΡΠΈΡΡ Ρ ΠΏΠΎΡΠΎΠΊΠΎΠΌ # section2
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ°Π³ Π½Π°Π·Π°Π΄, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ ΠΌΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ.ΠΠ°ΠΊ ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΌΠΈΡΠ΅, Π² CSS ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Π² ΡΠ°ΠΌΠΊΠ°Ρ
Π³ΡΠ°Π½ΠΈΡ. Π CSS ΡΡΠ° Π³ΡΠ°Π½ΠΈΡΠ° Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ. Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS 2.1:
ΠΠ»ΠΎΠΊΠΈ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ, Π½ΠΎ Π½Π΅ ΠΎΠ±ΠΎΠΈΠΌΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΠ»ΠΎΠΊ-Π±ΠΎΠΊΡΡ ΡΡΠ°ΡΡΠ²ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°. ΠΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΡΡΠ°ΡΡΠ²ΡΡΡ Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎ Β«ΡΠΊΠ°ΡΡΠ»ΠΊΠ΅Β», ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠΉ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΊΠ°ΠΊ ΠΎ Π΄Π΅ΡΠ΅Π²ΡΠ½Π½ΠΎΠΌ Π±ΡΡΡΠΊΠ΅, ΠΏΠΎΡ
ΠΎΠΆΠ΅ΠΌ Π½Π° ΡΠ΅, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π²Ρ ΠΈΠ³ΡΠ°Π»ΠΈ Π² ΡΠ½ΠΎΡΡΠΈ.Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠ΅Π±Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ ΠΊΠ°ΠΊ Π·Π°ΠΊΠΎΠ½, ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ Π·Π°ΠΊΠΎΠ½Ρ Π²ΡΠ΅ΠΌΠΈΡΠ½ΠΎΠ³ΠΎ ΡΡΠ³ΠΎΡΠ΅Π½ΠΈΡ. ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° — ΡΡΠΎ ΡΠΎ, ΠΊΠ°ΠΊ Π²Π°ΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π°Π΄ Π΄ΡΡΠ³ΠΎΠΌ, ΡΠ²Π΅ΡΡ
Ρ Π²Π½ΠΈΠ·, Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² Π²Π°ΡΠ΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅. ΠΡ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π»ΠΈ Π±Π»ΠΎΠΊΠΈ Ρ Π°Π»ΡΠ°Π²ΠΈΡΠΎΠΌ Π² Π³ΠΈΠ³Π°Π½ΡΡΠΊΠΈΠ΅ Π±Π°ΡΠ½ΠΈ: ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ Π½ΠΈΡΠ΅ΠΌ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠ΅Ρ
Π΄Π΅ΡΠ΅Π²ΡΠ½Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΡΠ·Π°Π½Ρ Π·Π°ΠΊΠΎΠ½ΠΎΠΌ Π³ΡΠ°Π²ΠΈΡΠ°ΡΠΈΠΈ. Π Π΄Π΅ΡΡΡΠ²Π΅ Ρ Π²Π°Ρ Π±ΡΠ» ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ ΠΏΠΎΠ²Π΅ΡΡ
Π΄ΡΡΠ³ΠΎΠ³ΠΎ; Π² Π²Π°ΡΠ΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ Π² Π΄Π΅ΡΡΡΠ²Π΅ Π²Ρ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΡΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΠ»ΠΈ Π·Π°ΠΊΠΎΠ½Ρ Π³ΡΠ°Π²ΠΈΡΠ°ΡΠΈΠΈ.ΠΠ½Π΅Π·Π°ΠΏΠ½ΠΎ CSS ΠΊΠ°ΠΆΠ΅ΡΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΡΡΡΠ΅, ΡΠ΅ΠΌ ΡΡΠΈ Π±Π»ΠΎΠΊΠΈ Π°Π»ΡΠ°Π²ΠΈΡΠ°.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ — Π·Π΄Π΅ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ # section3
Π‘Π²ΠΎΠΉΡΡΠ²Π° static
ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
position
Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π²Π°ΡΠΈ Π΄Π΅ΡΡΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ — ΠΎΠ½ΠΈ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ, ΠΊΠ°ΠΊ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ static
— ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ Π΅ΡΡΡ ΡΡΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΈ, ΠΊΠ°ΠΊ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ, Π±ΡΠ΄ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅ΡΡ
Π΄ΡΡΠ³ΠΎΠ³ΠΎ.ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ,
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
:
# box_1 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
# box_3 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # b7d84b;
}
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ A Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΏΡΠΎΡΡΠΎΠΉ Π±Π°ΡΠ½ΠΈ. ΠΡΠ°ΡΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½Π΅ ΠΏΡΠ°Π²Π΄Π° Π»ΠΈ? ΠΡΠΎ Π±Π»ΠΎΡΠ½ΡΠΉ Π΄ΠΎΠΌ 101.ΠΠΎΠ·Π΄ΡΠ°Π²Π»ΡΡ!
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΡΠΎΠ»Π±ΡΠΎΠΌ, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π½Π°ΡΠ°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
, Π²Π°ΠΌ Π½Π΅ ΠΏΠΎΠ²Π΅Π·Π»ΠΎ. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅. ΠΠ°ΠΊΠ°Ρ? ΠΡ ΠΏΠΎΡΠ΅ΡΡΠ»ΠΈ ΠΌΠ΅Π½Ρ Π² ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ . Π ΠΎΠ΄ΠΆΠ΅Ρ, Π ΠΎΠ΄ΠΆΠ΅Ρ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ; ΠΎΠ½ΠΈ Ρ
ΠΎΡΠΎΡΠΎ ΠΈΠ³ΡΠ°ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ, Ρ
ΠΎΡΠΎΡΠΎ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΈ Π½Π΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΡΠΌΠ°. Π’ΡΡΠ΄Π½ΠΎ ΠΏΠΎΠ²Π΅ΡΠΈΡΡ, ΠΏΡΠ°Π²Π΄Π°? ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π½Π°Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
:
# box_1 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
# box_3 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # b7d84b;
}
ΠΡΠΈΠΌΠ΅Ρ B Π΄ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π½Π΅ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° ΠΠ»Π°ΡΠΊΠ° ΠΠ΅Π½ΡΠ° — ΠΎΠ½ΠΈ ΡΠΊΡΡΠ²Π°ΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠΈΠ»Ρ, ΡΠ΅ΠΌ ΠΈΡ
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π±ΡΠ°ΡΡΡ ΠΈ ΡΠ΅ΡΡΡΡ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ: Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΊ # box_2
:
# box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠ»Π΅Π²Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
ΠΡΠΈΠΌΠ΅Ρ C ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.ΠΠ°ΡΠΈ ΡΡΠΈ Π±Π»ΠΎΠΊΠ° Ρ
ΠΎΡΠΎΡΠΎ ΡΠ»ΠΎΠΆΠ΅Π½Ρ, Π½ΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ ( # box_2
) Π²ΡΠ΄Π²ΠΈΠ½ΡΡ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π°. ΠΠ΄Π΅ΡΡ ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠΈΠ½ΡΡΡ Π·Π°ΠΊΠΎΠ½ Π²ΡΠ΅ΠΌΠΈΡΠ½ΠΎΠ³ΠΎ ΡΡΠ³ΠΎΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠ΅ΠΉ Π²ΠΎΠ»Π΅. Π‘ΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° — ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π° — Π½ΠΎ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π·Π΅Π»Π΅Π½ΡΠΉ Π±Π»ΠΎΠΊ ( # box_3
) Π²Π½ΠΈΠ·Ρ. ΠΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ ΡΠΈΠ½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, Ρ
ΠΎΡΡ ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ Π½Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΡΠΌΠΎ Π½Π°Π΄ Π½ΠΈΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΎ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.ΠΠ΅Π»Π΅Π½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΡΠΈΠ½ΠΈΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ Π½Π΅ΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±Π°ΡΠ½ΠΈ ΠΈΠ· Π°Π»ΡΠ°Π²ΠΈΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² — Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΡΡΠΏΠ΅ΡΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π‘ΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΡΠΊΠΎΠΉ ΠΎΡΡΡΠ΅ΡΠ° Π΄Π»Ρ ΠΎΡΡΠ΅ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ². ΠΡΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ C Π½Π°Ρ ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ ( # box_2
) Π½Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ΅Π±Ρ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π°, — ΡΡΠΎ ΡΠ°ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.ΠΡΠ»ΠΈ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ # box_2
Π²Π½ΡΡΡΠΈ # box_1
, ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ # box_2
Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈΠ· # box_1
. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ CSS, ΠΌΡ ΡΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΡΠ΅ΠΌ Π½Π°Ρ HTML, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ # box_2
Π²Π½ΡΡΡΡ # box_1
:
.
ΠΡΠΈΠΌΠ΅Ρ D ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. ΠΠ·-Π·Π° Π½ΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ ΠΈΠ·ΠΌΠ΅ΡΡΠ΅Ρ ΡΠ²ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ( # box_1
) Π²ΠΌΠ΅ΡΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.ΠΡΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π° Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌΠΈ Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
— ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ Ρ
ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΡΡΡΠΎΠΈΡΡ Π±Π°ΡΠ½ΠΈ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ»ΠΈ ΠΌΠΎΠ»ΠΎΠΆΠ΅.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠΉ — Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΈ Π² Π»ΡΠ±ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ # section4
ΠΡΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ Π‘ΡΠΏΠ΅ΡΠΌΠ΅Π½, ΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΎΡΡΠ°ΠΆΠ°Π΅Ρ ΠΠ°ΡΠ°Π»ΠΎ — ΠΌΠ΅ΡΡΠΎ, Π³Π΄Π΅ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠΈΡ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ static
ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π³Π΄Π΅ ΡΠ³ΠΎΠ΄Π½ΠΎ, ΠΈ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΈΠ»ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΡΡΠΎΠ½ΡΡ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² ΠΏΠΎΡΠΎΠΊΠ΅. ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΎΠ± ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Ρ Π³ΠΈΠ³Π°Π½ΡΡΠΊΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠΎΠΉ Π½Π° Π»ΠΈΠΏΡΡΠΊΠ΅ Π½Π° ΡΠΏΠΈΠ½Π΅. ΠΡΠΎΡΡΠΎ ΡΠΊΠ°ΠΆΠΈ Π΅ΠΌΡ, ΠΊΡΠ΄Π° ΠΏΡΠΈΠΊΠ»Π΅ΠΈΡΡ, ΠΈ ΠΎΠ½ ΠΏΡΠΈΠ»ΠΈΠΏΠ½Π΅Ρ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅Π°Π³ΠΈΡΡΡΡ Π½Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ top: 100px
ΠΈ left: 200px;
, ΠΈ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠΎΠ²Π½ΠΎ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ
Ρ ΠΈ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π° ΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΡΡΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
# box_1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
# box_3 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # b7d84b;
}
# box_4 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ebde52;
}
ΠΡΠΈΠΌΠ΅Ρ E ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅ΡΡΡΠ΅ ΠΏΠΎΠ»Ρ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π² ΡΠ³Π»Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
, ΠΌΡ ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΠ»ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ³Π»Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠΈ ΠΏΠΎΠ»Ρ ΠΎΡΡΠ°Π½ΡΡΡΡ Π² ΡΠ²ΠΎΠΈΡ
ΡΠ³Π»Π°Ρ
. ΠΡΠ»ΠΈ Π²Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π»ΠΈΡΡ, Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ - ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π²ΡΡ
ΠΎΠ΄ΡΡ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΡΠΈΠΌΠ΅Ρ F ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Ρ E Ρ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π§ΡΠΎΠ±Ρ Π½Π΅ ΡΡΡΡΠΏΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° offset. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄Π²Π° ΠΈΠ»ΠΈ Π²ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ - ΠΎΠ½ ΡΠ²ΡΠ·Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΈΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΡΠΎ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
#box_a {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΠΏΡΠ°Π²ΠΎ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π½ΠΈΠ·Ρ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
}
#box_b {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π½ΠΈΠ·Ρ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: Π±Π΅Π»ΡΠΉ;
}
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ G ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π½Π° 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΈ ΠΎΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° - Π²ΡΠ΅ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ
. Π Π΄ΡΡΠ³ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²ΡΡ Π²ΡΡΠΎΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.ΠΠΎΡ CSS:
# box_1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 20%;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 0;
Π²Π½ΠΈΠ·Ρ: 0;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 80%;
ΡΠΎΠ½: # b7d84b;
}
ΠΡΠΈΠΌΠ΅Ρ H ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ· Π΄Π²ΡΡ
ΡΡΠΎΠ»Π±ΡΠΎΠ². Π₯ΠΎΡΡ ΡΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π½Π΅ Π»ΡΡΡΠΈΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΠΊ Π΄Π²ΡΡ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅, ΠΎΠ½ Π²ΡΠ΅ ΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΌΠΎΡΠ½ΠΎΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ Π²ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
. ΠΡΠΎΡΠ²ΠΈΠ² ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ : Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ
.ΠΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠ»ΠΎΠ²ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
# box_1 {
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ h3 ΡΡΠΎΠΊΡΡΠΈΡΡΠΉΡΠ΅ΡΡ Π½Π° ΡΠΈΠ½Π΅ΠΌ Π±Π»ΠΎΠΊΠ΅ ( # box_2
). ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, left: 100px;
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ # box_2
ΡΠΎΡ
ΡΠ°Π½ΡΡΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ ΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ΄Π²ΠΈΠ³Π°ΡΡ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π»Π΅Π²ΠΎ.ΠΡΠ»ΠΈ Π±Ρ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ Π²ΡΠΎΡΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊ Π²Π΅ΡΡ
Ρ, ΠΌΡ Π±Ρ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ, ΡΡΠΎ Π½Π°Ρ ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ ( # box_2
) Π²ΡΡΡΠ½ΡΡ Π² Π²Π΅ΡΡ
Π½ΡΡ ΡΠ°ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π·Π΄Π΅ΡΡ, Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ h4:
# box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
ΠΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ - Π²ΡΠ΅Π³Π΄Π° Π΅ΡΡΡ # section5
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ.
ΡΠ°Π·Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° / ΡΡΡΡΠΎΠΉΡΡΠ²Π°) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ, Π½Ρβ¦ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ:
# box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΏΡΠ°Π²Π°: 0;
}
ΠΡΠΈΠΌΠ΅Ρ I ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΎΠ± Π°Π²ΡΠΎΡΡΠΊΠΈΡ
ΠΏΡΠ°Π²Π°Ρ
Π² Π½Π΅ΠΌ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΠ½ Π½Π΅ Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π½Π° Π½ΠΎΠ»Ρ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΈΠΊΡΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ·Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ bottom: 0;
. ΠΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
: ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π² ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Π² Π»ΡΡΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ΠΎΠ΄Π½ΠΎΡΠΎΠ΄Π½Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Internet Explorer ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Π΅ΡΠ½ΠΎ? ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅, Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π²Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
.
Inherit - ΠΠ΅ΡΡΠΎ Π½Π°ΠΏΡΠ°ΡΠ½ΠΎ # section6
ΠΠ°ΠΊ Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΏΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. ΠΡΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ - Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
. ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ: ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ - ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position
. Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π²Π΅ΡΡΠΈ , Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
ΠΈΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
Π Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ # section7
ΠΡΠ΅ ΡΡΠΈ ΡΠ°Π·Π³ΠΎΠ²ΠΎΡΡ ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΠ΅Π°Π»ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ J ΠΏΠΎΠΊΠ°Π·Π°Π½ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»ΠΎΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΠΉΠ΄Π΅ΠΌΡΡ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ±ΡΡΠ΄ΠΈΠΌ Π΅Π³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ ΠΌΡ Π²ΡΠ±ΡΠ°Π»ΠΈ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #container
.ΠΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ #nav
- ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ #container
. ΠΠ»Π΅ΠΌΠ΅Π½Ρ position
Π½Π΅ Π½Π°Π·Π½Π°ΡΠ΅Π½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ #nav
, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
. ΠΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ: Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Ρ Π½ΠΈΠΌ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π½ΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ #content
Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
, ΡΠ°Π²Π½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π΄Π΅ΡΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position
Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π»ΠΈΡΠ½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ #content
, Π½ΠΎ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #callout
. ΠΠ»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #callout
Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position: absolute
, Π° ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, #content
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ relative
, ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π² #callout
, ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ
. ΠΏΠΎ # ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
.ΠΠ»Π΅ΠΌΠ΅Π½Ρ #callout
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΏΡΠ°Π²Π°, ΡΡΠΎΠ±Ρ Π²ΡΡΠ°ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΎΠ΄Π½Ρ ΠΈΠ· Π»ΡΡΡΠΈΡ
ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ #callout
: ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π²Π΅ΡΡ
Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Ρ ΡΠ°ΡΡΡΠ½ΡΠ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ #callout
Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π±Π΅Π· ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ
Ρ ΠΈ ΡΠ½ΠΈΠ·Ρ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ #callout
ΠΈΠΌΠ΅Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
, ΠΎΠ½ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.ΠΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΡΡΡΡΠΏ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ #content
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ Π°Π±Π·Π°ΡΡ Π½Π΅ ΠΏΡΠΎΠΏΠ°Π΄Π°Π»ΠΈ ΠΏΠΎΠ΄ Π½ΠΈΠΌ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΡΡΡΡΠΏΠ° ΡΠΏΡΠ°Π²Π° ΠΎΡ #content
Π½Π° 250 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΠΈΠ΄Π΅ΡΡ Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ΄Π½ΡΡΡ Π·Π°Π΄Π½ΡΡ ΡΠ°ΡΡΡ, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ
, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΎΡΡΠ°Π²Π°Π»ΡΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΌ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏ ΠΊ #content
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ Π°Π±Π·Π°ΡΡ Π½Π΅ ΠΏΡΠΎΠΏΠ°Π΄Π°Π»ΠΈ ΠΏΠΎΠ΄ Π½ΠΈΠΌ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #footer
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠΎΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
.ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΡΡΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #content
Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π΅ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ Π½Π΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠ½ΠΎ Π±ΡΠ» Π±Ρ ΡΠΊΡΡΡ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ #footer
.
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ, ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΠΎΠ±Π»Π°ΡΡΡΡ Π²ΡΠ½ΠΎΡΠΊΠΈ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»ΠΎΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π² ΡΡΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅, Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π½Π°ΡΠ΅ΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ.[ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΠ°Π½ΡΡΠ΅ Π±ΡΠ»Π° ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², Π½ΠΎ Ρ ΡΠ΅Ρ
ΠΏΠΎΡ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π±ΡΠ» Π·Π°Ρ
Π²Π°ΡΠ΅Π½ Π²ΡΠ΅Π΄ΠΎΠ½ΠΎΡΠ½ΡΠΌ ΠΠ. ΠΠ·Π²ΠΈΠ½Π΅Π½ΠΈΡ. - Π Π΅Π΄. ]
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΌΠΎΡΠ½ΠΎΡΡΠΈ position
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ ΠΈ ΡΡΠΏΠ΅ΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ. Π ΡΡΠ°ΡΡΡΡ, 80% Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΊΠ°ΠΊ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
, ΡΠ°ΠΊ ΠΈ Π² ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
- ΡΡΠΎ ΡΠΎ, Π½Π° ΡΡΠΎ Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΡΠΈ ΡΡΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°
Π΄Π°Π΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΡΠ½ΡΡ ΠΎΡΠ½ΠΎΠ²Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS, ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠΌ Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠ°Π΄Π΅ΡΡΡ, Π²Π°ΡΠΈ Π΄Π½ΠΈ ΡΠ³Π°Π΄ΡΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ Π² Π±Π΅Π·ΡΠΌΠ½ΠΎΠΌ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΎΡΠΈΠ±ΠΎΠΊ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΠΌΠΈΠ½ΡΡΡ ΠΏΡΠΎΡΠ»ΠΈ.
ΠΠ±ΡΠΈΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π°Ρ
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS - Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS
ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ Ρ
ΠΎΡΠΎΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΠΊΠ΅ΡΠ°.Π CSS Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΎΠΏΠΈΡΠ°Π½Ρ ΡΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΊΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΡΡΠ°ΡΠΈΡΠ½ΠΎ. ΠΠ° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π²Π»ΠΈΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° top
, bottom
, left
, right
ΠΈ z-index
.
.box {
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 7dc765;
}
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
Π ΡΡ
Π΅ΠΌΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠΊΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΊΡ.ΠΠ°ΡΠ΅ΠΌ ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ ΠΈΠ· ΡΡΠΎΠ³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ - Π²Π²Π΅ΡΡ
Ρ
ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·Ρ
ΠΈ / ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ
ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ
.
.box {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½ΠΎ ΠΎΠ½ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π΄Π»Ρ Π½Π΅Π³ΠΎ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ. ΠΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΡΠ³Π»Π° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ²: Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠ²ΠΎΠ΄ΡΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΠΌΠ΅ΡΡΠ° ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»Ρ, ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ.
. box {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - ΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅.
.box {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π ΡΠ»ΡΡΠ°Π΅ ΡΠΈΠΏΠ° Π½ΠΎΡΠΈΡΠ΅Π»Ρ Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΡΠΈΠΊΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ (Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ°ΡΠΈ). IE7 ΠΈ IE8 ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ
.
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΠΎΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ | HTML ΠΈ CSS - ΡΡΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Β«ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅Β» Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π½ΠΎ
ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ ΠΎΠΊΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° Π½Π΅ ΠΊ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠΌΡ
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅Ρ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΉ Ρ
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΡΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΈΡΠ°ΠΉΡΠ΅, ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΌΡΠΉ ΡΡΡΠ½ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π² Π½Π°ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ:
.item-absolute {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ°ΡΠ° ΡΡΡΡΠΊΡΡΡΠ° HTML ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π½ΠΎ
ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΠ΅ ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π’Ρ ΠΌΠΎΠΆΠ΅ΡΡ
ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ½ΠΈΠ·Ρ
ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π°
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ
Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ.
ΠΡΡΠ³ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ absolute
Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ
ΡΠ΄Π°Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ Π»Π΅Π³ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ justify-content
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π΅ .example
:
.example {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ;
justify-content: Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΡΠ°ΡΡ;
}
Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ (ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠΎΠΊΠ°) Π²ΡΠ΅ Π΅ΡΠ΅ Π΅ΡΡΡ
ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π³Π΄Π΅ ΡΠ°Π½ΡΡΠ΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½ΠΎ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ,
ΡΡΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΈΡΡΠ΅Π·Π»ΠΎ.ΠΡΠΎ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ .item-absolute
Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ
ΠΈ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Π½ΡΠΌ
ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ justify-content
ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π½Π° space-about
ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΎ
Π±ΡΠ΄Π΅Ρ ΠΎΠ·Π½Π°ΡΠ°ΡΡ Π²ΡΠ΅, ΡΡΠΎ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ - ΠΈΠ½Π°ΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π½Π΅ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡΠ°ΠΊ, ΠΏΠΎΡΠ΅ΠΌΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
Π΄Π°ΠΆΠ΅
ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ?
(ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ) ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΡΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ - ΡΡΠΎ Π² ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ ΡΠΏΠΎΡΠΎΠ± ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ½ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ ΠΊ
Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠΎΠ² Π½Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ. ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ .item-absolute ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½,
ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ , ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΌΠ΅ΡΡΠΎ
ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
.absolute {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
Div .absolute
ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ,
ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡΡΠ½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π½Π°Ρ .item-absolute
, Π³Π΄Π΅ Π±Ρ ΠΌΡ Π½ΠΈ
Π½ΡΠΆΠ½ΠΎ. ΠΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π»ΡΠ±ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ
Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ Π½Π΅ ΡΠΊΠ°Π·Π°Π»ΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
.ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΡΠ²Ρ
ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΡΠ΅ΠΌΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅ΡΠ½ΡΡΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
ΡΡΡΠ°Π½ΠΈΡΠ°. ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΠ΅ΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠ΅ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΉ HTML ΠΈ CSS
Π£ΡΠΎΠΊ 2
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅
2
CSS
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
ΠΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ
ΠΎΠ΄ΠΈΡ Π΄ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ². ΠΠ°ΠΊΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΠΈ ΡΠ΅Π»Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ΄Π½ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π»ΡΡΡΠ΅ Π΄ΡΡΠ³ΠΈΡ
.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠΈΡΡΠ½ΡΠΉ, ΡΠΈΡΡΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π²ΠΎΡΠΏΡΠΈΠΈΠΌΡΠΈΠ²ΡΠΉ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠΎΠ³ΠΈΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΡ
ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ.ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ ΠΎΡΠΈ x
, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ ΠΎΡΠΈ y
, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎ ΠΎΡΠΈ z
.
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ
ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ - ΡΡΠΎ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈ ΠΈΠ½ΡΡΠΈΠ½ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΡΠ΄ΠΎΠΌ ΠΈΠ»ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°. ΠΠ½ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ
Π²ΠΎΠΊΡΡΠ³ Π½Π΅Π³ΠΎ. ΠΡΠ΄Π΅Ρ Π»ΠΈ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌ? ΠΠ½ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π° Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅? ΠΡΠ΅ ΡΡΠΎ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ DOM (ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°) ΠΈ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠΊΡΡΠΆΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ DOM?
DOM, ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ API Π΄Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² HTML ΠΈ XML, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΈΡ
ΡΡΡΡΠΊΡΡΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ ΠΎ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Ρ
, ΠΏΠΎΡΡΠΎΠΌΡ DOM ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΈΡ
ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ.
ΠΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° Π΄Π΅ΡΠ΅Π²ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ Ρ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠΌΠΈ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²Π½ΡΡΡΠΈ Π΄ΡΡΠ³ΠΈΡ
, ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ.
Π₯ΠΎΡΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΠΎΠ³Π½Π΅Π²ΡΡ ΠΌΠΎΡΡ, Ρ Π½ΠΈΡ
Π΅ΡΡΡ ΡΠ²ΠΎΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. Π‘Π°ΠΌΠ°Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΠ½ΡΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½ΠΎ ΡΡΠΈ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΊΡΠ°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΡΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ, ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ Π΄Π°Π²Π°Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΡΠΎΡΡ
, ΡΠ°Π²Π½ΡΡ 0
, ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π§Π°ΡΡΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΡΠ°ΡΡΡΡ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΡ
ΠΊ Π½Π΅ΠΌΡ ΡΡΠΈΠ»Π΅ΠΉ, Π° Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΌΠΈ.
ΠΡΠ»ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΠΌΠΎΠ³ΡΡ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΠΎΡΠΈΠ±ΠΊΠΈ ΡΡΠΈΠ»Ρ. ΠΠ·Π³Π»ΡΠ½ΡΠ² Π½Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½ΠΈΠΆΠ΅, .ΡΠ°Π·Π΄Π΅Π» box-set
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠΉ ΡΠΎΠ½, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΠΎΠ½ Π½Π΅ Π²ΠΈΠ΄Π΅Π½, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π½Π΅Π³ΠΎ, ΡΠ²Π»ΡΡΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ. ΠΡΠΌΠΎΡΡΠ΅Π² ΡΠ°Π·Π΄Π΅Π» .box-set
, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π²ΡΡΠΎΡΠ°
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 0
.
HTML
1
2
3
4
5
6
CSS
1
2
3
4
5
6
7
8
9
10
.box-set {
ΡΠΎΠ½: #eaeaed;
}
.box {
ΡΠΎΠ½: # 2db34a;
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΠΌΠ°ΡΠΆΠ°: 1.858736059%;
ΡΠΈΡΠΈΠ½Π°: 29,615861214%;
}
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ
ΡΠΈΡΠ΅Π» Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π² ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ clear: both;
. ΠΠΎΠ΄ΠΎΠ±Π½Π°Ρ ΠΎΡΠΈΡΡΠΊΠ° ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ² ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π΄ΠΎΠΏΡΡΡΠΈΠΌΠ°, Π½ΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠ°Ρ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ
ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠΈΡΡΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΡΡΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π½Π°ΡΠ°ΡΡ Π±ΡΡΡΡΠΎ Π½Π°ΠΊΠ°ΠΏΠ»ΠΈΠ²Π°ΡΡΡΡ, Π½Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΡΠΈΡ
ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ², ΡΠ°ΠΌΡΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ ΠΌΠ΅ΡΠΎΠ΄ clearfix.
Π’Π΅Ρ
Π½ΠΈΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS overflow
. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow
Π½Π° auto
Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π²ΡΡΠΎΡΠ΅
Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ΅ΡΡΠΉ ΡΠΎΠ½ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π² Internet Explorer 6, Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΡΠΎΡΠ°
ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Π°
. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡΠΎΡΠ° ,
, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ, ΡΠΈΡΠΈΠ½Π° ,
, 100%,
ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ overflow: auto;
Π² Internet Explorer Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ Apple ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ overflow: hidden; ΠΠ΅ΠΊΠ»Π°ΡΠ°ΡΠΈΡ
.
1
2
3
4
.box-set {
ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π°Π²ΡΠΎ;
}
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡ
ΠΎΠ΄ΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π½ΠΈ Π±Π»ΠΎΠΊΠΎΠ² ΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΌΠ΅Π½Ρ. Π Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π½ΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ ΠΎΠ½Π° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²ΡΠΎΡΠΎΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow
ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ.ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΡΠ°Π·Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΡΡΠΎΠ»Π±ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
Π’Π΅Ρ
Π½ΠΈΠΊΠ° Clearfix
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π»ΡΡΡΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ clearfix. ΠΠ΅ΡΠΎΠ΄ clearfix Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ Π»ΡΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΠ΅ΡΠΎΠ΄ clearfix ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² : before
ΠΈ : after
Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΊΡΡΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΡΠ΅ ΠΈ Π½ΠΈΠΆΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ. ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ : before
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΆΠ°ΡΠΈΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΎΠ½ΠΈΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° table-cell Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ display: table; ΠΠ΅ΠΊΠ»Π°ΡΠ°ΡΠΈΡ
. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ Π² Internet Explorer 6 ΠΈ 7. ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ : after
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΆΠ°ΡΠΈΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° * zoom
ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌ hasLayout
ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π² Internet Explorer 6 ΠΈ 7, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΡΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ Ρ Π½ΠΈΠΌΠΈ. .
ΠΠ·ΡΠ² ΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π²ΡΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ, ΠΈ ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π½Π΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
1
2
3
4
5
6
7
8
9
10
11
12
.Π±ΠΎΠΊΡ-ΡΠ΅Ρ: Π΄ΠΎ,
.box-set: after {
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: "";
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°;
}
.box-set: after {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
.box-set {
* ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: 1;
}
ΠΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ
ΠΠ°ΠΊΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΈΠΌΠ΅ΡΡΠ΅Π³ΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ Π²Π°ΡΠΈΡ
Π»ΠΈΡΠ½ΡΡ
ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠΉ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΠ΄ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ΅Ρ
Π½ΠΈΠΊΠΈ clearfix, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π° Π²ΠΎ Π²ΡΠ΅Ρ
ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΡ
. ΠΡΡΠ³ΠΈΠ΅ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΌΠ΅ΡΠΎΠ΄ clearfix - ΡΡΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΡ
Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠΈ.Π§ΡΠΎ Π²Ρ ΡΠ΅ΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π°Ρ, ΠΏΡΠΎΡΡΠΎ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΎΠ½ Ρ
ΠΎΡΠΎΡΠΎ Π·Π°Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΠ΅ΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
ΠΠ΄Π½Π° ΠΈΠ· ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ
ΠΏΡΠ°ΠΊΡΠΈΠΊ - Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΊΠ»Π°ΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Ρ
Π½ΠΈΠΊΡ clearfix, ΠΡΠ½ Π‘Π΅Π΄Π΅ΡΡ
ΠΎΠ»ΡΠΌ ΠΏΠΎΠΌΠΎΠ³ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° group
. ΠΠ°ΡΠ΅ΠΌ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° group
ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ.
1
2
3
4
5
6
7
8
9
10
11
12
.Π³ΡΡΠΏΠΏΠ°: Π΄ΠΎ,
.group: after {
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: "";
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°;
}
.group: after {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
.group {
* ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: 1;
}
ΠΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π‘ΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ : Π΄ΠΎ
ΠΈ ΠΎΠ΄ΠΈΠ½ : ΠΏΠΎΡΠ»Π΅
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Ρ
Π½ΠΈΠΊΡ clearfix Ρ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ : Π΄ΠΎ
ΠΈ : ΠΏΠΎΡΠ»Π΅
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π΅ Π΄ΠΎΡΡΠΈΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ
Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
ΡΡΠΈΠ»ΠΈ clearfix Π½Π΅ Π±ΡΠ΄ΡΡ ΠΆΠΈΡΡ Π² ΠΊΠ»Π°ΡΡΠ΅ box-set . ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ Π³ΡΡΠΏΠΏΡ
.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ float, ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π² ΠΈΠ³ΡΡ Π²ΡΡΡΠΏΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ,
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
, ΡΠΎ Π΅ΡΡΡ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π·Π°Π΄ΡΠΌΠ°Π½ΠΎ, Ρ ΠΈΡ
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
Π Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π½ΠΈΠΆΠ΅ Π²ΡΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠ»ΠΎΠΆΠ΅Π½Ρ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ.
HTML
1
2
3
4
5
6
7
CSS
1
2
3
4
5
6
7
8
9
. box-set {
ΡΠΎΠ½: #eaeaed;
}
.box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
. ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π²Π²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, Π²Π½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
.ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±ΠΎΠΊΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ΄Π²ΠΈΠ³Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Π»ΡΠ±ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ.
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±ΠΎΠΊΡΠ°
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°: ΡΠ²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, ΡΠ½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ .
ΠΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ ΠΈΠ· ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top
, ΡΠ°Π²Π½ΠΎΠ³ΠΎ 20px,
Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΏΠΎΠ΄ΡΠΎΠ»ΠΊΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΎΡ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½. ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top
Π½Π° -20px
Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π²Π΅ΡΡ
ΠΎΡ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½.
ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ
Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
, ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ ΠΊΡΠ°ΡΠΌΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top
20px
Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ΄ΡΠΎΠ»ΠΊΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ
Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top
Π½Π° -20px
Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΡΡΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π²Π΅ΡΡ
ΠΎΡ Π²Π΅ΡΡ
Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΈΠ»ΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΌΠ΅ΡΠ°ΡΡ ΡΠΎΠΌΡ, Π³Π΄Π΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ» ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ ΠΈΡ
ΠΈΠ· ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
Π Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π½ΠΈΠΆΠ΅ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π½Π°Π»ΠΎΠΆΠ΅Π½Ρ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ΠΈ ΡΠΌΠ΅ΡΠ΅Π½Ρ ΠΎΡ ΡΠ²ΠΎΠΈΡ
ΠΏΠΎΠ·ΠΈΡΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΈΡ
ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°. ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°, Π½ΠΎ Π½Π΅ ΡΠΎΠ»ΠΊΠ°ΡΡ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π° Π² ΡΠ°Π·Π½ΡΡ
Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΡ
.ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
HTML
1
2
3
4
5
6
7
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
. box-set {
ΡΠΎΠ½: #eaeaed;
}
.box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-1 {
Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-2 {
ΡΠ»Π΅Π²Π°: 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-3 {
Π²Π½ΠΈΠ·Ρ: -10px;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΎΠ±Π° ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π΄Π°Π΅ΡΡΡ ΡΠΎΠΌΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°ΠΏΠΈΡΠ°Π½ ΡΠ·ΡΠΊ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΡ
ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²Π»Π΅Π²ΠΎ,
ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, Π° Π΄Π»Ρ Π°ΡΠ°Π±ΡΠΊΠΈΡ
ΡΡΡΠ°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΏΡΠ°Π²ΠΎ,
ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ.
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ΠΈ ΡΠ΄Π°Π»ΡΡΡΡΡ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ.ΠΡΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π»Π°
ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΡΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ top
, ΡΠ°Π²Π½ΡΠΌ 50px,
ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΏΡΠ°Π²Π°
, ΡΠ°Π²Π½ΡΠΌ 100px
, Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ
Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΏΡΠ°Π²Π° ΠΎΡ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±ΠΎΠΊΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ top
, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π½ΠΎ ΠΎΡΡΠ°Π²ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π²Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ flush left.
ΠΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π½ΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ°Π·Π΄Π΅Π»Ρ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ.ΠΠ°ΠΆΠ΄ΡΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΡΠΈΠΊ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Π²ΡΠ½ΠΈΠΌΠ°Π΅ΡΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ.
HTML
1
2
3
4
5
6
7
CSS
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
.box-set {
ΡΠΎΠ½: #eaeaed;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
. box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-1 {
Π²Π΅ΡΡ
: 6%;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 2%;
}
.box-2 {
Π²Π΅ΡΡ
: 0;
Π²ΠΏΡΠ°Π²ΠΎ: -40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-3 {
Π²Π½ΠΈΠ·Ρ: -10px;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-4 {
Π²Π½ΠΈΠ·Ρ: 0;
}
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ
ΠΈ ΡΠΈΡΠΈΠ½Ρ
ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top
ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ top
ΠΈ bottom
.ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ
ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
, ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΎΡΠ΄Π°Π΅ΡΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°ΠΏΠΈΡΠ°Π½ ΡΠ·ΡΠΊ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ
ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ
ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π²ΡΡΠΎΡΠΎΠΉ, ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠ΅ΠΉ Π²Π΅ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ
Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠ΅Ρ
ΡΠ΅ΡΡΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ.ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΎΠ³ΠΎΠ²ΠΎΡΠΊΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Internet Explorer 6. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π² Internet Explorer 6, Π΅ΡΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠ΅ ΡΠ»ΠΎΠ²ΠΊΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΡΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π‘ΠΎΡ
ΡΠ°Π½ΡΡ ΡΠ΅ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°, ΡΡΠΎ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π° Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
HTML
1
2
3
4
5
6
7
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 Π³ΠΎΠ΄
22
.box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-1 {
Π²Π΅ΡΡ
: 6%;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 2%;
}
.box-2 {
Π²Π΅ΡΡ
: 0;
Π²ΠΏΡΠ°Π²ΠΎ: -40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
. box-3 {
Π²Π½ΠΈΠ·Ρ: -10px;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-4 {
Π²Π½ΠΈΠ·Ρ: 0;
}
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»
ΠΠ΄Π½ΠΎ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ
ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
- ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°, ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΎΠ±Π»Π°Π΄Π°ΡΡΠΈΠΌ, Π²ΡΠ΅Π³Π΄Π° Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π½ΠΈΠΌ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡΠΈΡΡ.ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ
ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ Π±Π΅Π· Π½Π°ΡΡΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»Ρ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ.
HTML
1
2
CSS
1
2
3
4
5
6
7
8
9
10
11
ΠΊΠΎΡΠΏΡΡ {
ΡΠΎΠ½: #eaeaed;
}
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» {
ΡΠΎΠ½: # 2db34a;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠΏΡΠ°Π²Π°: 0;
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡΠ° Z
ΠΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΡΡΠΎ ΡΡΠΈΡΠ°ΡΡΡΡ Π΄Π²ΡΡ
ΠΌΠ΅ΡΠ½ΡΠΌΠΈ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΠΎΡΠΈ x
ΠΈ y
. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΊΠ»Π°Π΄ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ ΠΊΠ°ΠΊ ΠΎΡΡ z, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΎΡΠΈ z ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΈΠ΄ΡΡΠΈΠ΅ Π²Π²Π΅ΡΡ
Ρ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ·Π°Π΄ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
Π·Π° Π½ΠΈΠΌΠΈ. ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ.ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ z-index
Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π²Π΅ΡΡ
Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² DOM.
Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position
, ΡΠ°Π²Π½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ
. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π±Π΅Π· ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΡΠΎΡΠ½ΠΎ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π±Π»ΠΎΠΊΠ° Π΄Π²Π°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π²Π΅ΡΡ
Ρ Π±Π»ΠΎΠΊΠ° ΠΎΠ΄ΠΈΠ½, Π·Π°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ° ΡΡΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π±Π»ΠΎΠΊΠ° Π΄Π²Π°, ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π΄Π²Π° ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π°Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠΌ, Π·Π° Π½ΠΈΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠ΅ΡΠΈΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠΎΠ΄ Π½ΠΈΠΌ, Π° ΡΠ΅ΡΠ²Π΅ΡΡΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ - ΠΏΠΎΠ΄ ΡΡΠ΅ΡΡΠΈΠΌ.
HTML
1
2
3
4
5
6
7
CSS
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
.box-set {
ΡΠΎΠ½: #eaeaed;
Π²ΡΡΠΎΡΠ°: 160 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.box {
ΡΠΎΠ½: # 2db34a;
Π³ΡΠ°Π½ΠΈΡΠ°: 2px solid # ff7b29;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
}
.box-1 {
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-2 {
Π²Π½ΠΈΠ·Ρ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 3;
}
.box-3 {
ΡΠ»Π΅Π²Π°: 130 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2;
}
. box-4 {
Π²Π½ΠΈΠ·Ρ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 190 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1;
}
Π Π΅ΡΡΡΡΡ ΠΈ Π‘ΡΡΠ»ΠΊΠΈ
ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² CSS. Π Π°Π·Π²ΠΈΡΠΈΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡβ¦ | ΠΠΆΠ΅ΠΉΠΊΠΎΠ± ΠΡΠΈΠ½ΡΡΠΉ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΈΠΏΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° .
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: position: static
. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΡΠ΅Π΄ΠΊΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΎΠ±ΡΡΠ²Π»Π΅Π½Π½ΡΠΌ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
, ΠΏΠΎΠ·ΠΈΡΠΈΡ : Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ
ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ : ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
. ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π° ΠΈΠ·Π±Π°Π²ΠΈΠΌΡΡ ΠΎΡ ΡΠΊΡΡΠ½ΡΡ
Π²Π΅ΡΠ΅ΠΉ. Π₯ΠΎΡΡ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΠΏΡΠΈΡΠΎΠ΄Π΅, Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π°ΡΠ°ΡΡ Π½Π°ΡΠ΅ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΠ΅ ΠΏΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π½Π°ΡΠ°Π»Π°.
.ourBox {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
}
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ Π΅Π³ΠΎ. ΠΠ½ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΊΠ°ΠΊ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ (ΡΡΠ»ΠΎΠ²Π½ΠΎ Π³ΠΎΠ²ΠΎΡΡ)
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ - Π²ΠΎΡ Π³Π΄Π΅ Π²ΡΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ.
ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
, ΠΈ ΠΎΠ½ΠΈ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡΠΌΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π° ΡΠ°ΠΌΠΈΡ
ΡΠ΅Π±Ρ, ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΌΠΎΠ³ΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΡ
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΡΠΎΠΊΠ° Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ , , Π° ΠΈΠΌΠ΅Π½Π½ΠΎ: ΡΠ²Π΅ΡΡ
Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ ΠΈ ΡΠ»Π΅Π²Π°.
- Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Ρ
position: absolute
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΈΠ· ΡΡΠ΅Ρ
ΠΏΠΎΠ·ΠΈΡΠΈΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°.
ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ
ΠΡ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΠΎ ΡΠ°Π½ΡΡΠ΅. ΠΠΎΠ΄ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
.ourBox {
position: relative;
}
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
, ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½Ρ ΠΈΠ· ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠΎΠΊΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ Π·Π°Π½ΠΈΠΌΠ°Ρ ΡΠΎ ΠΆΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.ΠΡΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ΅Π±Ρ .
ΠΠ»Ρ ΡΡΠ½ΠΎΡΡΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ.
.ourBox {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ; Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ°Ρ Π±Π»ΠΎΠΊ ΡΠΌΠ΅ΡΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ΄Π΅ΡΡ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ Π²Π΅ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΌΠ΅ΡΠ΅Π½ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» Π±Ρ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ . Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΈ Ρ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅ΠΉ Ρ ΠΎΠ±Π΅ΠΈΡ
ΡΡΠΎΡΠΎΠ½ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΎΡΡ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° position: relative
, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ, Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½ΠΈ Π½Π° ΡΡΠΎ Π²ΠΎΠΊΡΡΠ³.
ΠΡΠΎ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π½Π°ΡΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΡΠ²ΠΎΠ±ΠΎΠ΄Π½Π° ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ΄ΡΠΈ ΠΊΡΠ΄Π° ΡΠ³ΠΎΠ΄Π½ΠΎ, Π½ΠΎ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½Π° Π±ΡΠ»Π° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ.
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ² Ρ
ΠΎΡΠΎΡΠΈ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ΠΈ Π΅ΡΡΡ.
Position Absolute
Strap in.
position: absolute
ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ Π΄Π΅Π»Π°Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
, Ρ Π΄Π²ΡΠΌΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΠΎΡΠ»ΠΈΡΠΈΡΠΌΠΈ:
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ Π²ΡΡ
ΠΎΠ΄ΠΈΡ ΠΈΠ· Π½Π΅Ρ ΠΌΠ΅ΡΡΠΎ Π·Π° .
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ:
.ourBoxesParent {
position: relative;
} .ourBox {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 0;
}
ΠΠ΄Π΅ΡΡ ΠΌΡ Π²ΡΠ²ΠΎΠ΄ΠΈΠΌ Π½Π°Ρ Π±Π»ΠΎΠΊ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΠΈ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°. ΠΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΎΠ±Π΅ΡΡΠΊΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΡΠΈΠΎ ΠΊΠΎΡΠΎΠ±ΠΎΠΊ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π΅ Π½Π° : Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈ ΡΠ°Π½ΡΡΠ΅, ΡΡΡ
Π½ΡΠ»ΠΎ - ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π²Π° ΡΠ΅ΡΡΡ
ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΡΠ΄ΠΎΠΌ.
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ : 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΈΠΏ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ
ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ). Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π² Internet Explorer, Edge 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ°Π½Π½ΠΈΡ
Π²Π΅ΡΡΠΈΡΡ
.
ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.ΠΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° Π·Π°Π΄Π°Π½Π½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎ Π²ΡΡΠΏΠΎΡΡΠ΅ - Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Β«Π·Π°ΡΡΡΠ΅Π²Π°Π΅ΡΒ» Π½Π° ΠΌΠ΅ΡΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, position: fixed).
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ : 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ 1px;
ΡΠΈΡΠΈΠ½Π°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 1px;
Π²Π΅ΡΡ : 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΏΡΠ°Π²Π°: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
position
CSS ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². position
ΡΠΊΠ°Π·Π°Π½ΠΎ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π½ΠΈΠΆΠ΅. ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅
Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
, Π»Π΅Π²ΡΠΉ
ΠΈ z-index
ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° . ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ
Π²Π²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, Π²Π½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²; ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π±ΡΠ»Π° static
. z-index
Π½Π΅ ΡΠ°Π²Π½ΠΎ auto
. ΠΠ³ΠΎ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ table - * - group
, table-row
, table-column
, table-cell
ΠΈ table-caption
Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ. Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
Π²Π²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, Π²Π½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
. z-index
Π½Π΅ ΡΠ°Π²Π½ΠΎ auto
. ΠΠΎΠ»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ ΡΠΆΠΈΠΌΠ°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ. ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅
, ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ
ΠΈΠ»ΠΈ ΡΠΈΠ»ΡΡΡ
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ΅ Π½Π° ΡΡΠΎ-ΡΠΎ ΠΈΠ½ΠΎΠ΅, ΡΠ΅ΠΌ Π½Π΅Ρ
(ΡΠΌ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ CSS) , ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎΡ ΠΏΡΠ΅Π΄ΠΎΠΊ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ. (ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π½Π΅ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Ρ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²ΠΎΠΉ
ΠΈ ΡΠΈΠ»ΡΡΡΠΎΠΌ
, ΡΠΏΠΎΡΠΎΠ±ΡΡΠ²ΡΡΡΠΈΠΌ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.) ΠΠ³ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
. Π»ΠΈΠΏΠΊΠΈΠΉ
top
, ΡΠΏΡΠ°Π²Π°
, ΡΠ½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
.Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΡΠΊΡΡΡΠΎ , ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
, Π°Π²ΡΠΎ
ΠΈΠ»ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅
), Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΡΠΎΡ ΠΏΡΠ΅Π΄ΠΎΠΊ Π½Π΅ t Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ, Π²ΡΠΏΠΎΠ»Π½ΡΡΡΠΈΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΡ. ΠΡΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ Π»ΡΠ±ΠΎΠ΅ Β«Π»ΠΈΠΏΠΊΠΎΠ΅Β» ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ (ΡΠΌ. ΠΡΠΎΠ±Π»Π΅ΠΌΡ GitHub Π½Π° W3C CSSWG). ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈΠ±ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ , Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ
, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ
ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΌ
. (ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΡΠΎ ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ, ΠΊΡΠΎΠΌΠ΅ static
.) ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ°Π²Π½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
. Π‘Π²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ Π΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ; ΡΠ²ΠΎΠΉΡΡΠ²Π° left
ΠΈ right
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ°Π²Π½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
. Π‘Π²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡ ΠΊΡΠ°Π΅Π² ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. (Π‘ΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠ΅Π΄ΠΊΠΎΠΌ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.) ΠΡΠ»ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΠΏΠΎΠ»Ρ, ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° (BFC) Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ°Π²Π½ΠΎ Π»ΠΈΠΏΠΊΠΎΠ΅
. ΠΠ½ ΡΡΠΈΡΠ°Π΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π΅Π³ΠΎ Π±Π»ΠΎΠΊ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΏΠΎΡΠΎΠ³ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° top
Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ auto) Π² Π΅Π³ΠΎ ΠΊΠΎΡΠ½Π΅ ΠΏΠΎΡΠΎΠΊΠ° (ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ), ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΎΠ½ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Β«Π·Π°ΡΡΡΡΠ²ΡΠΈΠΉΒ» Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π²ΡΡΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ
, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π½Π° Π°Π²ΡΠΎ
, ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ.ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΊΠ°Π·Π°Π² ΠΊΠ°ΠΊ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΡΠ°ΠΊ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ ΠΎΡΡΠ°Π²ΠΈΠ² Π²ΡΡΠΎΡΡ
Π½Π΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ (ΡΠΎ Π΅ΡΡΡ Π°Π²ΡΠΎ
). ΠΡ
ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΡΠ»ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΡΠΊΠ°Π·Π°Π² ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
ΠΈ ΠΎΡΡΠ°Π²ΠΈΠ² ΡΠΈΡΠΈΠ½Ρ
ΠΊΠ°ΠΊ Π°Π²ΡΠΎ
. Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
(ΡΠ΅Ρ
Π½ΠΈΡΠ΅ΡΠΊΠΈ, Π½Π΅ Π°Π²ΡΠΎ
), Π²ΡΠΈΠ³ΡΡΠ²Π°Π΅Ρ Π²Π΅ΡΡ
Π½ΠΈΠΉ
. left
ΠΈ right
, left
ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅
ΡΠ°Π²Π½ΠΎ ltr
(Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ, Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΏΠΎΠ½ΡΠΊΠΈΠΉ ΠΈ Ρ. Π.) Π right
Π²ΡΠΈΠ³ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅
ΡΠ°Π²Π½ΠΎ rtl
(ΠΏΠ΅ΡΡΠΈΠ΄ΡΠΊΠΈΠΉ, ΠΡΠ°Π±ΡΠΊΠΈΠΉ, ΠΈΠ²ΡΠΈΡ ΠΈ Π΄Ρ.).
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
, Π½Π΅ Π·Π°ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°. ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡΡ.ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΉ ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΡΠΊΠΎΡΠΎΡΡΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ ΡΠΎ ΡΠΊΠΎΡΠΎΡΡΡΡ 60 ΠΊΠ°Π΄ΡΠ° Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ , Π²ΡΠ·ΡΠ²Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½Π½ΠΎΠΉ ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ Π΄ΡΡΠ½Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ
. ΠΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΡΠ΅Π½ΠΈΠΉ — Π΄ΠΎΠ±Π°Π²ΠΈΡΡ will-change: transform
ΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° Π΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΠ»ΠΎΠ΅, ΡΠ»ΡΡΡΠΈΠ² ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ»ΡΡΡΠΈΠ² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ. ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ | ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ | Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ | Π»ΠΈΠΏΠΊΠΈΠΉ | ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
ΠΠ΄ΠΈΠ½
ΠΠ²Π°
Π’ΡΠΈ
Π§Π΅ΡΡΡΠ΅
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
.box {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΡΠ²Π΅Ρ Π±Π΅Π»ΡΠΉ;
}
#Π΄Π²Π° {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ;
}
static
). ΠΡΠ»ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΡΠ΅Π΄ΠΎΠΊ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ, ΠΎΠ½ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ICB (Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ — ΡΠΌ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ W3C), ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π― ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ. Π‘ΠΎΡΠ΅Π΄Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ
ΡΡΡΠΎΠΊΠ°Ρ
Π½ΠΈΠΆΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΌΡ ΠΏΠΎΠΊΡΡΠ²Π°Π΅ΠΌ 100% ΡΠΈΡΠΈΠ½Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈ ΠΌΡ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π½Π°ΡΠ΅Π³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ°ΡΠ° ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° - ΡΡΠΎ Π½Π°ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ + ΠΎΡΡΡΡΠΏ + ΡΠΈΡΠΈΠ½Π° / Π²ΡΡΠΎΡΠ° Π³ΡΠ°Π½ΠΈΡΡ.
ΠΠ°Ρ ΡΠ°Π·Π΄Π΅Π»ΡΡΡ Π½Π°ΡΠΈ ΠΏΠΎΠ»Ρ. ΠΠ·-Π·Π° ΡΠΆΠ°ΡΠΈΡ ΠΏΠΎΠ»Ρ ΠΌΡ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΡΠΈΡ
ΠΏΠΎΠ»Π΅ΠΉ, Π° Π½Π΅ ΠΎΠ±ΠΎΠΈΡ
.
Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ , ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΡΠΎΠΌΡ ΠΈ this , ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ ΠΈ ΡΠΌΠ΅ΠΆΠ½ΡΠΌΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌΠΈ ΡΠ·Π»Π°ΠΌΠΈ, Π΅ΡΠ»ΠΈ Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠΎΠΊΠ΅ Π΅ΡΡΡ ΠΌΠ΅ΡΡΠΎ. ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΠΈΠ΅ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΡΡΡΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ - ΠΊΠ°ΠΊ ΡΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ ΡΠ΅ΠΊΡΡ , ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΠ΅ ΠΊ Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, Π΅ΡΠ»ΠΈ Π½Π΅Ρ, ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Ρ ΡΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ:
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
body {
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
}
ΠΏ {
ΡΠΎΠ½: ΡΠ²Π΅Ρ ΠΌΠΎΡΡΠΊΠΎΠΉ Π²ΠΎΠ»Π½Ρ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ 3px;
ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΌΠ°ΡΠΆΠ°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
span {
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ 1px;
}
.positioned {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠΎΠ½: ΠΆΠ΅Π»ΡΡΠΉ;
Π²Π΅ΡΡ
: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅
, ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ
ΠΈΠ»ΠΈ ΡΠΈΠ»ΡΡΡ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΎΡ none
(ΡΠΌ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ CSS), ΡΡΠΎ Π·Π°ΡΠ΅ΠΌ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° Π·Π°Π½ΡΡΡ ΠΌΠ΅ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ
Π±Π»ΠΎΠΊ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Β«ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎΒ» ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠ»Π΅ Β«ΠΠ΄ΠΈΠ½Β» Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. ΠΠ°ΠΆΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis.
Vestibulum ante ipsum primis Π² faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror.
Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum.Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis.
Vestibulum ante ipsum primis Π² faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror.
Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
ΠΠ΄ΠΈΠ½
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
. box {
ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΡΠ²Π΅Ρ Π±Π΅Π»ΡΠΉ;
}
#ΠΎΠ΄ΠΈΠ½ {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ;
}
.outer {
ΡΠΈΡΠΈΠ½Π°: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°: 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
#one {position: sticky; Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈΠ»ΠΈ Π»Π΅Π²ΡΠΉ
, ΡΡΠΎΠ±Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΅Π³ΠΎ Π½Π΅Π»ΡΠ·Ρ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠΈΡΡ ΠΎΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
- Π
- ΠΠ½Π΄ΡΡ Π.Π.
- ΠΠΏΠΏΠ°ΡΠ°Ρ
- Arcade Fire
- Π£ ΠΏΠΎΠ΄ΡΠ΅Π·Π΄Π°
- ΠΠ·ΠΈΠ· ΠΠ½ΡΠ°ΡΠΈ
- C
- Chromeo
- ΠΠ±ΡΡΠ½ΡΠΉ
- Π‘Π²Π΅ΡΡΠΈ
- Π₯ΡΡΡΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π°ΠΌΠΊΠΈ
- ΠΡΡΡΠΈΠ²
- E
- ΠΠ·ΡΡΠ²Ρ Π² Π½Π΅Π±Π΅
- Π’
- Π’Π΅Π΄ ΠΠ΅ΠΎ & amp; Π€Π°ΡΠΌΠ°ΡΠ΅Π²ΡΡ
- Π’-ΠΠ΅ΠΉΠ½
- Π’ΡΠΈΠΆΠ΄Ρ
- Π’Π΅Π»Π΅Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ°Π΄ΠΈΠΎ
- ΠΠ²Π° Π³Π°Π»Π°Π½ΡΠ°
* {
ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: ΡΠ°ΠΌΠΊΠ°-ΡΠ°ΠΌΠΊΠ°;
}
dl> div {
ΡΠΎΠ½: #FFF;
ΠΎΡΡΡΡΠΏ: 24px 0 0 0;
}
dt {
ΡΠΎΠ½: # B8C1C8;
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ 1px # 989EA4;
border-top: 1px solid # 717D85;
ΡΠ²Π΅Ρ: #FFF;
ΡΡΠΈΡΡ: ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ 18px / 21px Helvetica, Arial, sans-serif;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 2px 0 0 12px;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: -webkit-sticky;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π»ΠΈΠΏΠΊΠΎΠ΅;
Π²Π΅ΡΡ
: -1px;
}
dd {
ΡΡΠΈΡΡ: ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ, 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ / 45 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Helvetica, Arial, Π±Π΅Π· Π·Π°ΡΠ΅ΡΠ΅ΠΊ;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 0 0 0 12 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π±Π΅Π»ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ: nowrap;
}
dd + dd {
Π²Π΅ΡΡ
Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ 1px #CCC;
}
position
, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΡ
ΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² CSS Π±Π΅Π· ΡΠ°Π±Π»ΠΈΡ. ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΡΠΎ ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ, Π½ΠΎ Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΡ , ΠΏΠΎΡΠ΅ΠΌΡ , ΡΠΊΠ°Π·Π°Π² ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ position: relative
, ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ Π²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΡ ΠΌΠ°ΠΊΠ΅ΡΠ°.Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΡΠ·Π½Π°ΡΡ ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ
ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΈ, ΡΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ. position
: static
, relative
, absolute
, fixed
ΠΈ Π½Π°ΡΠ»Π΅Π΄Ρ
. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ»ΡΠΆΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅Π»ΠΈ. ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ — ΠΊΠ»ΡΡ ΠΊ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS.ΠΠ»ΠΎΠΊΠΈ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ ΠΈΠ»ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ, Π½ΠΎ Π½Π΅ ΠΎΠ±ΠΎΠΈΠΌΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΠ»ΠΎΠΊ-Π±ΠΎΠΊΡΡ ΡΡΠ°ΡΡΠ²ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°. ΠΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΡΡΠ°ΡΡΠ²ΡΡΡ Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
static
ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
position
Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ Π²Π°ΡΠΈ Π΄Π΅ΡΡΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ — ΠΎΠ½ΠΈ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ, ΠΊΠ°ΠΊ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ static
— ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠ΄Π΅ Π΅ΡΡΡ ΡΡΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΈ, ΠΊΠ°ΠΊ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ, Π±ΡΠ΄ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅ΡΡ
Π΄ΡΡΠ³ΠΎΠ³ΠΎ.ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ,
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
: # box_1 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
# box_3 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # b7d84b;
}
static
Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΡΠΎΠ»Π±ΡΠΎΠΌ, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ Π½Π°ΡΠ°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
, Π²Π°ΠΌ Π½Π΅ ΠΏΠΎΠ²Π΅Π·Π»ΠΎ. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ, ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡΠ΅. ΠΠ°ΠΊΠ°Ρ? ΠΡ ΠΏΠΎΡΠ΅ΡΡΠ»ΠΈ ΠΌΠ΅Π½Ρ Π² ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ . Π ΠΎΠ΄ΠΆΠ΅Ρ, Π ΠΎΠ΄ΠΆΠ΅Ρ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
.
: # box_1 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
# box_3 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # b7d84b;
}
ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° ΠΠ»Π°ΡΠΊΠ° ΠΠ΅Π½ΡΠ° — ΠΎΠ½ΠΈ ΡΠΊΡΡΠ²Π°ΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠΈΠ»Ρ, ΡΠ΅ΠΌ ΠΈΡ
ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π±ΡΠ°ΡΡΡ ΠΈ ΡΠ΅ΡΡΡΡ. Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈΠ· Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΊ # box_2
: # box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠ»Π΅Π²Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.ΠΠ°ΡΠΈ ΡΡΠΈ Π±Π»ΠΎΠΊΠ° Ρ
ΠΎΡΠΎΡΠΎ ΡΠ»ΠΎΠΆΠ΅Π½Ρ, Π½ΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ ( # box_2
) Π²ΡΠ΄Π²ΠΈΠ½ΡΡ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π°. ΠΠ΄Π΅ΡΡ ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠΈΠ½ΡΡΡ Π·Π°ΠΊΠΎΠ½ Π²ΡΠ΅ΠΌΠΈΡΠ½ΠΎΠ³ΠΎ ΡΡΠ³ΠΎΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠ΅ΠΉ Π²ΠΎΠ»Π΅. Π‘ΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ Π²ΡΠ΅ Π΅ΡΠ΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° — ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π° — Π½ΠΎ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π·Π΅Π»Π΅Π½ΡΠΉ Π±Π»ΠΎΠΊ ( # box_3
) Π²Π½ΠΈΠ·Ρ. ΠΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ ΡΠΈΠ½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ, Ρ
ΠΎΡΡ ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ Π½Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΡΠΌΠΎ Π½Π°Π΄ Π½ΠΈΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΎ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.ΠΠ΅Π»Π΅Π½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΡΠΈΠ½ΠΈΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ Π½Π΅ΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±Π°ΡΠ½ΠΈ ΠΈΠ· Π°Π»ΡΠ°Π²ΠΈΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. # box_2
) Π½Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΊΠΈΡ
-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ΅Π±Ρ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π°, — ΡΡΠΎ ΡΠ°ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ.ΠΡΠ»ΠΈ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ # box_2
Π²Π½ΡΡΡΠΈ # box_1
, ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ # box_2
Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈΠ· # box_1
. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ CSS, ΠΌΡ ΡΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΡΠ΅ΠΌ Π½Π°Ρ HTML, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ # box_2
Π²Π½ΡΡΡΡ # box_1
:
# box_1
) Π²ΠΌΠ΅ΡΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.ΠΡΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ° Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π° Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌΠΈ Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ : Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
— ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ Ρ
ΠΎΡΠ΅Π»ΠΈ Π±Ρ ΡΡΡΠΎΠΈΡΡ Π±Π°ΡΠ½ΠΈ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ»ΠΈ ΠΌΠΎΠ»ΠΎΠΆΠ΅.
Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ ΠΊΠ°ΠΊ Π‘ΡΠΏΠ΅ΡΠΌΠ΅Π½, ΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΎΡΡΠ°ΠΆΠ°Π΅Ρ ΠΠ°ΡΠ°Π»ΠΎ — ΠΌΠ΅ΡΡΠΎ, Π³Π΄Π΅ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠΈΡ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ static
ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ ΠΈΠ· Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π³Π΄Π΅ ΡΠ³ΠΎΠ΄Π½ΠΎ, ΠΈ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΈΠ»ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΡΡΠΎΠ½ΡΡ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π² ΠΏΠΎΡΠΎΠΊΠ΅. ΠΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΊΠ°ΠΊ ΠΎΠ± ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Ρ Π³ΠΈΠ³Π°Π½ΡΡΠΊΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠΎΠΉ Π½Π° Π»ΠΈΠΏΡΡΠΊΠ΅ Π½Π° ΡΠΏΠΈΠ½Π΅. ΠΡΠΎΡΡΠΎ ΡΠΊΠ°ΠΆΠΈ Π΅ΠΌΡ, ΠΊΡΠ΄Π° ΠΏΡΠΈΠΊΠ»Π΅ΠΈΡΡ, ΠΈ ΠΎΠ½ ΠΏΡΠΈΠ»ΠΈΠΏΠ½Π΅Ρ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅Π°Π³ΠΈΡΡΡΡ Π½Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ top: 100px
ΠΈ left: 200px;
, ΠΈ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠΎΠ²Π½ΠΎ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ
Ρ ΠΈ Π½Π° 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ»Π΅Π²Π° ΠΎΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΡΡΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
# box_1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
# box_3 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # b7d84b;
}
# box_4 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠΏΡΠ°Π²Π°: 0;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ebde52;
}
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
, ΠΌΡ ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΠ»ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ³Π»Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠΈ ΠΏΠΎΠ»Ρ ΠΎΡΡΠ°Π½ΡΡΡΡ Π² ΡΠ²ΠΎΠΈΡ
ΡΠ³Π»Π°Ρ
. ΠΡΠ»ΠΈ Π²Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π»ΠΈΡΡ, Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΡΠΎ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ - ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π²ΡΡ
ΠΎΠ΄ΡΡ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΡΠΈΠΌΠ΅Ρ F ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Ρ E Ρ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. position
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° offset. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΄Π²Π° ΠΈΠ»ΠΈ Π²ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ - ΠΎΠ½ ΡΠ²ΡΠ·Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ°ΠΌΠΈΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΡΠΎ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄: #box_a {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΠΏΡΠ°Π²ΠΎ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π½ΠΈΠ·Ρ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ;
}
#box_b {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π½ΠΈΠ·Ρ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: Π±Π΅Π»ΡΠΉ;
}
Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡΠΌΠΈ
. Π Π΄ΡΡΠ³ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Ρ Π΄Π²ΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²ΡΡ Π²ΡΡΠΎΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.ΠΠΎΡ CSS: # box_1 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 20%;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠΏΡΠ°Π²Π°: 0;
Π²Π½ΠΈΠ·Ρ: 0;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 80%;
ΡΠΎΠ½: # b7d84b;
}
. ΠΡΠΎΡΠ²ΠΈΠ² ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ : Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ
.ΠΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ ΡΠ»ΠΎΠ²ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: # box_1 {
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # ee3e64;
}
# box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
# box_2
). ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅, left: 100px;
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ # box_2
ΡΠΎΡ
ΡΠ°Π½ΡΡΡ Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ ΠΈ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠ΄Π²ΠΈΠ³Π°ΡΡ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π»Π΅Π²ΠΎ.ΠΡΠ»ΠΈ Π±Ρ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ Π²ΡΠΎΡΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊ Π²Π΅ΡΡ
Ρ, ΠΌΡ Π±Ρ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ, ΡΡΠΎ Π½Π°Ρ ΡΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊ ( # box_2
) Π²ΡΡΡΠ½ΡΡ Π² Π²Π΅ΡΡ
Π½ΡΡ ΡΠ°ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π‘ΠΌΠΎΡΡΠΈΡΠ΅ Π·Π΄Π΅ΡΡ, Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ h4: # box_2 {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 0;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 44accf;
}
: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ.
ΡΠ°Π·Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° / ΡΡΡΡΠΎΠΉΡΡΠ²Π°) ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ, Π½Ρβ¦ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ: # box_2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΡΠΏΡΠ°Π²Π°: 0;
}
. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΠ½ Π½Π΅ Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π½Π° Π½ΠΎΠ»Ρ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°ΡΡΡΠ½ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΈΠΊΡΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ·Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ bottom: 0;
. ΠΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
: ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π² ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Π² Π»ΡΡΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ΠΎΠ΄Π½ΠΎΡΠΎΠ΄Π½Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Internet Explorer ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠ°ΠΊ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Π΅ΡΠ½ΠΎ? ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅, Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π²Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
. position
Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΏΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. ΠΡΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ - Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
. ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ: ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ - ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position
. Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π²Π΅ΡΡΠΈ , Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
ΠΈΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠΎΡ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. position
ΠΈ ΠΏΠΎΡΠ΅ΠΌΡ ΠΌΡ Π²ΡΠ±ΡΠ°Π»ΠΈ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ. #container
.ΠΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ #nav
- ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ #container
. ΠΠ»Π΅ΠΌΠ΅Π½Ρ position
Π½Π΅ Π½Π°Π·Π½Π°ΡΠ΅Π½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ #nav
, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
. ΠΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ: Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Ρ Π½ΠΈΠΌ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π½ΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ #content
Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ position
, ΡΠ°Π²Π½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
. position
Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π»ΠΈΡΠ½ΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ #content
, Π½ΠΎ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠ°ΠΌ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #callout
. ΠΠ»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #callout
Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position: absolute
, Π° ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, #content
ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ relative
, ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π² #callout
, ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°Ρ
. ΠΏΠΎ # ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
.ΠΠ»Π΅ΠΌΠ΅Π½Ρ #callout
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΏΡΠ°Π²Π°, ΡΡΠΎΠ±Ρ Π²ΡΡΠ°ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΎΠ΄Π½Ρ ΠΈΠ· Π»ΡΡΡΠΈΡ
ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ #callout
: ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π²Π΅ΡΡ
Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Ρ ΡΠ°ΡΡΡΠ½ΡΠ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ #callout
Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π±Π΅Π· ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠ²Π΅ΡΡ
Ρ ΠΈ ΡΠ½ΠΈΠ·Ρ. #callout
ΠΈΠΌΠ΅Π΅Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
, ΠΎΠ½ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.ΠΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΡΡΡΡΠΏ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ #content
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ Π°Π±Π·Π°ΡΡ Π½Π΅ ΠΏΡΠΎΠΏΠ°Π΄Π°Π»ΠΈ ΠΏΠΎΠ΄ Π½ΠΈΠΌ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΡΡΡΡΠΏΠ° ΡΠΏΡΠ°Π²Π° ΠΎΡ #content
Π½Π° 250 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΠΈΠ΄Π΅ΡΡ Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ΄Π½ΡΡΡ Π·Π°Π΄Π½ΡΡ ΡΠ°ΡΡΡ, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ
, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΎΡΡΠ°Π²Π°Π»ΡΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΠΌ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏ ΠΊ #content
, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ Π°Π±Π·Π°ΡΡ Π½Π΅ ΠΏΡΠΎΠΏΠ°Π΄Π°Π»ΠΈ ΠΏΠΎΠ΄ Π½ΠΈΠΌ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #footer
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊΠΎΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
.ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΡΡΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° #content
Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π΅ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ Π½Π΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠ½ΠΎ Π±ΡΠ» Π±Ρ ΡΠΊΡΡΡ ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ #footer
. ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΡ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π² ΡΡΠΎΠΌ ΠΌΠ°ΠΊΠ΅ΡΠ΅, Π½Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π½Π°ΡΠ΅ΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ.[ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΠ°Π½ΡΡΠ΅ Π±ΡΠ»Π° ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², Π½ΠΎ Ρ ΡΠ΅Ρ
ΠΏΠΎΡ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π±ΡΠ» Π·Π°Ρ
Π²Π°ΡΠ΅Π½ Π²ΡΠ΅Π΄ΠΎΠ½ΠΎΡΠ½ΡΠΌ ΠΠ. ΠΠ·Π²ΠΈΠ½Π΅Π½ΠΈΡ. - Π Π΅Π΄. ] position
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ ΠΈ ΡΡΠΏΠ΅ΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ. Π ΡΡΠ°ΡΡΡΡ, 80% Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° position
ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΊΠ°ΠΊ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
, ΡΠ°ΠΊ ΠΈ Π² ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
- ΡΡΠΎ ΡΠΎ, Π½Π° ΡΡΠΎ Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΡΠΈ ΡΡΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π°
Π΄Π°Π΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΡΠ½ΡΡ ΠΎΡΠ½ΠΎΠ²Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS, ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠΌ Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠ°Π΄Π΅ΡΡΡ, Π²Π°ΡΠΈ Π΄Π½ΠΈ ΡΠ³Π°Π΄ΡΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΉ Π² Π±Π΅Π·ΡΠΌΠ½ΠΎΠΌ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΎΡΠΈΠ±ΠΎΠΊ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ ΠΌΠΈΠ½ΡΡΡ ΠΏΡΠΎΡΠ»ΠΈ. top
, bottom
, left
, right
ΠΈ z-index
. .box {
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΎΠ½: # 7dc765;
}
Π²Π²Π΅ΡΡ
Ρ
ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·Ρ
ΠΈ / ΠΈΠ»ΠΈ Π²Π»Π΅Π²ΠΎ
ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ
. .box {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π²Π΅ΡΡ
Π½ΠΈΠΉ
, ΠΏΡΠ°Π²ΡΠΉ
, Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΈ Π»Π΅Π²ΡΠΉ
. z-index
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ»Ρ, ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠΌΠΈ. . box {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
. .item-absolute {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΡΠ½ΠΈΠ·Ρ
ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π°
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ
Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ. absolute
Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ
ΡΠ΄Π°Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ Π»Π΅Π³ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ justify-content
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π΅ .example
: .example {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π³ΠΈΠ±ΠΊΠΈΠΉ;
justify-content: Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΡΠ°ΡΡ;
}
.item-absolute
Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΡ
ΠΈ ΠΎΠΊΡΡΠΆΠ°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡΡ ΡΠ²Π΅ΡΠ΅Π½Π½ΡΠΌ
ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ justify-content
ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π½Π° space-about
ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π΄Π°Π»ΡΡΠ΅. Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
Π΄Π°ΠΆΠ΅
ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ? .item-absolute ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½,
ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡΠ³Π»Ρ , ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΌΠ΅ΡΡΠΎ
ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. .absolute {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.absolute
ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ,
ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡΡΠ½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ Π½Π°Ρ .item-absolute
, Π³Π΄Π΅ Π±Ρ ΠΌΡ Π½ΠΈ
Π½ΡΠΆΠ½ΠΎ. ΠΡΠΎ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ Ρ
ΠΎΡΠΈΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π»ΡΠ±ΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ
Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌ. ΠΠ±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
.ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΡΠ²Ρ
ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΡΠ΅ΠΌΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅ΡΠ½ΡΡΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΠΎΠΊ
ΡΡΡΠ°Π½ΠΈΡΠ°. ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΡ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΠ΅ΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. x
, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ ΠΎΡΠΈ y
, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎ ΠΎΡΠΈ z
.
, ΡΠ°Π²Π½ΡΡ 0
, ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π§Π°ΡΡΠΎ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΡΠ°ΡΡΡΡ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΡ
ΠΊ Π½Π΅ΠΌΡ ΡΡΠΈΠ»Π΅ΠΉ, Π° Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠΌΠΈ..ΡΠ°Π·Π΄Π΅Π» box-set
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠΉ ΡΠΎΠ½, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΠΎΠ½ Π½Π΅ Π²ΠΈΠ΄Π΅Π½, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π½Π΅Π³ΠΎ, ΡΠ²Π»ΡΡΡΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ. ΠΡΠΌΠΎΡΡΠ΅Π² ΡΠ°Π·Π΄Π΅Π» .box-set
, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ Π²ΡΡΠΎΡΠ°
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 0
. 1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
.box-set {
ΡΠΎΠ½: #eaeaed;
}
.box {
ΡΠΎΠ½: # 2db34a;
ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ;
ΠΌΠ°ΡΠΆΠ°: 1.858736059%;
ΡΠΈΡΠΈΠ½Π°: 29,615861214%;
}
clear: both;
. ΠΠΎΠ΄ΠΎΠ±Π½Π°Ρ ΠΎΡΠΈΡΡΠΊΠ° ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΎΠ² ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π΄ΠΎΠΏΡΡΡΠΈΠΌΠ°, Π½ΠΎ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠ°Ρ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ
ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠΈΡΡΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΡΡΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π½Π°ΡΠ°ΡΡ Π±ΡΡΡΡΠΎ Π½Π°ΠΊΠ°ΠΏΠ»ΠΈΠ²Π°ΡΡΡΡ, Π½Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ. overflow
. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow
Π½Π° auto
Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ, ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π²ΡΡΠΎΡΠ΅
Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠ΅ΡΡΠΉ ΡΠΎΠ½ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Π°
. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡΠΎΡΠ° ,
, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ, ΡΠΈΡΠΈΠ½Π° ,
, 100%,
ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ overflow: auto;
Π² Internet Explorer Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ Apple ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ overflow: hidden; ΠΠ΅ΠΊΠ»Π°ΡΠ°ΡΠΈΡ
. 1
2
3
4
.box-set {
ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π°Π²ΡΠΎ;
}
overflow
ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ.ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π² ΡΠ°Π·Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΡΡΠΎΠ»Π±ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.: before
ΠΈ : after
Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΊΡΡΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΡΠ΅ ΠΈ Π½ΠΈΠΆΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠΈ. ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ : before
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΆΠ°ΡΠΈΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΎΠ½ΠΈΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° table-cell Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ display: table; ΠΠ΅ΠΊΠ»Π°ΡΠ°ΡΠΈΡ
. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ Π² Internet Explorer 6 ΠΈ 7. ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ : after
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΆΠ°ΡΠΈΡ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΏΠΎΠ»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². * zoom
ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌ hasLayout
ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π² Internet Explorer 6 ΠΈ 7, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΡΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ ΡΠΎΠΎΡΠ½ΠΎΡΠΈΡΡΡΡ Ρ Π½ΠΈΠΌΠΈ. . 1
2
3
4
5
6
7
8
9
10
11
12
.Π±ΠΎΠΊΡ-ΡΠ΅Ρ: Π΄ΠΎ,
.box-set: after {
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: "";
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°;
}
.box-set: after {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
.box-set {
* ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: 1;
}
group
. ΠΠ°ΡΠ΅ΠΌ ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° group
ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΈΡΠ»Π° Ρ ΠΏΠ»Π°Π²Π°ΡΡΠ΅ΠΉ Π·Π°ΠΏΡΡΠΎΠΉ. 1
2
3
4
5
6
7
8
9
10
11
12
.Π³ΡΡΠΏΠΏΠ°: Π΄ΠΎ,
.group: after {
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: "";
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: ΡΠ°Π±Π»ΠΈΡΠ°;
}
.group: after {
ΡΡΠ½ΠΎ: ΠΎΠ±Π°;
}
.group {
* ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅: 1;
}
: Π΄ΠΎ
ΠΈ ΠΎΠ΄ΠΈΠ½ : ΠΏΠΎΡΠ»Π΅
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Ρ
Π½ΠΈΠΊΡ clearfix Ρ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ : Π΄ΠΎ
ΠΈ : ΠΏΠΎΡΠ»Π΅
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π΅ Π΄ΠΎΡΡΠΈΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°. Π³ΡΡΠΏΠΏΡ
. position
. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ position
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.,
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅
, ΡΠΎ Π΅ΡΡΡ ΠΎΠ½ΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΈ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ
ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π·Π°Π΄ΡΠΌΠ°Π½ΠΎ, Ρ ΠΈΡ
ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. 1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
9
. box-set {
ΡΠΎΠ½: #eaeaed;
}
.box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
position
ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ static
. ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π²Π²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, Π²Π½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
.ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±ΠΎΠΊΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ΄Π²ΠΈΠ³Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Π»ΡΠ±ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΡΠ²Π΅ΡΡ
Ρ
, ΡΠΏΡΠ°Π²Π°
, ΡΠ½ΠΈΠ·Ρ
ΠΈ ΡΠ»Π΅Π²Π°
, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ .
top
, ΡΠ°Π²Π½ΠΎΠ³ΠΎ 20px,
Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΏΠΎΠ΄ΡΠΎΠ»ΠΊΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΎΡ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½. ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top
Π½Π° -20px
Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π²Π΅ΡΡ
ΠΎΡ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ» ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½.
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
, ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ ΠΊΡΠ°ΡΠΌΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top
20px
Π΄Π»Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ΄ΡΠΎΠ»ΠΊΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ
Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ top
Π½Π° -20px
Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΡΡΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π²Π΅ΡΡ
ΠΎΡ Π²Π΅ΡΡ
Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΠΈΠ»ΠΈ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΏΠΎΡΠΎΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΌΠ΅ΡΠ°ΡΡ ΡΠΎΠΌΡ, Π³Π΄Π΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ» ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ ΠΈΡ
ΠΈΠ· ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. 1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
. box-set {
ΡΠΎΠ½: #eaeaed;
}
.box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-1 {
Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-2 {
ΡΠ»Π΅Π²Π°: 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-3 {
Π²Π½ΠΈΠ·Ρ: -10px;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΎΠ±Π° ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ
Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ Π΄Π»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π΄Π°Π΅ΡΡΡ ΡΠΎΠΌΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°ΠΏΠΈΡΠ°Π½ ΡΠ·ΡΠΊ ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΡ
ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²Π»Π΅Π²ΠΎ,
ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, Π° Π΄Π»Ρ Π°ΡΠ°Π±ΡΠΊΠΈΡ
ΡΡΡΠ°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΏΡΠ°Π²ΠΎ,
ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ.
ΡΡΡΠ°Π½ΠΈΡΡ. top
, ΡΠ°Π²Π½ΡΠΌ 50px,
ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΏΡΠ°Π²Π°
, ΡΠ°Π²Π½ΡΠΌ 100px
, Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²Π½ΠΈΠ· ΠΎΡ Π²Π΅ΡΡ
Π° Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ Π½Π° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΠΏΡΠ°Π²Π° ΠΎΡ Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. top
, Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π½ΠΎ ΠΎΡΡΠ°Π²ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π²Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ flush left. 1
2
3
4
5
6
7
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
.box-set {
ΡΠΎΠ½: #eaeaed;
Π²ΡΡΠΎΡΠ°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
. box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-1 {
Π²Π΅ΡΡ
: 6%;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 2%;
}
.box-2 {
Π²Π΅ΡΡ
: 0;
Π²ΠΏΡΠ°Π²ΠΎ: -40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-3 {
Π²Π½ΠΈΠ·Ρ: -10px;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-4 {
Π²Π½ΠΈΠ·Ρ: 0;
}
ΠΈ ΡΠΈΡΠΈΠ½Ρ
ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top
ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ top
ΠΈ bottom
.ΠΠ°ΠΊ ΠΈ Π² ΡΠ»ΡΡΠ°Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ
ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
, ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΎΡΠ΄Π°Π΅ΡΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°ΠΏΠΈΡΠ°Π½ ΡΠ·ΡΠΊ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ
ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ Π²Π΅ΡΡ
Π½ΠΈΠΉ
ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π²ΡΡΠΎΡΠΎΠΉ, ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠ΅ΠΉ Π²Π΅ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ
Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠ΅Ρ
ΡΠ΅ΡΡΡΠ΅Ρ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ. ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅
, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π½Π΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ.ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΎΠ³ΠΎΠ²ΠΎΡΠΊΠ° Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Internet Explorer 6. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π² Internet Explorer 6, Π΅ΡΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠ΅ ΡΠ»ΠΎΠ²ΠΊΠΈ.
ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΡΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. 1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 Π³ΠΎΠ΄
22
.box {
ΡΠΎΠ½: # 2db34a;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-1 {
Π²Π΅ΡΡ
: 6%;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 2%;
}
.box-2 {
Π²Π΅ΡΡ
: 0;
Π²ΠΏΡΠ°Π²ΠΎ: -40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
. box-3 {
Π²Π½ΠΈΠ·Ρ: -10px;
Π²ΠΏΡΠ°Π²ΠΎ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-4 {
Π²Π½ΠΈΠ·Ρ: 0;
}
- ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π°, ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΠΎΠ³ΠΎ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΎΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΎΠ±Π»Π°Π΄Π°ΡΡΠΈΠΌ, Π²ΡΠ΅Π³Π΄Π° Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π½ΠΈΠΌ. ΡΠ»Π΅Π²Π°
ΠΈ ΡΠΏΡΠ°Π²Π°
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ
ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ Π±Π΅Π· Π½Π°ΡΡΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»Ρ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ. 1
2
1
2
3
4
5
6
7
8
9
10
11
ΠΊΠΎΡΠΏΡΡ {
ΡΠΎΠ½: #eaeaed;
}
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» {
ΡΠΎΠ½: # 2db34a;
Π²Π½ΠΈΠ·Ρ: 0;
ΡΠ»Π΅Π²Π°: 0;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
ΡΠΏΡΠ°Π²Π°: 0;
}
x
ΠΈ y
. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΎΠ½ΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΊΠ»Π°Π΄ΡΡΡΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ ΠΊΠ°ΠΊ ΠΎΡΡ z, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index
. z-index
Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ.ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ z-index
Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π²Π΅ΡΡ
Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² DOM. z-index
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position
, ΡΠ°Π²Π½ΠΎΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠΌΡ
ΠΈΠ»ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌΡ
. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°. z-index
ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ ΡΠΎΡΠ½ΠΎ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π±Π»ΠΎΠΊΠ° Π΄Π²Π°, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π½Π°Π²Π΅ΡΡ
Ρ Π±Π»ΠΎΠΊΠ° ΠΎΠ΄ΠΈΠ½, Π·Π°ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ° ΡΡΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π±Π»ΠΎΠΊΠ° Π΄Π²Π°, ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° z-index
ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Π΄Π²Π° ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π°Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠΌ, Π·Π° Π½ΠΈΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠ΅ΡΠΈΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠΎΠ΄ Π½ΠΈΠΌ, Π° ΡΠ΅ΡΠ²Π΅ΡΡΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ - ΠΏΠΎΠ΄ ΡΡΠ΅ΡΡΠΈΠΌ. 1
2
3
4
5
6
7
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
.box-set {
ΡΠΎΠ½: #eaeaed;
Π²ΡΡΠΎΡΠ°: 160 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
}
.box {
ΡΠΎΠ½: # 2db34a;
Π³ΡΠ°Π½ΠΈΡΠ°: 2px solid # ff7b29;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
}
.box-1 {
ΡΠ»Π΅Π²Π°: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.box-2 {
Π²Π½ΠΈΠ·Ρ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 3;
}
.box-3 {
ΡΠ»Π΅Π²Π°: 130 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2;
}
. box-4 {
Π²Π½ΠΈΠ·Ρ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 190 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1;
}
position: static
. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΡΠ΅Π΄ΠΊΠΎ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΎΠ±ΡΡΠ²Π»Π΅Π½Π½ΡΠΌ. ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
, ΠΏΠΎΠ·ΠΈΡΠΈΡ : Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ
ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ : ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ
. ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅;
}
ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
, Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ
ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
, ΠΈ ΠΎΠ½ΠΈ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡΠΌΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠΌΠ΅ΡΠ°ΡΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π° ΡΠ°ΠΌΠΈΡ
ΡΠ΅Π±Ρ, ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. position: absolute
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° .position: relative;
}
: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ
, ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½Ρ ΠΈΠ· ΡΠ²ΠΎΠ΅Π³ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠΎΠΊΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ Π·Π°Π½ΠΈΠΌΠ°Ρ ΡΠΎ ΠΆΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.ΠΡΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ΅Π±Ρ .: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ.ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ; Π²Π΅ΡΡ : 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
position: relative
, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ, Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½ΠΈ Π½Π° ΡΡΠΎ Π²ΠΎΠΊΡΡΠ³. ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ² Ρ
ΠΎΡΠΎΡΠΈ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ΠΈ Π΅ΡΡΡ.
position: absolute
ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ Π΄Π΅Π»Π°Π΅Ρ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΡ : ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ
, Ρ Π΄Π²ΡΠΌΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΠΎΡΠ»ΠΈΡΠΈΡΠΌΠΈ:position: relative;
} .ourBox {
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²Π΅ΡΡ : 0;
ΠΎΡΡΠ°Π»ΠΎΡΡ: 0;
}
: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ
.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π΅ Π½Π° : Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈ ΡΠ°Π½ΡΡΠ΅, ΡΡΡ
Π½ΡΠ»ΠΎ - ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π²Π° ΡΠ΅ΡΡΡ
ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΡΠ΄ΠΎΠΌ.