Css Π±Π»ΠΎΠΊ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½: javascript — Div Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½

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 Π°Π±ΠΎ число, якС ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΠΈΠΌΠ΅ Ρ€Ρ–Π²Π΅Π½ΡŒ Ρƒ ΠΏΠΎΡ‚ΠΎΡ†Ρ–.

Нотатка:

Ця Π²Π»Π°ΡΡ‚ΠΈΠ²Ρ–ΡΡ‚ΡŒ ΠΏΡ€Π°Ρ†ΡŽΡ” Ρ‚Ρ–Π»ΡŒΠΊΠΈ для Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ–Π², Ρƒ яких значСння полоТСння Π·Π°Π΄Π°Π½ΠΎ як absolute, relative Π°Π±ΠΎ fixed (position:absolute, position:relative, position:fixed).

Π—Π°ΠΏΡ€ΠΎΠΏΠΎΠ½ΡƒΠ²Π°Ρ‚ΠΈ свою ΠΏΠΎΡ€Π°Π΄Ρƒ Ρ‡ΠΈ Π½ΠΎΡ‚Π°Ρ‚ΠΊΡƒ

ΠŸΠΎΡ€Π°Π΄Π°ΠΠΎΡ‚Π°Ρ‚ΠΊΠ°

Бинтакс

z-index: auto|number|initial|inherit;

Π’Π»Π°ΡΡ‚ΠΈΠ²Ρ–ΡΡ‚ΡŒ z-index ΠΌΠΎΠΆΠ΅ ΠΎΡ‚Ρ€ΠΈΠΌΡƒΠ²Π°Ρ‚ΠΈ 4 значСння:

auto

Π’ΡΡ‚Π°Π½ΠΎΠ²Π»ΡŽΡ” порядок стСка Π΅ΠΊΠ²Ρ–Π²Π°Π»Π΅Π½Ρ‚Π½ΠΎ Π±Π°Ρ‚ΡŒΠΊΡ–Π²ΡΡŒΠΊΠΈΠΌ Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Π°ΠΌ. Π¦Π΅ Π±Π΅Π· задання

number

Π’ΡΡ‚Π°Π½ΠΎΠ²Π»ΡŽΡ” порядок стСка Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Π°. Π”ΠΎΠ·Π²ΠΎΠ»ΡΡ”Ρ‚ΡŒΡΡ використовувати Π²Ρ–Π΄’Ρ”ΠΌΠ½Ρ– значСння.

initial

Π’ΡΡ‚Π°Π½ΠΎΠ²Π»ΡŽΡ” Π²Π»Π°ΡΡ‚ΠΈΠ²Ρ–ΡΡ‚ΡŒ Ρƒ значСння Π±Π΅Π· задання

inherit

Π’ΠΊΠ°Π·ΡƒΡ” Π½Π° ΡΠΏΠ°Π΄ΠΊΠΎΠ²Ρ–ΡΡ‚ΡŒ властивості Π²Ρ–Π΄ свого Π±Π°Ρ‚ΡŒΠΊΡ–Π²ΡΡŒΠΊΠΎΠ³ΠΎ Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Π°

ЗначСння Π±Π΅Π· задання:auto
Наслідує:Ні
ΠΠ½Ρ–ΠΌΡƒΡ”Ρ‚ΡŒΡΡ:Π’Π°ΠΊ
JavaScript синтаксис:object.style.zIndex=»-1″

ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Π°Ρ‡Ρ–

  • Π‘Ρ‚Π°Ρ†Ρ–ΠΎΠ½Π°Ρ€Π½Ρ– пСрСглядачі
  • ΠœΠΎΠ±Ρ–Π»ΡŒΠ½Ρ– пСрСглядачі
ΠŸΠ΅Ρ€Π΅Π³Π»ΡΠ΄Π°Ρ‡
z-index

1. 0

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

ΠžΠ±Π·ΠΎΡ€.

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Β· Bootstrap. ВСрсия v4.6

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
. container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100%
720px
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 отобраТался ΠΏΠ΅Ρ€Π΅Π΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌ | ΠœΠ°Π»Ρ‹ΠΉ бизнСс

КСвин Π›ΠΈ

HTML-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ div ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ интСрСсныС ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты Π½Π° Π²Π΅Π±-страницы вашСго бизнСс-сайта. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Div, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΠΊΠ°ΠΊ стСклянныС листы, ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты HTML, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ тСкстовыС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹. Бвойство CSS с ΠΈΠΌΠ΅Π½Π΅ΠΌ z-index опрСдСляСт порядок, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ элСмСнты div ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. ИзмСняя свойство z-index элСмСнта div, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок элСмСнтов div Π² стСкС. Π’ΠΎΠΎΡ€ΡƒΠΆΠΈΠ²ΡˆΠΈΡΡŒ этими знаниями, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π² ΠΎΠ΄Π½ΠΎΠΌ div отобраТался ΠΏΠ΅Ρ€Π΅Π΄ тСкстом Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ div, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ z-index.

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ Π² Ρ€Π°Π·Π΄Π΅Π» Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

    Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΠ΄ΠΈΠ½

    < h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2

    Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ создаСт Π΄Π²Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° div со значСниями ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² div1 ΠΈ div2. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ div1 содСрТит Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Β«Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1Β». Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° гласил: Β«Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2Β». Π­Ρ‚ΠΈ Π΄Π²Π° элСмСнта div находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ элСмСнта div с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ main.

  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ послС ΠΊΠΎΠ΄Π°, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ шагС:

    Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ создаСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ JavaScript changeZindex. Π­Ρ‚Π° функция ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈ измСняСт значСния z-index div1 ΠΈ div2 Π½Π° значСния, ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ -1 Π² качСствС значСния div1 ΠΈ 1 Π² качСствС значСния div2, ΠΊΠΎΠ΄ заставляСт div2 ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… div1 ΠΏΡ€ΠΈ запускС.

  3. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ CSS Π² Ρ€Π°Π·Π΄Π΅Π» Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

    position:relative; z-индСкс: 1; высота: 400 пиксСлСй; ΡˆΠΈΡ€ΠΈΠ½Π°: 400 пиксСлСй;
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: синий; }

    позиция:Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ; z-индСкс: 1; высота: 80 пиксСлСй; ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
    позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ; }

    z-индСкс: -1;
    позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
    высота: 80 пиксСлСй; ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
    Π²Π΅Ρ€Ρ…: 20 пиксСлСй;
    слСва: 20 пиксСлСй;
    Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
    }

    Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ опрСдСляСт внСшний Π²ΠΈΠ΄, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ z-index для Ρ‚Ρ€Π΅Ρ… элСмСнтов div Π½Π° Π²Π΅Π±-страницС. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ #main создаСт большой синий Ρ„ΠΎΠ½, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π΄Π²Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнта div. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ #div1 ΠΈ #div2 ΠΈΠΌΠ΅ΡŽΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, значСния ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡΠ²Π»ΡΡŽΡ‚ΡΡ Β«Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌΠΈΒ». Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ эти Π΄Π²Π° div Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Π²Π½ΡƒΡ‚Ρ€ΠΈ основного div. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ #div1 ΠΈΠΌΠ΅Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ background-color со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Β«Π–Π΅Π»Ρ‚Ρ‹ΠΉΒ», Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° background-color сСлСктора #div2 β€” Β«Π—Π΅Π»Π΅Π½Ρ‹ΠΉΒ». ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ z-индСкса сСлСктора #div2 Ρ€Π°Π²Π½ΠΎ -1, ΠΎΠ½ находится Π·Π° div2, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ z-index ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ #div2 Ρ€Π°Π²Π½ΠΎ 1. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с Π±ΠΎΠ»Π΅Π΅ высокими значСниями z-индСкса всСгда ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтами с Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ значСниями.

  4. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠ΄ Π½ΠΈΠΆΠ΅ послС ΠΊΠΎΠ΄Π°, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² послСднСм шагС::

    Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ создаСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ JavaScript changeZindex. Π­Ρ‚Π° функция ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΈ измСняСт значСния z-index div1 ΠΈ div2 Π½Π° значСния, ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ -1 для значСния div1 ΠΈ 1 для значСния div2, ΠΊΠΎΠ΄ заставляСт div2 ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… div1.

  5. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈ просмотритС Π΅Π³ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ элСмСнт div1 с тСкстом Β«Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1Β» Π½Π°Π΄ Π·Π΅Π»Π΅Π½Ρ‹ΠΌ элСмСнтом div с тСкстом Β«Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2Β». НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ div2 появился ΠΏΠΎΠ²Π΅Ρ€Ρ… div1.

Бсылки

  • Π‘Π΅Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Mozilla: ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ стСкирования, ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 1
  • W3Schools.com: CSS Z-index Property

РСсурсы

  • Ti zag: Π£Ρ‡Π΅Π±Π½ΠΈΠΊ ΠΏΠΎ CSS — Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅
  • HTML Dog: HTML Intermediate Tutorial

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹

  • Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² div. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ background-color ΠΈΠ· ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ CSS, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ².
  • Π₯отя Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π² качСствС содСрТимого ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² div ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ любой Ρ‚ΠΈΠΏ тСкстового элСмСнта Π² div ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для ΠΈΡ… ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты Π»ΡŽΠ±Ρ‹Π΅ значСния CSS.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *