css Π²Π»Π°ΡΡΠΈΠ²ΡΡΡΡ z-index
- ΠΠΎΠ»ΠΎΠ²Π½Π°
- css
- Π²Π»Π°ΡΡΠΈΠ²ΠΎΡΡΡ
- z-index
ΠΠ»Π°ΡΡΠΈΠ²ΡΡΡΡ z-index
Π²ΠΈΠ·Π½Π°ΡΠ°Ρ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° Π΅Π»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½ΡΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·ΠΌΡΡΡΠΈΡΠΈ Π΅Π»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΡΡΠΎΡΡΠ½ΡΡ Π²ΠΈΡΠ΅ ΡΠ½ΡΠΎΠ³ΠΎ Π΅Π»Π΅ΠΌΠ΅Π½ΡΡ Π°Π±ΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π½ΠΈΠΌ.
ΠΡΠ΄Ρ-ΡΠΊΡ ΠΏΠΎΠ·ΠΈΡΡΠΉΠΎΠ²Π°Π½Ρ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ Π½Π° Π²Π΅Π±-ΡΡΠΎΡΡΠ½ΡΡ Π½Π°ΠΊΠ»Π°Π΄Π°ΡΡΡΡΡ ΠΎΠ΄ΠΈΠ½ Π½Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π² ΠΏΠ΅Π²Π½ΠΎΠΌΡ ΠΏΠΎΡΡΠ΄ΠΊΡ, ΡΠΌΡΡΡΡΡΠΈ ΡΠΈΠΌ ΡΠ°ΠΌΠΈΠΌ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΈΠΉ ΡΡΠ΅ΡΡΠΉ Π²ΠΈΠΌΡΡ, ΠΊΠΎΡΡΠΈΠΉ ΠΏΠ΅ΡΠΏΠ΅Π½Π΄ΠΈΠΊΡΠ»ΡΡΠ½ΠΈΠΉ Π΅ΠΊΡΠ°Π½Ρ. ΠΠΎΠΆΠ΅Π½ Π΅Π»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅ ΠΏΠ΅ΡΠ΅Π±ΡΠ²Π°ΡΠΈ Π² ΡΡΠΎΠΌΡ ΡΡΠ΅ΠΊΡ, ΡΠΊ Π½ΠΈΠΆΡΠ΅, ΡΠ°ΠΊ Ρ Π²ΠΈΡΠ΅ ΡΠ½ΡΠΈΡ ΠΎΠ±’ΡΠΊΡΡΠ² Π½Π° Π²Π΅Π±-ΡΡΠΎΡΡΠ½ΡΡ.
ΠΠ΅ ΡΠ°ΠΌΠ΅ Π±ΡΠ΄Π΅ ΠΏΠ΅ΡΠ΅Π±ΡΠ²Π°ΡΠΈ Π΅Π»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ΄Π½ΠΎΡΠ½ΠΎ ΡΠ½ΡΠΈΡ
Π΅Π»Π΅ΠΌΠ΅Π½ΡΡΠ², Π·Π°Π΄Π°ΡΡΡΡΡ Π·Π° Π΄ΠΎΠΏΠΎΠΌΠΎΠ³ΠΎΡ Π²Π»Π°ΡΡΠΈΠ²ΠΎΡΡΡ z-index
.
ΠΠ°ΠΏΡΠΈΠΊΠ»Π°Π΄, Π΅Π»Π΅ΠΌΠ΅Π½Ρ Π·Ρ z-index
, ΡΠΊΠΈΠΉ Π΄ΠΎΡΡΠ²Π½ΡΡ 300, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΠΈΠΌΠ΅ΡΡΡΡ Π±Π»ΠΈΠΆΡΠ΅ ΠΊΠΎΡΠΈΡΡΡΠ²Π°ΡΠ΅Π²Ρ, Π½ΡΠΆ Π΅Π»Π΅ΠΌΠ΅Π½ΡΡ Π·Ρ z-index
, ΡΠΊΠΈΠΉ Π΄ΠΎΡΡΠ²Π½ΡΡ 200. ΠΠ½Π°Π»ΠΎΠ³ΡΡΠ½ΠΎ, Π΅Π»Π΅ΠΌΠ΅Π½Ρ Π·Ρ Π·Π½Π°ΡΠ΅Π½Π½ΡΠΌ 50 Π±Π»ΠΈΠΆΡΠ΅, Π½ΡΠΆ Π΅Π»Π΅ΠΌΠ΅Π½Ρ Π·Ρ Π·Π½Π°ΡΠ΅Π½Π½ΡΠΌ 20 ΡΠΎΡΠΎ. Π’ΠΎΠ±ΡΠΎ ΡΠΈΠΌ Π²ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½Π½Ρ z-index
, ΡΠΈΠΌ Π²ΠΈΡΠ΅ Π²ΡΠ½ Π·Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡΡ Π²ΡΠ΄Π½ΠΎΡΠ½ΠΎ Π΅Π»Π΅ΠΌΠ΅Π½ΡΡΠ² ΡΠ· Π½ΠΈΠΆΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½Π½ΡΠΌ Π·Π°Π΄Π°Π½ΠΈΠΌ Π΄Π»Ρ ΡΡΡΡ Π²Π»Π°ΡΡΠΈΠ²ΠΎΡΡΡ.
Π―ΠΊΡΠΎ ΡΡ Π²Π»Π°ΡΡΠΈΠ²ΡΡΡΡ Π½Π΅ ΡΡΠΏΠ°ΡΠΈ, Π΅Π»Π΅ΠΌΠ΅Π½ΡΠΈ Π±ΡΠ΄ΡΡΡ ΡΠΎΠ·ΡΠ°ΡΠΎΠ²Π°Π½Ρ Π·Π°Π»Π΅ΠΆΠ½ΠΎ Π²ΡΠ΄ ΠΏΠΎΡΠΎΠΊΡ: ΡΠΈΠΌ Π½ΠΈΠΆΡΠ΅ Ρ ΠΊΠΎΠ΄Ρ, ΡΠΈΠΌ Π΅Π»Π΅ΠΌΠ΅Π½Ρ Π²ΠΈΡΠ΅ Π½Π° ΡΡΠΎΡΡΠ½ΡΡ. ΠΠ° Π΄ΠΎΠΏΠΎΠΌΠΎΠ³ΠΎΡ z-index
, ΠΌΠΎΠΆΠ½Π° ΡΡΡΡΠ½ΠΎ Π·ΠΌΡΠ½ΡΠ²Π°ΡΠΈ ΡΡ ΠΏΠΎΠ²Π΅Π΄ΡΠ½ΠΊΡ.
ΠΠ»Π°ΡΡΠΈΠ²ΡΡΡΡ z-index
ΠΌΠΎΠΆΠ΅ ΠΏΡΠΈΠΉΠΌΠ°ΡΠΈ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½Π½Ρ: ΠΊΠ»ΡΡΠΎΠ²Π΅ ΡΠ»ΠΎΠ²ΠΎ auto
Π°Π±ΠΎ ΡΠΈΡΠ»ΠΎ, ΡΠΊΠ΅ ΠΎΠ·Π½Π°ΡΠ°ΡΠΈΠΌΠ΅ ΡΡΠ²Π΅Π½Ρ Ρ ΠΏΠΎΡΠΎΡΡ.
ΠΠΎΡΠ°ΡΠΊΠ°: | Π¦Ρ Π²Π»Π°ΡΡΠΈΠ²ΡΡΡΡ ΠΏΡΠ°ΡΡΡ ΡΡΠ»ΡΠΊΠΈ Π΄Π»Ρ Π΅Π»Π΅ΠΌΠ΅Π½ΡΡΠ², Ρ ΡΠΊΠΈΡ
Π·Π½Π°ΡΠ΅Π½Π½Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½Ρ Π·Π°Π΄Π°Π½ΠΎ ΡΠΊ |
ΠΠ°ΠΏΡΠΎΠΏΠΎΠ½ΡΠ²Π°ΡΠΈ ΡΠ²ΠΎΡ ΠΏΠΎΡΠ°Π΄Ρ ΡΠΈ Π½ΠΎΡΠ°ΡΠΊΡ
ΠΠΎΡΠ°Π΄Π°ΠΠΎΡΠ°ΡΠΊΠ°
Π‘ΠΈΠ½ΡΠ°ΠΊΡ
z-index: auto|number|initial|inherit;
ΠΠ»Π°ΡΡΠΈΠ²ΡΡΡΡ z-index ΠΌΠΎΠΆΠ΅ ΠΎΡΡΠΈΠΌΡΠ²Π°ΡΠΈ 4 Π·Π½Π°ΡΠ΅Π½Π½Ρ:
auto
ΠΡΡΠ°Π½ΠΎΠ²Π»ΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° Π΅ΠΊΠ²ΡΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ Π±Π°ΡΡΠΊΡΠ²ΡΡΠΊΠΈΠΌ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
Π¦Π΅ Π±Π΅Π· Π·Π°Π΄Π°Π½Π½Ρ
number
ΠΡΡΠ°Π½ΠΎΠ²Π»ΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΡΠ΅ΠΊΠ° Π΅Π»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠ·Π²ΠΎΠ»ΡΡΡΡΡΡ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΠ²Π°ΡΠΈ Π²ΡΠ΄’ΡΠΌΠ½Ρ Π·Π½Π°ΡΠ΅Π½Π½Ρ.
initial
ΠΡΡΠ°Π½ΠΎΠ²Π»ΡΡ Π²Π»Π°ΡΡΠΈΠ²ΡΡΡΡ Ρ Π·Π½Π°ΡΠ΅Π½Π½Ρ Π±Π΅Π· Π·Π°Π΄Π°Π½Π½Ρ
inherit
ΠΠΊΠ°Π·ΡΡ Π½Π° ΡΠΏΠ°Π΄ΠΊΠΎΠ²ΡΡΡΡ Π²Π»Π°ΡΡΠΈΠ²ΠΎΡΡΡ Π²ΡΠ΄ ΡΠ²ΠΎΠ³ΠΎ Π±Π°ΡΡΠΊΡΠ²ΡΡΠΊΠΎΠ³ΠΎ Π΅Π»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ½Π°ΡΠ΅Π½Π½Ρ Π±Π΅Π· Π·Π°Π΄Π°Π½Π½Ρ: | auto |
---|---|
ΠΠ°ΡΠ»ΡΠ΄ΡΡ: | ΠΡ |
ΠΠ½ΡΠΌΡΡΡΡΡΡ: | Π’Π°ΠΊ |
JavaScript ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ: | object.style.zIndex=»-1″ |
ΠΠ΅ΡΠ΅Π³Π»ΡΠ΄Π°ΡΡ
- Π‘ΡΠ°ΡΡΠΎΠ½Π°ΡΠ½Ρ ΠΏΠ΅ΡΠ΅Π³Π»ΡΠ΄Π°ΡΡ
- ΠΠΎΠ±ΡΠ»ΡΠ½Ρ ΠΏΠ΅ΡΠ΅Π³Π»ΡΠ΄Π°ΡΡ
ΠΠ΅ΡΠ΅Π³Π»ΡΠ΄Π°Ρ | |||||
---|---|---|---|---|---|
z-index | 1. | 8.0 | 3.0 | 1.0 | 4.0 |
ΠΠ΅ΡΠ΅Π³Π»ΡΠ΄Π°Ρ | |||
---|---|---|---|
z-index | 1.0 | 1.0 | 1.0 |
ΠΡΠΈΠΊΠ»Π°Π΄ΠΈ
- ΠΡΠΈΠΊΠ»Π°Π΄ 1
- ΠΡΠΈΠΊΠ»Π°Π΄ 2
- ΠΡΠΈΠΊΠ»Π°Π΄ 3
- ΠΡΠΈΠΊΠ»Π°Π΄ 4
ΠΠΈΠ½Π°ΠΌΡΡΠ½Π΅ ΡΠ΅Π΄Π°Π³ΡΠ²Π°Π½Π½Ρ Π·Π½Π°ΡΠ΅Π½Π½Ρ Π΄Π»Ρ Π²Π»Π°ΡΡΠΈΠ²ΠΎΡΡΡ z-index
ΠΡΠΈΠΊΠ»Π°Π΄ ΡΠΎΠ±ΠΎΡΠΈ Π²Π»Π°ΡΡΠΈΠ²ΠΎΡΡΡ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΡΡ ΡΠΎΠ±ΠΎΡΠΈ Π²Π»Π°ΡΡΠΈΠ²ΠΎΡΡΡ
ΠΠΈΠ½Π°ΠΌΡΡΠ½ΠΈΠΉ ΠΏΡΠΈΠΊΠ»Π°Π΄
ΠΠΎΠ΄Π°ΡΠΊΠΎΠ²Ρ ΠΏΠΎΡΠΈΠ»Π°Π½Π½Ρ
position
box-shadow
clear
display
right
float
opacity
visibility
vertical-align
unicode-bidi
top
clip
bottom
all
left
ΠΠ±Π·ΠΎΡ.

CΠΌΠΎΡΡΠ΅ΡΡ Π½Π° GitHub
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ ΠΎΠΏΡΠΈΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Bootstrap, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π΄Π»Ρ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ, ΠΌΠΎΡΠ½ΡΡ ΡΠ΅ΡΡΠ°ΡΡΡ ΡΠΈΡΡΠ΅ΠΌΡ, Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΌΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡΠ΅ΠΊΡ ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ.
ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ
ΠΡΠΎ Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Bootstrap ΠΈ ΠΎΠ½ΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π°ΡΠ΅ΠΉ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ. ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² Π½ΠΈΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ ΠΈ (ΠΈΠ½ΠΎΠ³Π΄Π°) ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ
. Π₯ΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ
Π Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΠΈ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ²:
.container
, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρmax-width
Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅;.container-fluid
, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎwidth: 100%
Π½Π° Π²ΡΠ΅Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠΊΠ°Ρ ;.
, ΡΠΎ Π΅ΡΡΡ ΡΠΈΡΠΈΠ½Π°container-{breakpoint}
width: 100%
Π΄ΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅ ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° max-width
ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° .container
ΠΈ .container-fluid
ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌΠΈ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΠΈ ΡΡΠ°Π²Π½ΠΈΡΠ΅ ΠΈΡ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π‘Π΅ΡΠΎΠΊ.
Extra small <576px |
Small β₯576px |
Medium β₯768px |
Large β₯992px |
Extra large β₯1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
. |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 960px | 1140px | |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
ΠΡΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠ»Π°ΡΡ .container
ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° max-width
ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅.
<div> <!-- Content here --> </div>
ΠΠ·ΠΌΠ΅Π½ΡΠΈΠ²ΡΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ .container-fluid
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
<div> ... </div>
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π² Bootstrap Π²Π΅ΡΡΠΈΠΈ 4.4. ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 100%, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° ΡΠΊΠ°Π·Π°Π½Π½Π°Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ°, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ max-width
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΡ
ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠΊΠ°Ρ
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, .container-sm
ΠΈΠΌΠ΅Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ Π² 100% Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠ° ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° sm
, Π³Π΄Π΅ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠΆΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ md
, lg
ΠΈ xl
.
<div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ (small) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div> <div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ ΡΡΠ΅Π΄Π½Π΅ΠΉ (medium) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div> <div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ (large) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div> <div>ΡΠΈΡΠΈΠ½Π° 100% Π΄ΠΎ ΡΠΊΡΡΡΠ° Π±ΠΎΠ»ΡΡΠΎΠΉ (Extra large) ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ</div>
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Bootstrap Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ², ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·ΡΠΌΠ½ΡΡ
ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ
ΡΠΎΡΠ΅ΠΊ Π΄Π»Ρ Π½Π°ΡΠΈΡ
ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠ². ΠΡΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Π΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Bootstrap Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² — ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ — Π² Π½Π°ΡΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ Sass Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΎΠΊ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
// ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ, ΠΌΠ΅Π½Π΅Π΅ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) // ΠΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ° Π΄Π»Ρ `xs`, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Bootstrap // ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 576px) { ... } // Π‘ΡΠ΅Π΄Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 768px) { ... } // ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ, 992 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 992px) { ... } // ΠΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΡΠΎΠ»Ρ, 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 1200px) { ... }
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΏΠΈΡΠ΅ΠΌ Π½Π°Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ CSS Π½Π° Sass, Π²ΡΠ΅ Π½Π°ΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠΊΡΠΈΠ½Ρ Sass:
// ΠΠ»Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ xs Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // ΠΡΠΈΠΌΠ΅Ρ: Π‘ΠΊΡΡΡΡ Π½Π°ΡΠ°Π»ΠΎ Ρ `min-width: 0`, Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π² ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠ΅`sm` .custom-class { display: none; } @include media-breakpoint-up(sm) { .custom-class { display: block; } }
ΠΠ½ΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, ΠΈΠ΄ΡΡΠΈΠ΅ Π² Π΄ΡΡΠ³ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Π·Π°Π΄Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅):
// ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ, ΠΌΠ΅Π½Π΅Π΅ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 575.98px) { ... } // ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, ΠΌΠ΅Π½Π΅Π΅ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 767.98px) { ... } // Π‘ΡΠ΅Π΄Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, ΠΌΠ΅Π½Π΅Π΅ 992 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 991.98px) { ... } // ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ, ΠΌΠ΅Π½Π΅Π΅ 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 1199.98px) { ... } // ΠΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΡΠΎΠ»Ρ) // ΠΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠ°Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½Π°Ρ ΡΠΎΡΠΊΠ° Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π·Π°ΠΏΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°, ΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Π½Π°Π΄ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ min-
ΠΈ max-
ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² ΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Ρ Π΄ΡΠΎΠ±Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ (ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡΡ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΡΠ»ΠΎΠ²ΠΈΡΡ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ) ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠΉ ΡΠΎΡΠ½ΠΎΡΡΡΡ Π΄Π»Ρ ΡΡΠΈΡ
ΡΡΠ°Π²Π½Π΅Π½ΠΈΠΉ.
ΠΡΠ΅ ΡΠ°Π·, ΡΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠΊΡΠΈΠ½Ρ Sass:
@include media-breakpoint-down(xs) { ... } @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } // ΠΠ»Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ xl Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ // ΠΡΠΈΠΌΠ΅Ρ: ΡΡΠΈΠ»Ρ ΠΎΡ ΡΡΠ΅Π΄Π½Π΅ΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΈ Π½ΠΈΠΆΠ΅ @include media-breakpoint-down(md) { .custom-class { display: block; } }
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈ ΠΌΠΈΠΊΡΠΈΠ½Ρ Π΄Π»Ρ Π½Π°ΡΠ΅Π»ΠΈΠ²Π°Π½ΠΈΡ Π½Π° ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π³ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
// ΠΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ, ΠΌΠ΅Π½Π΅Π΅ 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) @media (max-width: 575.98px) { ... } // ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, 576 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Π‘ΡΠ΅Π΄Π½ΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 768px) and (max-width: 991.98px) { ... } // ΠΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΡ, 992 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // ΠΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° (Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΠΈΠ΅ ΡΡΠΎΠ»Ρ, 1200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΡΠ΅) @media (min-width: 1200px) { ... }
ΠΡΠΈ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠ΅ΡΠ΅Π· ΠΌΠΈΠΊΡΠΈΠ½Ρ Sass:
@include media-breakpoint-only(xs) { ... } @include media-breakpoint-only(sm) { ... } @include media-breakpoint-only(md) { ... } @include media-breakpoint-only(lg) { ... } @include media-breakpoint-only(xl) { ... }
Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΠΎΡ Π²Π°ΡΡΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ:
// ΠΡΠΈΠΌΠ΅Ρ // ΠΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈ, Π½Π°ΡΠΈΠ½Π°Ρ ΡΠΎ ΡΡΠ΅Π΄Π½ΠΈΡ ΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Ρ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ. @media (min-width: 768px) and (max-width: 1199.98px) { ... }
ΠΠΈΠΊΡΠΈΠ½ Sass Π΄Π»Ρ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³Π° Π½Π° ΡΠΎΡ ΠΆΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°:
@include media-breakpoint-between(md, xl) { ... }
Z-ΠΈΠ½Π΄Π΅ΠΊΡ
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ z-index
, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΡΡΠ΅ΡΡΡ ΠΎΡΡ Π΄Π»Ρ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΊΠ°Π»Ρ z-ΠΈΠ½Π΄Π΅ΠΊΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Bootstrap, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ»Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π° Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ
ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ
ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ, ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΡ
ΠΎΠΊΠΎΠ½ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
ΠΡΠΈ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠ»Π°, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π² ΠΈΠ΄Π΅Π°Π»Π΅ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ². ΠΠ°ΠΌ Π½ΡΠΆΠ΅Π½ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π½Π°ΡΠΈΡ
ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² — Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΎΠΊΠ½Π°, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΈ, ΠΌΠΎΠ΄Π°Π»ΡΠ½ΡΠ΅ ΠΎΠΊΠ½Π° — ΡΡΠΎΠ±Ρ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±ΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π² ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠ΅Ρ ΠΏΡΠΈΡΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ 100
+ ΠΈΠ»ΠΈ 500
+.
ΠΡ Π½Π΅ ΠΏΠΎΠΎΡΡΡΠ΅ΠΌ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΡΠΈΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ; Π΅ΡΠ»ΠΈ ΠΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½, ΠΠ°ΠΌ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ Π²ΡΠ΅.
$zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default;
Π§ΡΠΎΠ±Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π²Ρ
ΠΎΠ΄ΠΎΠ² Π² Π³ΡΡΠΏΠΏΠ°Ρ
Π²Π²ΠΎΠ΄Π°), ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ°Π»ΡΠ΅ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index
, ΡΠ°Π²Π½ΡΠ΅ 1
, 2
ΠΈ 3
Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ/ΡΠΎΠΊΡΡΠ΅/Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΠΌΡ Π²ΡΠ²ΠΎΠ΄ΠΈΠΌ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ
z-index
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ Π½Π°Π΄ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
html — ΠΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ div ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ΅ΠΌ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ?
ΡΠΏΡΠΎΡΠΈΠ»
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ 3 Π³ΠΎΠ΄Π°, 5 ΠΌΠ΅ΡΡΡΠ΅Π² Π½Π°Π·Π°Π΄
ΠΡΠΎΡΠΌΠΎΡΡΠ΅Π½ΠΎ 17 ΡΡΡΡΡ ΡΠ°Π·
ΠΠ΅Π½Ρ.
Π― ΡΠΎΠ·Π΄Π°Ρ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ HTML, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡ.
ΠΠ½Π΅ Π½Π΅ ΡΠ΄Π°Π΅ΡΡΡ Π·Π°ΡΡΠ°Π²ΠΈΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Π·Π°Π²ΠΈΡΠ°ΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ΅ΠΌΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ°ΠΌΠΈ. ΠΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΎΠ½ ΡΠΈΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ.
ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅:
.red { Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; } #red_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ; } .red:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ #red_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; Π²Π΅ΡΡ : 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } .Π·Π΅Π»Π΅Π½ΡΠΉ { Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΎΠ½: Π·Π΅Π»Π΅Π½ΡΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; Π²Π΅ΡΡ : 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } #green_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ; } .green:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ #green_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; Π²Π΅ΡΡ : 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
ΠΡΠ°ΡΠ½ΡΠΉΠ‘ΠΎΠ²Π΅Ρ ΠΏΠΎ ΠΊΡΠ°ΡΠ½ΠΎΠΌΡ ΡΠ²Π΅ΡΡ Π·Π΄Π΅ΡΡΠΠ΅Π»Π΅Π½ΡΠΉΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΡΠΎΠ²Π΅ΡΡ ΠΏΠΎ Π·Π΅Π»Π΅Π½ΠΎΠΌΡ ΡΠ²Π΅ΡΡ
ΠΡΠ»ΠΈ Π²Ρ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΡΠ°ΡΠ½ΡΡ ΡΠ°ΠΌΠΊΡ, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π·Π° Π·Π΅Π»Π΅Π½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ, ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π±ΡΠ»Π° Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ.
ΠΠΎΠ»ΡΡΠΎΠ΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ, ΠΠ°ΠΉΠΊΠ».
- HTML
- CSS
0
ΠΠΎΠΊΠ° ΠΊΡΠ°ΡΠ½ΡΠΉ ΠΈ Π·Π΅Π»Π΅Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ z-ΠΈΠ½Π΄Π΅ΠΊΡ, Π»ΡΠ±ΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ z-ΠΈΠ½Π΄Π΅ΠΊΡΡ Π² Π½ΠΈΡ
ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΊΡΠ°ΡΠ½ΠΎΠΌΡ div Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΉ z-ΠΈΠ½Π΄Π΅ΠΊΡ, ΡΠ΅ΠΌ Π·Π΅Π»Π΅Π½ΠΎΠΌΡ β Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΡΡΠΎΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ.
ΠΠ΄Π΅ΡΡ Π΅ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°Ρ ΡΡΠ΅ΠΊΠ° z-index: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΠΌ: ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ»ΠΎΠΆΠ΅Π½ΠΎ, Π²Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ.
1
ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π΅Π»Π΅Π½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΠΎΠ³ΡΡΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈ z-ΠΈΠ½Π΄Π΅ΠΊΡ ΡΠ°Π²Π½ΡΠΌ -1
.ΠΊΡΠ°ΡΠ½ΡΠΉ { Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; } #red_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ; } .red:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ #red_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 15; Π²Π΅ΡΡ : 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } .Π·Π΅Π»Π΅Π½ΡΠΉ { Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΎΠ½: Π·Π΅Π»Π΅Π½ΡΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ; z-ΠΈΠ½Π΄Π΅ΠΊΡ:-1; Π²Π΅ΡΡ : 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } #green_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ; } .green:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ #green_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; Π²Π΅ΡΡ : 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
1
ΠΡΠΎ Ρ
ΠΈΡΡΡΠΉ Π²ΠΎΠΏΡΠΎΡ. Π² ΡΡΠΈΠ»Π΅ .red ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ z-index: 2;
.
.ΠΊΡΠ°ΡΠ½ΡΠΉ { Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; }
Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ z-ΠΈΠ½Π΄Π΅ΠΊΡΠ° ΠΈΠ· .red ΠΈ .green Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ ΠΏΠΎΠ»Ρ ΡΠ΅Π»Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 0. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΠ΅ ΡΡΠΈΡ Π΄Π²ΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ², ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ.
ΠΊΠΎΡΠΏΡΡ { ΠΌΠ°ΡΠΆΠ°: 0; } .ΠΊΡΠ°ΡΠ½ΡΠΉ { Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΎΠ½: ΠΊΡΠ°ΡΠ½ΡΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; } #red_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ; } .red:Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ #red_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; Π²Π΅ΡΡ : 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } .Π·Π΅Π»Π΅Π½ΡΠΉ { Π²ΡΡΠΎΡΠ°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΎΠ½: Π·Π΅Π»Π΅Π½ΡΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; Π²Π΅ΡΡ : 75 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } #green_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ; } .green:Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ #green_tip { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΎΠ½: ΡΠΈΠ½ΠΈΠΉ; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 2; Π²Π΅ΡΡ : 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠΎΡΡΠΈΡΡ Π΅Π³ΠΎ, ΠΎΠ±Π΅ΡΠ½ΡΠ² ΡΠ²ΠΎΠΉ ΠΊΠ»Π°ΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΈ ΡΠΎΠ³Π΄Π° Π²ΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ Π²ΡΠ·Π²Π°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΊΠ»Π°ΡΡΠ°.
Π°. Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΈΠΊ; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ; ΠΏΠΎΠ»Π΅: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 0 0 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²Π΅ΡΡ : 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ a.tooltips { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; ΡΠΈΡΠΈΠ½Π°: 140 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ²Π΅Ρ: #FFFFFF; ΡΠΎΠ½: #000000; Π²ΡΡΠΎΡΠ°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ; Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ: ΡΠΊΡΡΡΠ°Ρ; ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 6px; } Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ a.tooltips: ΠΏΠΎΡΠ»Π΅ { ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅: ''; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅; Π²Π΅ΡΡ : 100%; ΡΠ»Π΅Π²Π°: 50%; ΠΏΠΎΠ»Π΅ ΡΠ»Π΅Π²Π°: -8px; ΡΠΈΡΠΈΠ½Π°: 0; Π²ΡΡΠΎΡΠ°: 0; Π²Π΅ΡΡ Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: 8px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ #000000; Π³ΡΠ°Π½ΠΈΡΠ° ΡΠΏΡΠ°Π²Π°: 8px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ; Π³ΡΠ°Π½ΠΈΡΠ° ΡΠ»Π΅Π²Π°: 8px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ; } a: hover.tooltips ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ { Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ: Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ; Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: 0,8; Π²Π½ΠΈΠ·Ρ: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 50%; ΠΏΠΎΠ»Π΅ ΡΠ»Π΅Π²Π°: -76px; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 999; }
ΠΠ°ΡΠ΅ΠΌ Π²ΡΠ·ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ, Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ
CSS Tooltips ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°
ΠΡΠΎΠ²Π΅ΡΡΡΠ΅, Π½Π΅ Π·Π°ΠΊΡΡΡΡ Π»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Google ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· Facebook ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°Π΄ΡΠ΅Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ ΠΈ ΠΏΠ°ΡΠΎΠ»Ρ ΠΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ° Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ, Π½ΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ° Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ, Π½ΠΎ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΠ΅Π²ΠΈΠ½ ΠΠΈ HTML-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ div ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ Π±ΠΈΠ·Π½Π΅Ρ-ΡΠ°ΠΉΡΠ°. ΠΡΠΊΡΠΎΠΉΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ HTML ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π² ΡΠ°Π·Π΄Π΅Π» ΠΡΠΎΡ ΠΊΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄Π²Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° div ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠ² div1 ΠΈ div2. ΠΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ div1 ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1Β». ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΡΠΎΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π³Π»Π°ΡΠΈΠ»: Β«ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2Β». ΠΡΠΈ Π΄Π²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π²Π½ΡΡΡΠΈ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ main. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΠ΄Π°, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΡΠ°Π³Π΅: ΠΡΠΎΡ ΠΊΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ JavaScript changeZindex. ΠΡΡΠ°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ CSS Π² ΡΠ°Π·Π΄Π΅Π» position:relative; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; Π²ΡΡΠΎΡΠ°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΏΠΎΠ·ΠΈΡΠΈΡ:Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 1; Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; z-ΠΈΠ½Π΄Π΅ΠΊΡ: -1; ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ z-index Π΄Π»Ρ ΡΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² div Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ #main ΡΠΎΠ·Π΄Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠΈΠ½ΠΈΠΉ ΡΠΎΠ½, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π΄Π²Π° Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠΎΠ΄ Π½ΠΈΠΆΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΠ΄Π°, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΡΠ°Π³Π΅:: ΠΡΠΎΡ ΠΊΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΠ½ΠΊΡΠΈΡ JavaScript changeZindex. ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ΅ΡΡΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index div1 ΠΈ div2 Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ. Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΆΠ΅Π»ΡΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ div1 Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Β«ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1Β» Π½Π°Π΄ Π·Π΅Π»Π΅Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ div Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Β«ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2Β». ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ div2 ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ ΠΏΠΎΠ²Π΅ΡΡ
div1. Π‘ΡΡΠ»ΠΊΠΈ Π Π΅ΡΡΡΡΡ Π‘ΠΎΠ²Π΅ΡΡ ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠΉΡΠ΅ΡΡ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠΈΡΡΠ΅ΠΌΡ
ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π³ΠΎΡΡΡ
ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π³ΠΎΡΡΡ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π±Π»ΠΎΠΊ ΡΠ΅ΠΊΡΡΠ° HTML ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ ΠΏΠ΅ΡΠ΅Π΄ Π΄ΡΡΠ³ΠΈΠΌ | ΠΠ°Π»ΡΠΉ Π±ΠΈΠ·Π½Π΅Ρ
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Div, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΊΠ°ΠΊ ΡΡΠ΅ΠΊΠ»ΡΠ½Π½ΡΠ΅ Π»ΠΈΡΡΡ, ΠΌΠΎΠ³ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ z-index ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΠΎΡΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ div ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΠ·ΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² div Π² ΡΡΠ΅ΠΊΠ΅. ΠΠΎΠΎΡΡΠΆΠΈΠ²ΡΠΈΡΡ ΡΡΠΈΠΌΠΈ Π·Π½Π°Π½ΠΈΡΠΌΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ div ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΊΡΡΠΎΠΌ Π² Π΄ΡΡΠ³ΠΎΠΌ div, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ z-index.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΠ΄ΠΈΠ½
ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΠ΅ΡΡΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ z-index div1 ΠΈ div2 Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ -1 Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ div1 ΠΈ 1 Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ div2, ΠΊΠΎΠ΄ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ div2 ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
div1 ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅.
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΡΠΈΠ½ΠΈΠΉ; }
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΆΠ΅Π»ΡΡΠΉ; }
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²Π΅ΡΡ
: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ»Π΅Π²Π°: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π·Π΅Π»Π΅Π½ΡΠΉ;
} Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ #div1 ΠΈ #div2 ΠΈΠΌΠ΅ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΡ
ΡΠ²Π»ΡΡΡΡΡ Β«Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌΠΈΒ». ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΡΠΈ Π΄Π²Π° div ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, Π²Π½ΡΡΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ div. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ #div1 ΠΈΠΌΠ΅Π΅Ρ Π°ΡΡΠΈΠ±ΡΡ background-color ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Β«ΠΠ΅Π»ΡΡΠΉΒ», Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° background-color ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° #div2 β Β«ΠΠ΅Π»Π΅Π½ΡΠΉΒ». ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ z-ΠΈΠ½Π΄Π΅ΠΊΡΠ° ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° #div2 ΡΠ°Π²Π½ΠΎ -1, ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π·Π° div2, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ z-index ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ #div2 ΡΠ°Π²Π½ΠΎ 1. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ z-ΠΈΠ½Π΄Π΅ΠΊΡΠ° Π²ΡΠ΅Π³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ -1 Π΄Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ div1 ΠΈ 1 Π΄Π»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ div2, ΠΊΠΎΠ΄ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ div2 ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
div1.