Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

background-attachment — CSS | MDN

Если ΡƒΠΊΠ°Π·Π°Π½ΠΎ background-image,Β CSS свойство background-attachment опрСдСляСт, являСтся Π»ΠΈ позиция этого изобраТСния фиксированной Π² области просмотра, ΠΈΠ»ΠΈ прокручиваСтся вмСстС с содСрТащим Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠΎΠΌ.


background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;


background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства background-attachment задаётся одним ΠΈΠ· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΠ· списка Π½ΠΈΠΆΠ΅.

ЗначСния

fixed
Π€ΠΎΠ½ фиксируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра. Π”Π°ΠΆΠ΅ Ссли элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ„ΠΎΠ½ Π½Π΅ пСрСмСщаСтся вмСстС с элСмСнтом.Β (Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ нСсовмСстимо с background-clip: text.)
local
Π€ΠΎΠ½ фиксируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΒ ΡΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ³ΠΎ элСмСнта. Если элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ„ΠΎΠ½ прокручиваСтся с содСрТимым элСмСнта, ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ рисования Ρ„ΠΎΠ½Π° ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ позиционирования Ρ„ΠΎΠ½Π° относятся ΠΊ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ области элСмСнта, Π° Π½Π΅ ΠΊ Π³Ρ€Π°Π½ΠΈΡ†Π΅, ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡŽΡ‰Π΅ΠΉ ΠΈΡ….
scroll
Π€ΠΎΠ½ фиксируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ самого элСмСнта ΠΈ Π½Π΅ прокручиваСтся с Π΅Π³ΠΎ содСрТимым. (Он фактичСски ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Ρ‘Π½ ΠΊ Π³Ρ€Π°Π½ΠΈΡ†Π΅ элСмСнта.)

Π€ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

HTML
<p>
  There were doors all round the hall, but they were all locked; and when
  Alice had been all the way down one side and up the other, trying every
  door, she walked sadly down the middle, wondering how she was ever to
  get out again.
</p>
CSS
p {
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
  background-attachment: fixed;
}
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π­Ρ‚ΠΎ свойство ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ нСсколько Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ <attachment> для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°, Ρ€Π°Π·Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… запятыми. КаТдоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ сопоставляСтся с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ Ρ‚ΠΈΠΏΠΎΠΌ влоТСния, ΠΎΡ‚ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π΄ΠΎ послСднСго.

HTML
<p>
  There were doors all round the hall, but they were all locked; and when
  Alice had been all the way down one side and up the other, trying every
  door, she walked sadly down the middle, wondering how she was ever to
  get out again.

  Suddenly she came upon a little three-legged table, all made of solid
  glass; there was nothing on it except a tiny golden key, and Alice's
  first thought was that it might belong to one of the doors of the hall;
  but, alas! either the locks were too large, or the key was too small,
  but at any rate it would not open any of them. However, on the second
  time round, she came upon a low curtain she had not noticed before, and
  behind it was a little door about fifteen inches high: she tried the
  little golden key in the lock, and to her great delight it fitted!
</p>
CSS
p {
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.7 ΠΈΠ»ΠΈ Ρ€Π°Π½Π΅Π΅)4.03.51.0
Multiple backgrounds1.03.6 (1.9.2)9.010.51.3
local4.0НСт9.010.55.0
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.11.0 (1.9.2)?10.03.2
Multiple backgrounds2.11.0 (1.9.2)?10.03.2
local?НСт???

background-attachment | CSS справочник

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

12.0+
4.0+
1.0+ 1.0+ 3.5+ 1.0+

ОписаниС

CSS свойство background-attachment устанавливаСт, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ вмСстС с содСрТимым элСмСнта.

ДопускаСтся ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ для ряда Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, пСрСчисляя ΠΈΡ… Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ. КаТдоС Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ примСняСтся ΠΊ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌΡƒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π² Ρ‚ΠΎΠΌ порядкС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½ Π² свойствС background-image.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: scroll
ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊ псСвдо-элСмСнтам ::first-letter ΠΈ ::first-line
АнимируСтся: Π½Π΅Ρ‚
НаслСдуСтся: Π½Π΅Ρ‚
ВСрсия: CSS1
Бинтаксис JavaScript: object.style.backgroundAttachment=»fixed»

Бинтаксис

background-attachment: scroll|fixed|local|inherit;

ЗначСния свойства

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ОписаниС
scroll Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксируСтся ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ самому элСмСнту ΠΈ Π½Π΅ прокручиваСтся вмСстС с Π΅Π³ΠΎ содСрТимым, Ρ‚.Π΅. Ссли элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ, Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ остаётся Π½Π° мСстС. Если страница ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ, Ρ‚ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прокручиваСтся вмСстС с элСмСнтом.
fixed Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксируСтся ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ области просмотра ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, поэтому Ρ„ΠΎΠ½ остаётся Π½Π΅ ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ содСрТимого страницы ΠΈ/ΠΈΠ»ΠΈ содСрТимого элСмСнта. ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: фиксированноС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ располагаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° области просмотра ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π° Π½Π΅ элСмСнта.
local Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксируСтся ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ содСрТимому элСмСнта, Ρ‚.Π΅. Ссли элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прокручиваСтся вмСстС с содСрТимым элСмСнта.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
  <style>
    body { height: 1000px; margin: 0; }
    div { width: 300px; height: 200px; margin-bottom: 10px; overflow: auto; }
    #scroll { background: #00ff00 url('cogs.png') no-repeat scroll; }
    #local { background: #00ff00 url('cogs.png') no-repeat local; }
    #fixed { background: #00ff00 url('cogs.png') no-repeat fixed; }
  </style>
</head>
<body>

  <div>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br></div>

  <div>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br></div>

  <div>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br></div>

</body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

фиксация Ρ„ΠΎΠ½Π° β€” ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ CSS

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ скроллитС Π²Π΅Π±-страницу с Ρ„ΠΎΠ½ΠΎΠΌ, Ρ„ΠΎΠ½ прокручиваСтся вмСстС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами. Иногда это умСстно, Π° ΠΈΠ½ΠΎΠ³Π΄Π° хочСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Ρ‡Π΅Ρ€Π΅Π· background-image, всСгда ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ Π½Π° Π²ΠΈΠ΄Ρƒ. Для управлСния этим состояниСм сущСствуСт свойство background-attachment.

ЗначСния background-attachment

Бвойство ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ значСния для настройки повСдСния Ρ„ΠΎΠ½Π°:

  • scroll (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) β€” Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ пСрСмСщаСтся вмСстС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами ΠΏΡ€ΠΈ скроллС Π²Π΅Π±-страницы.
  • fixed β€” Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ фиксируСт Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, дСлая Π΅Π³ΠΎ Π½Π΅Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΊ скроллу. ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠΈ страницы Ρ„ΠΎΠ½ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ останСтся Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Ρ‹ΠΌ.
  • local β€” Π΄Π°Π½Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π² случаС с Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ скроллом Ρ„ΠΎΠ½ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ scroll Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΊΠ°ΠΊ fixed. ΠŸΡ€ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ local Ρ„ΠΎΠ½ прокручиваСтся вмСстС с содСрТимым элСмСнта, ΠΈ Π½Π΅ прокручиваСтся, Ссли содСрТимоС Π½Π΅ скроллится (Π½ΠΎ прокручиваСтся вмСстС с самим элСмСнтом).

Для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ понимания Ρ€Π°Π±ΠΎΡ‚Ρ‹ свойства взглянитС Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡ… ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ, ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ всС Ρ‚Ρ€ΠΈ значСния background-attachment (надССмся, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ CSS Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ соврСмСнным дСсктопным Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ!).

background-attachment: scroll

background-attachment: fixed

background-attachment: local

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° всСх Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства background-attachment Π΅ΡΡ‚ΡŒ Ρƒ дСсктопных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² IE9+, Edge 12+, Firefox 25+, Chrome (всС вСрсии), Safari 5+, Opera 11.5+. Из ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² всС значСния ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ Opera Mobile, Firefox для Android, IE Mobile ΠΈ QQ Browser. Π’ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π»ΠΈΠ±ΠΎ частичная, Π»ΠΈΠ±ΠΎ отсутствуСт.


Π”Π°Π»Π΅Π΅ Π² ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ΅: свойства background-origin ΠΈ background-clip для позиционирования Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ управлСния ΠΎΠ±Ρ€Π΅Π·ΠΊΠΎΠΉ.

10 фиксированных Ρ„ΠΎΠ½ΠΎΠ² CSS

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ фиксированных Ρ„ΠΎΠ½ΠΎΠ² HTML ΠΈ CSS ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π°.

  1. CSS АнимированныС Ρ„ΠΎΠ½Ρ‹
  2. CSS-Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΡƒΠ·ΠΎΡ€Ρ‹
  3. CSS-Ρ„ΠΎΠ½Ρ‹ частиц
  4. CSS Π’Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΎΠ½Ρ‹
  5. ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ Ρ„ΠΎΠ½Π° jQuery
О кодС

ЀиксированноС ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°

Ѐиксированный Ρ„ΠΎΠ½ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ содСрТимого.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

background-attachment: исправлСно;

Π€ΠΎΠ½ с CSS-свойствами. Π’Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°: исправлСно;

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • ΠΊΠΎΠ²Ρ€Ρ‹ Π½ΡƒΠΌΠΈΠ΄ΠΈΡƒΠΌ
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π½Π° чистом CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Али Кляйн
О кодС

ЀиксированноС ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°

Π’Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° Π½Π° чистом CSS исправлСно Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • Π”ΠΆΠ΅Ρ„Ρ„ Грэм
О кодС

Π€ΠΎΠ½ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π² CSS

ПоСздка Π² Биэтл: ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Ρ„ΠΎΠ½ΠΎΠ² Π² CSS с привязкой Ρ„ΠΎΠ½Π° : исправлСно;

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • ДТастин АвСн
О кодС

Ѐиксированный Ρ„ΠΎΠ½, ΠΏΠΎΠ»Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ полноэкранныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² с фиксированными Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями / Π±Π΅Π· ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • codyhouse.co
О кодС

Ѐиксированный Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ эффСкт

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ шаблон, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ свойство CSS background-attachment для создания фиксированного Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ эффСкта.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: jquery.js

О кодС

Магия ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½Π° простом CSS

Если колСсо ΠΌΡ‹ΡˆΠΈ Π²Π½ΠΈΠ· … ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ Π²ΠΏΡ€Π°Π²ΠΎ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π”ΠΆΠΎΡˆΡƒΠ° ΠœΠΈΡ‚Ρ‡Π΅Π»Π»
О кодС

Π Π΅Ρ‚Ρ€ΠΎ слайд-ΡˆΠΎΡƒ CSS

CSS-слайд-ΡˆΠΎΡƒ с ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ Ρ„ΠΎΠ½Π° : исправлСно;

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π”Π΅Ρ€Π΅ΠΊ Палладино
О кодС

КниТка-ΠΊΠ½ΠΈΠΆΠΊΠ° со ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ

ИспользованиС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ фиксированноС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для создания эффСкта ΠΊΠ½ΠΈΠΆΠΊΠΈ-ΠΊΠ½ΠΈΠΆΠΊΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

CSS2 — ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту

CSS2 — ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту

Ρ„ΠΎΠ½-ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту

background-attachment трСбуСтся Ρ‚Ρ€ΠΈ значСния, Π½ΠΎ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π°.

БпСцификация

W3C Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚:

‘background-attachment’
Если Π·Π°Π΄Π°Π½ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, это свойство ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, являСтся Π»ΠΈ ΠΎΠ½ΠΎ фиксированным ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра («фиксированный») ΠΈΠ»ΠΈ прокручиваСтся вмСстС с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ (Β«ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°Β»).
Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: свиток

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прокручиваСтся вмСстС с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ . ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° div Π½Π΅ прокручиваСтся Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ΅Π³ΠΎ div с ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ : auto Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

scroll Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚: ΠΏΡƒΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прокручиваСтся вмСстС с элСмСнтом. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ мСстноС ЯвляСтся Π»ΠΈ это. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΏΡ€ΠΎΠ²ΠΎΠ΄Π½ΠΈΠΊ Windows ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ scroll ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠΉ.

Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅: фиксированноС

Для элСмСнтов, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΡ‚ Ρ‚Π΅Π»Π°, это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ соотвСтствуСт оТиданиям.Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ фиксируСтся Π½Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ элСмСнта, Π° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ всСго ΠΎΠΊΠ½Π° . Для нСпосвящСнных эффСкт ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ довольно ΠΏΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

Π›ΡƒΡ‡ΡˆΠ΅ всСго Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ элСмСнт ΠΊΠ°ΠΊ своСго Ρ€ΠΎΠ΄Π° Β«ΠΎΠΊΠ½ΠΎΒ», Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ просматриваСтС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Если это «ΠΎΠΊΠ½ΠΎ» двиТСтся, Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π΄Ρ€ΡƒΠ³ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΌΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠ°.

Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: мСстноС

Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ CSS3 Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ вмСстС с элСмСнтом.Π’ настоящСС врСмя Π½ΠΈ ΠΎΠ΄ΠΈΠ½ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ. я надСюсь, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° скоро ΠΏΡ€ΠΈΠ΄Π΅Ρ‚; Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ

мСстный

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ с элСмСнтом.
ВСстовая страница
АлтСр Ρ€ΠΎΠ΄Π½ΠΎΠΉ β„– β„– β„– β„– β„– АлтСр Ρ€ΠΎΠ΄Π½ΠΎΠΉ
Если Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ local , ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ свиток .Π›ΡŽΠ±ΠΎΠΏΡ‹Ρ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ scroll ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π² IE ΠΈ Konqueror, эти Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ случайно оказались СдинствСнными, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈ local , хотя ΠΏΠΎ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ.

свиток

ЀиксированноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ элСмСнта; прокручиваСтся с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ
ВСстовая страница
мСстный Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ мСстный

фиксированная

ЀиксированноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π°; Π½Π΅ прокручиваСтся
ВСкстовая страница
свиток Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ β„– Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ Π•ΡΡ‚ΡŒ

Какого Ρ…Ρ€Π΅Π½Π° фоновая ΠΏΡ€ΠΈΠ²ΡΠ·Π°Π½Π½ΠΎΡΡ‚ΡŒ локальная

НСдавно я наткнулся Π½Π° background-attachment: local ΠΈΠ·-Π·Π° этого супСр-ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ‚Ρ€ΡŽΠΊΠ° Π² Smashing Magazine, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСт Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ стола … Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½Π°.Π­Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ, Π½ΠΎ хотя я Π·Π½Π°Π» ΠΎ scroll ΠΈ с фиксированными значСниями для background-attachment , я Π½ΠΈΠΊΠΎΠ³Π΄Π° Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π» ΠΎ local .

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ local , Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ сначала Π΄Π΅Π»Π°ΡŽΡ‚ scroll ΠΈ fixed , Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ быстроС руководство ΠΏΠΎ Π½ΠΈΠΌ:

  • scroll ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — Ρ„ΠΎΠ½ прокручиваСтся вмСстС со страницСй, ΠΊΠ°ΠΊ ΠΈ слСдовало ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ.
  • fixed позволяСт Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° мСстС Π²ΠΎ врСмя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы.Π­Ρ‚ΠΎ ΠΊΠ°ΠΊ Π±Ρ‹ Π΄Π°Π΅Ρ‚ эффСкт Ρ‚ΠΈΠΏΠ° параллакса.

Однако Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с scroll , ΠΈ это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ, Ссли этот ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Если это Ρ‚Π°ΠΊ, Π½Π° самом Π΄Π΅Π»Π΅ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ‚ сСбя ΠΊΠ°ΠΊ фиксированный . Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ я имСю Π² Π²ΠΈΠ΄Ρƒ.

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ background-attachment: scroll — Ρ‡Ρ‚ΠΎ Π·Π° Ρ„ΠΈΠ³ ?! Автор: КСвин (@kevinpowell) Π½Π° CodePen.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы Ρ„ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ, Π½ΠΎ Ссли Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ самого элСмСнта, ΠΎΠ½ дСйствуСт ΠΊΠ°ΠΊ фиксированный Ρ„ΠΎΠ½ . Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ элСмСнта с background-attachement: scroll прокручиваСтся с Π΅Π³ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ . Когда прокручиваСтся вся страница, Ρ„ΠΎΠ½ пСрСмСщаСтся вмСстС с Π½Π΅ΠΉ, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ этого элСмСнта, Π³Ρ€Π°Π½ΠΈΡ†Π° этого элСмСнта Π½Π΅ пСрСмСщаСтся, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ„ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ пСрСмСщаСтся.

мСстный Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ

Π­Ρ‚ΠΎ Ρ‚ΠΎ, для Ρ‡Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ local . Он фиксируСт Ρ„ΠΎΠ½ содСрТимого вмСсто Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта.НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ всСх Ρ‚Ρ€Π΅Ρ…. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ страницу, ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈ послСдний элСмСнты ( scroll ΠΈ local соотвСтствСнно) Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ … Π½ΠΎ Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта. Π’ΠΎΡ‚, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ , вСроятно, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ искали Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ.

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ background-attachment: мСстноС ΠΎΡ‚ КСвина (@kevinpowell) Π½Π° CodePen.

Π― счастлив, Ρ‡Ρ‚ΠΎ ΡƒΠ·Π½Π°Π» ΠΎΠ± этом Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ столкнулся с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это ΠΎΠ΄Π½Π° ΠΈΠ· Ρ‚Π΅Ρ… ΠΏΡ€ΠΈΡ‡ΡƒΠ΄ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΏΡ€ΠΎΠ²ΠΎΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ вас, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ Π²Π΅Π΄Π΅Ρ‚ сСбя Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚Π΅.

ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ ΠœΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°ΡΡΡ‹Π»Π°Ρ‚ΡŒ Π²Π°ΠΌ спам. ΠžΡ‚ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π² любой врСмя.

10 Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² CSS ΠΈ JavaScript для создания эффСкта ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ параллакса

Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅Π΄ΠΎΡ€Π°Π·ΡƒΠΌΠ΅Π½ΠΈΠΉ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° параллакса ΠΈ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Π’ΠΎΠΎΠ±Ρ‰Π΅ говоря, Π΄ΠΈΠ·Π°ΠΉΠ½ с параллаксом — это использованиС двиТСния для создания иллюзии Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ Π½Π° страницС.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚ΡŒΡΡ ΠΊ измСнСниям Ρ„ΠΎΠ½Π° ΠΈΠ»ΠΈ элСмСнтам полуфиксированного полоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ вмСстС с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.ΠœΡ‹ рассмотрСли мноТСство ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² с Π²Π΅Π±-сайтов, Π½ΠΎ Π½Π΅ вдавались Π² подробности ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ².

Для этой ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ я Π²Ρ‹Π±Ρ€Π°Π» свои Π»ΡŽΠ±ΠΈΠΌΡ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ с параллаксом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ бСсплатный исходный ΠΊΠΎΠ΄, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ ΠΈ Π΄Π°ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² свои собствСнныС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹.

ПанСль инструмСнтов Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°

НСограничСнноС количСство скачиваний: Π±ΠΎΠ»Π΅Π΅ 1 000 000 Π²Π΅Π±-шаблонов, Ρ‚Π΅ΠΌ, ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², рСсурсов Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅!

1. Π’Π΅Π»ΠΈΠΊΠΎΠ΅ ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅

The Great Fall, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ CJ Gammon, — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… интСрфСйсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ встрСчал.

Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ сцСнарий для создания спрайта Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, каТСтся, бСсконСчно Ρ‚Π΅Ρ‡Π΅Ρ‚ Π²Π½ΠΈΠ· ΠΏΠΎ страницС. Он построСн Π½Π° элСмСнтах холста, управляСмых с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript, поэтому ΠΈΠΌΠ΅Π΅Ρ‚ довольно Ρ‚Π΅Ρ…Π½ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ настройку.

НС говоря ΡƒΠΆΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π° страницС Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ нСбольшиС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π° с полями с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Π­Ρ‚ΠΎΡ‚ эффСкт Π±Π΅Π·ΡƒΠΌΠ½ΠΎ ΠΊΡ€ΡƒΡ‚ΠΎΠΉ, ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ воспроизвСсти, обладая ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ знаниями JavaScript.

Но ΠΏΠΎ большСй части это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅Ρ‚Π΅Π»ΡŒΡΡ‚Π²ΠΎ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² соврСмСнной Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅.Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ элСмСнта холста Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ вашим Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

2. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ CSS

Π’ΠΎΡ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ‹ΠΉ эффСкт параллакса с фиксированным Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ большими страницами Π²Π²Π΅Ρ€Ρ…Ρƒ.

ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» страницы появляСтся Β«Π½Π°Π΄Β» Ρ„ΠΎΠ½ΠΎΠΌ. Π­Ρ‚ΠΎ создаСт иллюзию Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ ΠΈ являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… элСмСнтов Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° с параллаксом.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π‘Π΅Π±Π°ΡΡ‚ΡŒΡΠ½ ШСпис использовал чистый CSS для этой страницы, ΠΈ это довольно простая концСпция.Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ любой ΠΌΠΎΠ³ Π±Ρ‹ Π»Π΅Π³ΠΊΠΎ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это, Π½Π΅ говоря ΡƒΠΆΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ„ΠΎΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ.

3. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ Ρ‚Π΅Π³Π° простого изобраТСния

Часто ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ с параллаксом Π² сочСтании с большими полноэкранными Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями. ВсС ΠΎΠ½ΠΈ слишком распространСны Π½Π° сайтах ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈ стартапах, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Β«ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈΒ» параллакса для Ρ„ΠΎΠ½Π°.

Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π Π΅Π½Π°Π½ Π‘Ρ€Π΅Π½ΠΎ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ» Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ скорости ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ сильно Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Π Π°Π·Π½ΠΈΡ†Π° здСсь Π½Π΅ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ, насколько быстро Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ страницу ΠΈΠ»ΠΈ насколько Π²Π΅Π»ΠΈΠΊΠΎ мСсто размСщСния изобраТСния. Π‘ΠΊΠΎΡ€Π΅Π΅ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ быстро ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ пСрСмСщаСтся Ρ‡Π΅Ρ€Π΅Π· Ρ„ΠΎΠ½ страницы Π²ΠΎ врСмя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Ρ‚ΠΎΠ½ΠΊΠΈΠΉ эффСкт параллакса, Π½ΠΎ этот ΠΌΠ°ΠΊΠ΅Ρ‚ являСтся ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ шаблоном, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ скорости Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² дСйствии.

4. #Maincode Hackdays

ЀиксированныС Ρ„ΠΎΠ½Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят для раздСлСния страниц ΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ раздСлСния содСрТимого. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ прСкрасный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² этой Ρ€ΡƒΡ‡ΠΊΠ΅, созданной для мСроприятия Hackdays.

ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ страницы Β«Π²Ρ‹ΡˆΠ΅Β» Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ВсС это сдСлано для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΄ΠΎΡ…Π½ΡƒΡ‚ΡŒ Тизнь Π² эффСкт параллакса ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅.

Π― Π±Ρ‹ Π½Π΅ стал ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ области содСрТимого каТутся Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚ΠΎΠ½ΠΊΠΈΠΌΠΈ. Но Ссли Π²Π°ΠΌ нравится этот ΡΡ‚ΠΈΠ»ΡŒ, я Π±Ρ‹ ΠΏΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΠΆΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» страницы Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΌ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ сайту.

5. CSS Parallax

Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€ΠΎ с параллаксом, созданноС ΠŸΠ°ΡƒΠ»ΠΎ ΠšΡƒΠ½ΡŒΡ, являСтся ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ эффСкты параллакса.

ВсС содСрТимоС страницы находится ΠΏΠΎΠ΄ большим ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ гСроя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ исчСзаСт ΠΏΠΎΠ΄ содСрТимым ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅. ΠŸΡ€ΠΈ этом Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ фиксированноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ выглядСло Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ страница пСрСмСщаСтся Π½Π° ΠΏΠΎΠ²Π΅Ρ€Ρ… изобраТСния, Π° Π½Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ остаСтся Π½Π° мСстС.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ эффСкт с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ с Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, ΠΈ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ это Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… сообщСний Π² Π±Π»ΠΎΠ³Π°Ρ… с большими ΠΈΠ·Π±Ρ€Π°Π½Π½Ρ‹ΠΌΠΈ изобраТСниями ΠΈΠ»ΠΈ для Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… страниц, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ большиС Π³Π΅Ρ€ΠΎΠΈ для привлСчСния внимания.

6. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ Π΄ΠΈΠ·Π°ΠΉΠ½

Π’ΠΎΡ‚ интСрСсный параллакс-Π΄ΠΈΠ·Π°ΠΉΠ½ для ΠΎΠ±Ρ€Π°Π·Ρ†Π° свадСбной страницы, созданный ΠšΡΡ‚ΠΈ РодТСрс.

Он ΠΈΠΌΠ΅Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ страницы, Π³Π΄Π΅ изобраТСния Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… областСй содСрТимого с фиксированным параллаксом ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. ВсС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° CSS, Ρ‡Ρ‚ΠΎ приятно, ΠΈ всС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ страницС.

Π­Ρ‚ΠΎΡ‚ эффСкт Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ области содСрТимого ΠΈΠΌΠ΅ΡŽΡ‚ большиС Ρ‚Π΅Π½ΠΈ, ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ Π½Π° Ρ„ΠΎΠ½. ЕстСствСнно, это создаСт иллюзию Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ , давая страницС тСорСтичСский источник свСта ΠΈ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ.ΠžΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ идСя для одностраничного ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

7. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

Π Π°Π½Π΅Π΅ я ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π», ΠΊΠ°ΠΊ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ скорости измСнСния полоТСния Ρ„ΠΎΠ½Π°.

Π§Ρ‚ΠΎ ΠΆ, этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ Π ΠΈΡ‡Π΅ΠΌ Π₯ауэллом, являСтся прСкрасным сравнСниСм, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² дСйствии.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ для этого ΠΏΠ΅Ρ€Π°, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкты. Π― ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ колСсика ΠΌΡ‹ΡˆΠΈ ΠΈ Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ» Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ скорости Π² столбцах.

Ни ΠΎΠ΄Π½Π° ΠΈΠ· этих скоростСй Π½Π΅ являСтся Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π½Π΅Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ параллакса. Π­Ρ‚ΠΎ просто Ρ€Π°Π·Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ создания двиТСния Π½Π° страницС, ΠΈ это малСнькоС ΠΏΠ΅Ρ€ΠΎ — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ мноТСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ².

8. Π—Π²Π΅Π·Π΄Π½Ρ‹ΠΉ Ρ„ΠΎΠ½

Π₯отя этот эффСкт Π½Π΅ относится ΠΊ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅, ΠΎΠ½ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ связан с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ параллакса. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ чистый CSS для создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π²Π΅Π·Π΄Ρ‹ параллакса Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ страницы. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого ΠΏΠΎΠ²Π΅Ρ€Ρ… страницы, Π½ΠΎ Π·Π²Π΅Π·Π΄Ρ‹ сразу ΠΆΠ΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда.

ВсС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ проходят Ρ‡Π΅Ρ€Π΅Π· CSS, Π½ΠΎ это ΠΏΠ΅Ρ€ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Sass ΠΈ Compass, поэтому ΠΈΡ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния.

Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ / Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ это Π² свой ΠΌΠ°ΠΊΠ΅Ρ‚, Π½Π΅ внося слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. CodePen позволяСт ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Sass Π² CSS ΠΎΠ΄Π½ΠΈΠΌ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ, поэтому ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ исходный ΠΊΠΎΠ΄ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ составит Ρ‚Ρ€ΡƒΠ΄Π°.

9. Π₯олст Parallax Skyline

Иногда Π΄ΠΈΠ·Π°ΠΉΠ½ с параллаксом Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Ρ†Π΅Π»Π΅Π½ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ вмСстС с функциями ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.Π­Ρ‚ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ холста создаСт эффСкт бСсконСчной Π»ΠΈΠ½ΠΈΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ страницС.

ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ ΡƒΠ³ΠΎΠ» ΠΎΠ±Π·ΠΎΡ€Π° измСняСтся. Но анимация остаСтся ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΉ, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ эта линия Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π° двиТСтся с Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠ΅ΠΉ.

ЕстСствСнно, это Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ JavaScript для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это довольно слоТная идСя. Но это Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π΅Π±-сайтах, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ это Ρ‚ΠΎΠΆΠ΅ Π½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ скопируСтС Π½Π° свой сайт. Но ΠΊΠ°ΠΊ концСпция параллакса это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ интСрСсно.

10. ΠŸΠ°Ρ€Π°Π»Π»Π°ΠΊΡ навСдСния

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ эффСкт параллакса, Π½Π°Ρ†Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π½Π° ΠΌΡ‹ΡˆΡŒ, — это Π΄ΠΈΠ·Π°ΠΉΠ½, созданный Π’ΡƒΠ»ΠΈΠΎ Π€ΠΈΠ»ΠΈΠΏΠ΅. Он Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю страницу, поэтому Ρƒ Π½Π΅Π³ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ другая концСпция параллакса.

ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ содСрТимого, ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ изобраТСния.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈΠΌΠ΅Π΅Ρ‚ свой собствСнный «слой» Π² HTML. Когда Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎ этому ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ, каТСтся, Ρ‡Ρ‚ΠΎ ΠΎΠ΄Π½ΠΈ изобраТСния ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ….

ВсС это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‡Π΅Ρ€Π΅Π· JavaScript, ΠΈ это довольно ΠΊΡ€ΡƒΡ‚ΠΎΠΉ эффСкт для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π±Π°Π½Π½Π΅Ρ€Π° ΠΈΠ»ΠΈ Π² собствСнном Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ страницы.

11. Π€ΠΈΠ»ΡŒΡ‚Ρ€ Ρ€Π°Π·Π±ΠΈΡ‚ΠΎΠ³ΠΎ стСкла

Π― Π²ΠΈΠ΄Π΅Π» этот эффСкт Π½Π° Π²Π΅Π±-сайтах Ρ€Π°Π½ΡŒΡˆΠ΅, ΠΈ ΠΎΠ½ создаСт ΠΎΡ‡Π΅Π½ΡŒ своСобразный Π΄ΠΈΠ·Π°ΠΉΠ½. Π€ΠΈΠ»ΡŒΡ‚Ρ€ с Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ΠΌ стСклом создаСт иллюзию Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΎ Π½Π° мноТСство частСй. Π­Ρ‚ΠΎ ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π½Π° стСклС, ΠΈ ΠΎΠ½ΠΎ Ρ€Π°Π·Π±ΠΈΠ»ΠΎΡΡŒ, расколов ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ искривив ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ воспроизвСсти этот эффСкт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ чистого CSS, ΠΈ это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Ρ… изящных эффСктов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ классно Π΄Π΅Π»Π°Ρ‚ΡŒ, Π½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ практичСского примСнСния Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΌΠΈΡ€Π΅, ΠΊΡ€ΠΎΠΌΠ΅ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, это Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ параллакса ΠΈ двиТСния ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅.

Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΈ фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Β· Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ WebPlatform

РСзюмС

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ рассматриваСтся Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΈ фиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠΎΡ€Π° ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ вашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π²Ρ‚ΠΎΡ€ΡƒΡŽ ΠΏΠ°Ρ€Ρƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства position absolute ΠΈ fixed .ΠŸΠ΅Ρ€Π²Π°Ρ ΠΏΠ°Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ — статичСский ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ — тСсно связаны, ΠΈ ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрСли ΠΈΡ… Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅.

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ΄Π°Π»ΡΡŽΡ‚ΡΡ ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΠΈΡ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт ΠΈΠ»ΠΈ Π½Π° элСмСнты, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π° Π½ΠΈΠΌΠΈ Π² исходном ΠΊΠΎΠ΄Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ссли Π²Ρ‹ Π½Π΅ ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠΌΠ΅Ρ‚Π΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… дСйствий ΠΏΠΎ Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΡŽ. Иногда, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, это совпадСниС — ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Π½ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ ΠΎΠ± этом, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚!

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ — это просто спСциализированная Ρ„ΠΎΡ€ΠΌΠ° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования; элСмСнты с фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Ρ„ΠΈΠΊΡΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° просмотра / Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π° Π½Π΅ содСрТащСго элСмСнта; Π΄Π°ΠΆΠ΅ Ссли страница прокручиваСтся, ΠΎΠ½ΠΈ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим нСсколько практичСских ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² использования позиционирования absolute ΠΈ fixed , рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ особСнности ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ исслСдуСм ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ z-index.

Но ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ всС это, Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π²Π°ΠΆΠ½ΡƒΡŽ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ — содСрТаниС Π±Π»ΠΎΠΊΠΎΠ².

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ

Π’Π°ΠΆΠ½Ρ‹ΠΌ понятиСм, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования, являСтся содСрТащий Π±Π»ΠΎΠΊ: Π±Π»ΠΎΠΊ Π±Π»ΠΎΠΊΠ°, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ располоТСны ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.Для статичСских Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Π±Π»ΠΎΠΊΠΎΠ², располоТСнных ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, содСрТащий Π±Π»ΠΎΠΊ являСтся блиТайшим ΠΏΡ€Π΅Π΄ΠΊΠΎΠΌ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ°, Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ элСмСнтом. Однако для Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов всС Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС. Π’ этом случаС содСрТащий Π±Π»ΠΎΠΊ — это блиТайший -ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΏΡ€Π΅Π΄ΠΎΠΊ . Под Β«ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΒ» ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅ΠΌ элСмСнт, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ свойство position установлСно Π½Π° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ , absolute ΠΈΠ»ΠΈ fixed — Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, всС, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… статичСских элСмСнтов.

Π˜Ρ‚Π°ΠΊ, установив position: relative для элСмСнта, Π²Ρ‹ сдСлаСтС Π΅Π³ΠΎ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ для любого Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ° (Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов), нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π»ΠΈ ΠΎΠ½ΠΈ сразу ΠΏΠΎΠ΄ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ элСмСнтом Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ.

Если Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ°, Ρ‚ΠΎ содСрТащий Π±Π»ΠΎΠΊ — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ называСтся Β«Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌΒ», Ρ‡Ρ‚ΠΎ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ приравниваСтся ΠΊ элСмСнту html .Если Π²Ρ‹ смотритС Π½Π° Π²Π΅Π±-страницу Π½Π° экранС, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°; Ссли Π²Ρ‹ ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π΅Ρ‚Π΅ страницу, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ страницы.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ этого — ΠΎΠ½ΠΈ всСгда ΠΈΠΌΠ΅ΡŽΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ содСрТащий Π±Π»ΠΎΠΊ Π² качСствС содСрТащСго ΠΈΡ… Π±Π»ΠΎΠΊΠ°.

Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ суммируСм это Π² Π²ΠΈΠ΄Π΅ Π½Π°Π±ΠΎΡ€Π° простых шагов — Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ содСрТащий Π±Π»ΠΎΠΊ для элСмСнта с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ : Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ , это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

  1. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта — ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΈ свойство position этого элСмСнта ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ , Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ фиксированного ?
  2. Если Π΄Π°, Ρ‚ΠΎ Π²Ρ‹ нашли содСрТащий Π±Π»ΠΎΠΊ.
  3. Если Π½Π΅Ρ‚, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚Π΅, начиная с шага 1, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ содСрТащий Π±Π»ΠΎΠΊ ΠΈΠ»ΠΈ Π½Π΅ исчСрпаСтС ΠΏΡ€Π΅Π΄ΠΊΠΎΠ².
  4. Если Π²Ρ‹ достигли элСмСнта html , Π½Π΅ найдя ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ°, Ρ‚ΠΎ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ являСтся элСмСнт html .

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ — это особая Ρ„ΠΎΡ€ΠΌΠ° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования, поэтому ΠΌΡ‹ ΠΈΠ·ΡƒΡ‡ΠΈΠΌ это ΠΏΠΎΠ·ΠΆΠ΅ ΠΈ сконцСнтрируСмся здСсь Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±Ρ‰Π΅ΠΌ случаС. Если Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠΎΠ³Π΄Π° я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Β«Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉΒ» с этого ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° ΠΈ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° ΡΡ‚Π°Ρ‚ΡŒΠΈ, я Π±ΡƒΠ΄Ρƒ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° ΠΎΠ±Π° элСмСнта с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : фиксированноС , ΠΈ элСмСнты с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ .

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ свойства Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ , ΠΏΡ€Π°Π²Ρ‹ΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΉ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для опрСдСлСния полоТСния поля. Π’Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ‚Π΅ ΠΆΠ΅ свойства, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π½ΠΎ способ ΠΈΡ… использования ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

Для ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ свойства ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ расстояниС для смСщСния созданного Π±Π»ΠΎΠΊΠ°.ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² случаС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования ΠΎΠ½ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ top: 1em ΠΈ bottom: -1em ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅, ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ смысла ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ top ΠΈ bottom (ΠΈΠ»ΠΈ left ΠΈ справа ) для Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ элСмСнта, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ.

Π­Ρ‚ΠΈ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π΅Π²Π΅Ρ€Π½Ρ‹ Π² случаС Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования. Π—Π΄Π΅ΡΡŒ всС Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ свойства ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ расстояниС ΠΎΡ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ края ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта Π΄ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°.Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΡƒΠ³Π»ΠΎΠ² Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° — скаТСм, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΉ — Π° Π·Π°Ρ‚Π΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту (ΠΈΠ»ΠΈ просто Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота , Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Ρ‹Π» ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½ Π² Ρ‚Π΅Ρ€ΠΌΠΎΡƒΡΠ°Π΄ΠΎΡ‡Π½ΡƒΡŽ ΠΏΠ»Π΅Π½ΠΊΡƒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ содСрТимого)

Microsoft Internet Explorer вСрсии 6 ΠΈ ΡΡ‚Π°Ρ€ΡˆΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ указания всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΠΊΡ€Π°Π΅Π², Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ указания ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° плюс Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

  / * Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² IE6 * /
#foo {
  позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
  Π²Π΅Ρ€Ρ…: 3em;
  слСва: 0;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 30em;
  высота: 20em;
}

/ * Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² IE6 * /
#foo {
  позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
  Π²Π΅Ρ€Ρ…: 3em;
  справа: 0;
  Π²Π½ΠΈΠ·Ρƒ: 3em;
  слСва: 0;
}
  

Π—Π΄Π΅ΡΡŒ слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ значСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ устанавливаСтС для свойств top , right , bottom ΠΈ left , ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ расстояния ΠΎΡ‚ ΠΊΡ€Π°Π΅Π² элСмСнта Π΄ΠΎ ΠΈΡ… , ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… , содСрТащих края Π±Π»ΠΎΠΊΠ°.Π­Ρ‚ΠΎ Π½Π΅ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° систСму ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ относится ΠΊ ΠΎΠ΄Π½ΠΎΠΉ исходной Ρ‚ΠΎΡ‡ΠΊΠ΅. НапримСр, right: 2em ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π½Π° 2em ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края содСрТащСго Π±Π»ΠΎΠΊΠ°.

Когда Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ Ρƒ вас содСрТащий Π±Π»ΠΎΠΊ. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ установка position: relative Π² содСрТащСм Π±Π»ΠΎΠΊΠ΅ Ρ‚Π°ΠΊ ΠΏΠΎΠ»Π΅Π·Π½Π°, Π΄Π°ΠΆΠ΅ Ссли Π²Ρ‹ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ мСняСтС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ поля.Он позволяСт Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ элСмСнт содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ для Π΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ² — это Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

  1. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ Π² тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΈ сохранитС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΊΠ°ΠΊ absolute.html.

      
     
       
         
          ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ 
         
       
       
         
  2. Π—Π°Ρ‚Π΅ΠΌ скопируйтС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ Π² Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΈ сохранитС Π΅Π³ΠΎ ΠΊΠ°ΠΊ absolute.css.

      html, body {
       ΠΌΠ°Ρ€ΠΆΠ°: 0;
       отступ: 0;
     }
    
     #outer {
       ΠΌΠ°Ρ€ΠΆΠ°: 5em;
       Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # f00;
     }
    
     #Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 6em;
       высота: 4em;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 999;
     }
      
  3. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΎΠ±Π° Ρ„Π°ΠΉΠ»Π° ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€.Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ сСрый ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΠΎΠΊΡ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ нСсколько Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎΠΉ красной Ρ€Π°ΠΌΠΊΠΎΠΉ.

    Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ #inner ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π΄Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту, Π° Ρ‚Π°ΠΊΠΆΠ΅ сСрый Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ #outer , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся структурным Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ элСмСнтом #inner , ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΡ€Π°ΡΠ½ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ»Π΅ 5em ΠΏΠΎ ΠΏΠ΅Ρ€ΠΈΠΌΠ΅Ρ‚Ρ€Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ ΠΊΡ€Π°Π΅Π² ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π½Π°ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит. Пока Π½ΠΈΡ‡Π΅Π³ΠΎ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ, ΠΏΡ€Π°Π²Π΄Π°? Высота элСмСнта #outer задаСтся Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΌ элСмСнтом ( #inner ), Π° ΡˆΠΈΡ€ΠΈΠ½Π° — Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ полями.

  4. Π’Π΅ΠΏΠ΅Ρ€ΡŒ посмотритС, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹ сдСлаСтС #inner Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ! Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ объявлСниС ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ #inner :

      #inner {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 6em;
       высота: 4em;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 999;
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
     }
      
  5. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ. ВмСсто красной Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π²ΠΎΠΊΡ€ΡƒΠ³ сСрого ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ толстая вСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π°. А сСрая ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ° Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ двигалась! Π’Ρ‹ этого ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ?

Π—Π΄Π΅ΡΡŒ происходят Π΄Π²Π΅ интСрСсныС Π²Π΅Ρ‰ΠΈ.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, Ссли ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ #inner Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ, это ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ΄Π°Π»ΠΈΠ»ΠΎ Π΅Π³ΠΎ ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΎΠ±ΠΎΡ€ΠΎΡ‚Π°. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт #outer Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов, находящихся Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅, поэтому Π΅Π³ΠΎ высота ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ Π΄ΠΎ нуля. Π’ΠΎ, Ρ‡Ρ‚ΠΎ выглядит ΠΊΠ°ΠΊ красная линия Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½ΠΎΠΉ 2 пиксСля, Π½Π° самом Π΄Π΅Π»Π΅ являСтся Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ Π² 1 пиксСль Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнта с Π½ΡƒΠ»Π΅Π²ΠΎΠΉ высотой — Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ ΠΈ ниТнюю Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅Ρ‚.

Вторая интСрСсная Π²Π΅Ρ‰ΡŒ — Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ позиционированная ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ° Π½Π΅ двигалась.Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для свойств Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ , ΠΏΡ€Π°Π²Ρ‹ΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΉ : Π°Π²Ρ‚ΠΎ , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ появится ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ Π±Ρ‹Π» Π±Ρ‹, Ссли Π±Ρ‹ ΠΎΠ½ Π½Π΅ Π±Ρ‹Π» Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½. Однако, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΡƒΠ΄Π°Π»Π΅Π½ ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ элСмСнты Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π° Π½ΠΈΠΌ. На самом Π΄Π΅Π»Π΅ это ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ — Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒΡΡ Π½Π° это, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ сгСнСрированный Π±Π»ΠΎΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠΈ. НапримСр, Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню, управляСмом CSS, Β«Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡΒ» ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ свойства top .Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½ΠΈ появятся Π² ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡ‹Ρ… ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°Ρ… ΠΏΠΎ оси X (Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈΡ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅), автоматичСски.

  1. Π—Π°Ρ‚Π΅ΠΌ Π΄Π°Π²Π°ΠΉΡ‚Π΅ установим высоту для элСмСнта #outer , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ снова выглядСл ΠΊΠ°ΠΊ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΠΈ пСрСмСстим #inner Π² сторону. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ строки Π² свои ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS:

      #outer {
       ΠΌΠ°Ρ€ΠΆΠ°: 5em;
       Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # f00;
       высота: 4em;
     }
    
     #Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 6em;
       высота: 4em;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 999;
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
       слСва: 1em;
     }
      
  2. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ измСнСния.Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ #outer Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ снова являСтся ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ Π·Π°Π΄Π°Π»ΠΈ для Π½Π΅Π³ΠΎ высоту. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ #inner смСстился Π² сторону, Π½ΠΎ Π½Π΅ Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ. Π­Ρ‚ΠΎ Π½Π΅ 1em ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края своСго родитСля, Π° 1em ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π°! ΠŸΡ€ΠΈΡ‡ΠΈΠ½Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ, ΠΊΠ°ΠΊ объяснялось Π²Ρ‹ΡˆΠ΅, #inner Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ°, поэтому Π΅Π³ΠΎ содСрТащий Π±Π»ΠΎΠΊ являСтся Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ. Если Π²Ρ‹ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ, ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΎΡ‚ auto , ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚ΡŒΡΡ ΠΊ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ содСрТащСго Π±Π»ΠΎΠΊΠ°.Когда Π²Ρ‹ устанавливаСтС left: 1em , Π»Π΅Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ #inner заканчиваСтся Π½Π° 1em ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π°.

    1. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ — ΠΎ Ρ‡ΡƒΠ΄ΠΎ! Π‘Π΅Ρ€Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ находится Π½Π° расстоянии 1em ΠΎΡ‚ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. Установка position: relative Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅ #outer сдСлало Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΈ установило Π΅Π³ΠΎ ΠΊΠ°ΠΊ содСрТащий Π±Π»ΠΎΠΊ для Π»ΡŽΠ±Ρ‹Ρ… Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ ΠΌΠΎΠ³ ΠΈΠΌΠ΅Ρ‚ΡŒ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ left: 1em , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ установили для #inner , Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ отсчитываСтся ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края #outer , Π° Π½Π΅ ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ сТаты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… содСрТимому, Ссли Π²Ρ‹ Π½Π΅ ΡƒΠΊΠ°ΠΆΠ΅Ρ‚Π΅ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π·Π°Π΄Π°Π² свойства left ΠΈ right ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π² свойство width . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ высоту, Π·Π°Π΄Π°Π² свойства top ΠΈ bottom ΠΈΠ»ΠΈ Π·Π°Π΄Π°Π² свойство height .

Π›ΡŽΠ±ΠΎΠ΅ ΠΈΠ· этих ΡˆΠ΅ΡΡ‚ΠΈ свойств ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ….ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ ΠΏΠΎ самой своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ относятся ΠΊ Ρ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ. Π’ этом случаС ΠΎΠ½ΠΈ относятся ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ содСрТащСго Π±Π»ΠΎΠΊΠ°.

Для Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния для свойств left , right ΠΈ width относятся ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π΅ содСрТащСго Π±Π»ΠΎΠΊΠ°. ЗначСния Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… для свойств top , bottom ΠΈ height относятся ΠΊ высотС содСрТащСго Π±Π»ΠΎΠΊΠ°.

Internet Explorer 6 ΠΈ ΡΡ‚Π°Ρ€ΡˆΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ Opera 8 ΠΈ ΡΡ‚Π°Ρ€ΡˆΠ΅ ошиблись ΠΈ использовали вмСсто этого Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° .Π”Π°Π²Π°ΠΉΡ‚Π΅ поэкспСримСнтируСм с Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ большоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

  1. НачнитС с указания Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² #inner с использованиСм ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ — внСситС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ #inner :

      #inner {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 50%; высота: 50%;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 999;
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
       слСва: 1em;
     }
      
  2. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ сСрый ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ становится ΡˆΠΈΡ€Π΅ ΠΈ ΠΊΠΎΡ€ΠΎΡ‡Π΅ (ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ соврСмСнный Π±Ρ€Π°ΡƒΠ·Π΅Ρ€).Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΎΠΌΠ΅Ρ€ #outer , ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ : ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ . Π¨ΠΈΡ€ΠΈΠ½Π° элСмСнта # inner Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Π΄Π²ΠΎΠ΅ мСньшС, Ρ‡Π΅ΠΌ #outer , Π° Π΅Π³ΠΎ высота составляСт ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ высоты #outer .

  3. Π”Π°Π²Π°ΠΉΡ‚Π΅ снова сдСлаСм ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ! ВнСситС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния Π² #outer :

      #outer {
       ΠΌΠ°Ρ€ΠΆΠ°: 5em;
       Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # f00;
       высота: 4em;
       ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: статичСскоС;
     }
      
  4. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ — большая Ρ€Π°Π·Π½ΠΈΡ†Π°, Π°? Π‘Π΅Ρ€ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Π΄Π²ΠΎΠ΅ мСньшС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ Π²Π΄Π²ΠΎΠ΅ мСньшС ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Π·Π½Π°Π½ΠΈΠ΅ содСрТащихся Π±Π»ΠΎΠΊΠΎΠ² Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ!

Π’Ρ€Π΅Ρ‚ΡŒΠ΅ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ — z-index

ЕстСствСнно Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-страницу ΠΊΠ°ΠΊ Π΄Π²ΡƒΠΌΠ΅Ρ€Π½ΡƒΡŽ. Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΅Ρ‰Π΅ нСдостаточно Ρ€Π°Π·Π²ΠΈΡ‚Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ 3D-дисплСи стали ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ явлСниСм, поэтому Π½Π°ΠΌ приходится Π΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ высотой ΠΈ ΠΏΠΎΠ΄Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ 3D-эффСктами. Но Π½Π° самом Π΄Π΅Π»Π΅ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ CSS происходит Π² Ρ‚Ρ€Π΅Ρ… измСрСниях! Π­Ρ‚ΠΎ Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ элСмСнт Π·Π°Π²ΠΈΡΠ°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠΌ — Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ элСмСнтами.

Π”Π²Π΅ основныС оси Π½Π° Π²Π΅Π±-страницС — это Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ось X ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ось Y. Начало этой систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ находится Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ области просмотра, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΌ, Π³Π΄Π΅ значСния X ΠΈ Y Ρ€Π°Π²Π½Ρ‹ 0. Но Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ось Z, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΈΠ΄ΡƒΡ‰ΡƒΡŽ пСрпСндикулярно повСрхности ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°. (ΠΈΠ»ΠΈ Π½Π° Π±ΡƒΠΌΠ°Π³Ρƒ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ). Π‘ΠΎΠ»Π΅Π΅ высокиС значСния Z ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Β«ΠΏΠ΅Ρ€Π΅Π΄Β» Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌΠΈ значСниями Z. ЗначСния Z Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Β«ΠΏΠΎΠ·Π°Π΄ΠΈΒ» Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ отсчСта (я объясню эту Ρ‚ΠΎΡ‡ΠΊΡƒ отсчСта Ρ‡Π΅Ρ€Π΅Π· ΠΌΠΈΠ½ΡƒΡ‚Ρƒ).

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ, ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ это ΠΎΠ΄Π½Π° ΠΈΠ· самых слоТных Ρ‚Π΅ΠΌ Π² CSS, поэтому Π½Π΅ Ρ€Π°ΡΡΡ‚Ρ€Π°ΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ, Ссли Π²Ρ‹ Π½Π΅ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅ Π΅Π΅ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Ρ‡Ρ‚Π΅Π½ΠΈΠΈ.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты) Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ³ΠΎ контСкста налоТСния. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π² контСкстС налоТСния ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ Ρ‚ΠΎΡ‡ΠΊΡƒ отсчСта ΠΏΠΎ оси Z. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом я расскаТу Π½ΠΈΠΆΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Z (Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ΅ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стСка) ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство z-index .Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΌ числом (ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ) ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов auto ΠΈΠ»ΠΈ inherit . Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — auto , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка, Ρ‡Ρ‚ΠΎ ΠΈ Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт.

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ индСкса вдоль оси Z. Π’Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ элСмСнт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° 19 пиксСлСй ΠΏΠΎΠ·Π°Π΄ΠΈ ΠΈΠ»ΠΈ Π½Π° 5 сантимСтров Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. Π”ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎΠ± этом ΠΊΠ°ΠΊ ΠΎ ΠΊΠΎΠ»ΠΎΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠΈΠΊΠΎΠ²Ρ‹ΠΉ Ρ‚ΡƒΠ· Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ‚Ρ€Π΅Ρ… Π±ΡƒΠ±Π΅Π½ — Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚Ρ‹ Π΅ΡΡ‚ΡŒ свой ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка ΠΈΠ»ΠΈ Z-индСкс.

Если Π²Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ z-index ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π»ΠΎΠ΅ число, Π²Ρ‹ Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ Π΅ΠΌΡƒ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка Β«ΠΏΠ΅Ρ€Π΅Π΄Β» Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ контСкстС стСкирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка. 0 (ноль) z-index ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ‚ΠΎ ΠΆΠ΅ самоС, Ρ‡Ρ‚ΠΎ ΠΈ auto , Π½ΠΎ Π΅ΡΡ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я Π²Π΅Ρ€Π½ΡƒΡΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΌΠΈΠ½ΡƒΡ‚Ρƒ. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ цСлочислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для z-index Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка Β«ΠΏΠΎΠ·Π°Π΄ΠΈΒ» Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ уровня стСка.

Когда Π΄Π²Π° элСмСнта Π² ΠΎΠ΄Π½ΠΎΠΌ контСкстС стСкирования ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка, Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появляСтся ΠΏΠΎΠ·ΠΆΠ΅ Π² исходном ΠΊΠΎΠ΄Π΅, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр.

ЀактичСски ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ сСми слоСв Π² ΠΎΠ΄Π½ΠΎΠΌ контСкстС налоТСния ΠΈ любоС количСство элСмСнтов Π² этих слоях, Π½ΠΎ Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡ‚Π΅ΡΡŒ — Π²Π°ΠΌ вряд Π»ΠΈ придСтся ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с сСмью слоями Π² контСкстС налоТСния. ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ элСмСнты (всС элСмСнты, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅) Π² ΠΎΠ΄Π½ΠΎΠΌ контСкстС налоТСния Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, ΠΎΡ‚ Π·Π°Π΄Π½Π΅ΠΉ части ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅ΠΉ, выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  1. Π€ΠΎΠ½ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнтов, ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‰ΠΈΡ… контСкст налоТСния
  2. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ с ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ уровнями стСка
  3. ΠŸΠΎΡ‚ΠΎΠΌΠΊΠΈ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ° Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅
  4. ΠŸΠ»Π°Π²ΡƒΡ‡ΠΈΠ΅ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ
  5. ΠŸΠΎΡ‚ΠΎΠΌΠΊΠΈ встроСнного уровня Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅
  6. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ с установлСнным ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стСка Π°Π²Ρ‚ΠΎ ΠΈΠ»ΠΈ (ноль)
  7. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ с ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ уровнями стСка

Π’Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ записи — это элСмСнты, ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства z-index .

ВсС это довольно слоТно ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅ΠΌ нСсколько практичСских экспСримСнтов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Z-индСкс.

  1. НачнитС с добавлСния ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ строки Π² ваш нСбольшой ΠΎΠ±Ρ€Π°Π·Π΅Ρ† Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

      <Ρ‚Π΅Π»ΠΎ>
       
  2. Π—Π°Ρ‚Π΅ΠΌ я ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΡƒ Π²Π°ΠΌ Π²ΠΎΡΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ваш CSS Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ #outer Π±Ρ‹Π» содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ, ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π΅ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ #inner .Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм #outer Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ‹ΡˆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ вас Π±Ρ‹Π»ΠΎ большС мСста для экспСримСнтов. ВнСситС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ измСнСния Π² Π΄Π²Π° ΠΏΡ€Π°Π²ΠΈΠ»Π°:

      #outer {
       ΠΌΠ°Ρ€ΠΆΠ°: 5em;
       Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # f00;
       высота: 8em; ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
     }
    
     #Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 5em; высота: 5em;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 999;
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
       слСва: 1em;
     }
      
  3. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для элСмСнта #second :

      #second {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 5em;
       высота: 5em;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 00f;
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
       Π²Π΅Ρ€Ρ…: 1em;
       слСва: 2em;
     }
      
  4. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ярко-синюю Ρ€Π°ΠΌΠΊΡƒ, ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ ΡΠ΅Ρ€ΡƒΡŽ.Оба поля ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка ( auto , Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка 0), Π½ΠΎ синий ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ отобраТаСтся ΠΏΠ΅Ρ€Π΅Π΄ сСрым ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ появляСтся ΠΏΠΎΠ·ΠΆΠ΅ Π² исходном ΠΊΠΎΠ΄Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сСрый ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ появлялся Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ, Π·Π°Π΄Π°Π² Π΅ΠΌΡƒ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ большС 0 — Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΡƒΡΠ΅Ρ€Π΄ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Ρ€ΠΎΠ΄Π΅ 10000. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ строку Π² ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ #inner :

      #inner {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 5em;
       высота: 5em;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 999;
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
       слСва: 1em;
       z-индСкс: 1;
     }
      
  5. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ сСроС ΠΏΠΎΠ»Π΅ ΠΏΠ΅Ρ€Π΅Π΄ синим.

Π›ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ контСксты стСка

Π’ ΠΎΡΡ‚Π°Π²ΡˆΠ΅ΠΉΡΡ части этого Ρ€Π°Π·Π΄Π΅Π»Π° ΠΎΠ±ΡΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ контСксты стСкирования. Π­Ρ‚ΠΎ, вСроятно, Π½Π΅ Ρ‚ΠΎ, с Ρ‡Π΅ΠΌ Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ Π² своСй ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ дизайнСрской Ρ€Π°Π±ΠΎΡ‚Π΅, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π΅ ΠΏΠΎΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π½ΠΎ я ΠΏΠΎΠ΄ΡƒΠΌΠ°Π», Ρ‡Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Ρƒ это для ΠΏΠΎΠ»Π½ΠΎΡ‚Ρ‹. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ это, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ z-index ΡƒΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ Ρ†Π΅Π»ΠΎΠ΅ число, устанавливаСт Π½ΠΎΠ²Ρ‹ΠΉ, Β«Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉΒ» контСкст стСка, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ сам элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка 0.Π­Ρ‚ΠΎ Ρ€Π°Π·Π½ΠΈΡ†Π°, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π» Ρ€Π°Π½Π΅Π΅, ΠΌΠ΅ΠΆΠ΄Ρƒ z-index: auto ΠΈ z-index: 0 . ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π½Π΅ устанавливаСт Π½ΠΎΠ²Ρ‹ΠΉ контСкст стСкирования, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ — устанавливаСт.

Когда элСмСнт устанавливаСт Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ контСкст стСкирования, ΡƒΡ€ΠΎΠ²Π½ΠΈ стСка Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² этом локальном контСкстС. Π­Ρ‚ΠΈ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ ΠΈ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ ΠΈΡ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ, Π½ΠΎ Π½Π΅ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Π±Ρ€Π°Ρ‚ΡŒΡΠΌ ΠΈ сСстрам родитСля. Π­Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Β«ΠΊΠ»Π΅Ρ‚ΠΊΡƒΒ» Π²ΠΎΠΊΡ€ΡƒΠ³ своих ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ ΠΈΠ· Π½Π΅Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒΡΡ.ΠŸΠΎΡ‚ΠΎΠΌΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ· Π² этой ΠΊΠ»Π΅Ρ‚ΠΊΠ΅, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒΡΡ ΠΈΠ· ΠΊΠ»Π΅Ρ‚ΠΊΠΈ. Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ Π½Π΅Π΄Π΅Π»ΠΈΠΌΡƒΡŽ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ Π² контСкстС стСкирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠΊΡ€ΡƒΠΆΠ°Π΅Ρ‚ родитСля.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ€Π°Π·Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ свои Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΈΡ… Π±ΡƒΡ…Π³Π°Π»Ρ‚Π΅Ρ€Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ Π²Π°ΠΌ Π½Π°Π»ΠΎΠ³ΠΈ. Π£ вас Π΅ΡΡ‚ΡŒ ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹ ΠΎ расходах, ΠΊΠ²ΠΈΡ‚Π°Π½Ρ†ΠΈΠΈ, подтвСрТдСния Π·Π°ΠΊΠ°Π·ΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, ΠΈ Π²Ρ‹ складываСтС ΠΎΠ΄Π½Ρƒ Π±ΡƒΠΌΠ°Π³Ρƒ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠΉ — Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Тизнь Π²Π°ΡˆΠ΅ΠΌΡƒ Π±ΡƒΡ…Π³Π°Π»Ρ‚Π΅Ρ€Ρƒ, Π²Ρ‹ вставляСтС Ρ‚ΠΈΠΏΡ‹ Π±ΡƒΠΌΠ°Π³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ вмСстС, Π² Ρ€Π°Π·Π½Ρ‹Π΅ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Ρ‹.

Π›ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ контСкст стСкирования Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Ρƒ. Он ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ связанныС элСмСнты вмСстС ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ вставку ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ, Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ порядок сортировки примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ этого ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π° ΠΈ Π½Π΅ влияСт Π½Π° стопку Π±ΡƒΠΌΠ°Π³ Π² Ρ†Π΅Π»ΠΎΠΌ. Π’Π°ΡˆΠ° стопка Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ содСрТит смСсь ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±ΡƒΠΌΠ°Π³ (элСмСнты с ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стСка , Π°Π²Ρ‚ΠΎ ) ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΎΠ² (элСмСнты с цСлочислСнным ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стСка). ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Ρ‹ с ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стопки Π»Π΅ΠΆΠ°Ρ‚ ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ€Π°Π·ΠΎΡ€Π²Π°Π½Π½ΠΎΠΉ Π±ΡƒΠΌΠ°Π³ΠΈ, Π° ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Ρ‹ с ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стопки находятся Π²Π½ΠΈΠ·Ρƒ стопки.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ присваиваСтС цСлочислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойству z-index для элСмСнта, Π²Ρ‹ создаСтС Β«ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Β», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит этот элСмСнт ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ².

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ эти Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ контСксты стСкирования. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π·Π°ΠΏΡƒΡ‚Π°Π½Π½Ρ‹ΠΌ, Π½ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ это Π½Π΅ сильно отличаСтся ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ. Если Π²Ρ‹ послСдуСтС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌ, Π²Ρ‹ смоТСтС ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ всС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

  1. НачнитС с добавлСния содСрТимого ΠΊ вашим Π΄Π²ΡƒΠΌ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ элСмСнтам — Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ строки Π² свой HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚:

      
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ ΠΎΠ±ΠΎΠΈΠΌ этим элСмСнтам span :

      ΠΏΡ€ΠΎΠ»Π΅Ρ‚ {
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
       Π²Π΅Ρ€Ρ…: 2em;
       слСва: 2em;
       ΡˆΠΈΡ€ΠΈΠ½Π°: 3em;
       высота: 3em;
     }
      

    Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ элСмСнты span Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ устанавливаСт ΠΈΡ… ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.ΠŸΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡ‚Π΅ сСкунду — span элСмСнтов встроСны — ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ для встроСнных элСмСнтов? ΠžΡ‚Π²Π΅Ρ‚ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты, автоматичСски ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π±Π»ΠΎΠΊΠΈ Π±Π»ΠΎΠΊΠΎΠ². Π£ΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π²Π°ΠΌΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, содСрТащСго span ’. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ±Π° элСмСнта span ΠΈΠΌΠ΅ΡŽΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ div ΠΊΠ°ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ, эти Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ элСмСнты Π±Π΅Ρ€ΡƒΡ‚ Π½Π° сСбя Ρ€ΠΎΠ»ΡŒ содСрТащихся Π±Π»ΠΎΠΊΠΎΠ².

  3. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ†Π²Π΅Ρ‚ ΠΊ элСмСнтам span , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ.Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°:

      # inner span {
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # ff0;
     }
    
     #second span {
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0ff;
     }
      
  4. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, ΠΈ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ большСго сСрого ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° ΠΈ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ большСго синСго ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°. Π‘Π΅Ρ€Ρ‹ΠΉ ΠΈ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π΄ синим ΠΈ Π³ΠΎΠ»ΡƒΠ±Ρ‹ΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ z-index : 1 .

  5. Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π±Ρ‹Π» Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ всСх ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ²? ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ высокий ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка, Ρ‡Π΅ΠΌ сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚. На самом Π΄Π΅Π»Π΅, достаточно ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ Π΅ΠΌΡƒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка , Ρ‡Ρ‚ΠΎ ΠΈ сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ появляСтся ΠΏΠΎΠ·ΠΆΠ΅ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ — внСситС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния Π² свой CSS:

      #second span {
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0ff;
       z-индСкс: 1;
     }
      
  6. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ. Если ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΡŽ CSS, Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ.Π‘Π΅Ρ€Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ z-index : 1 , Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ устанавливаСт Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ контСкст стСкирования. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Π²Ρ‹ создали ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих Β«ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΎΠ²Β» ΠΈ помСстили Π²Π½ΡƒΡ‚Ρ€ΡŒ сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈ Π΅Π³ΠΎ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚.

Π•Ρ‰Π΅ Π½Π΅ Π·Π°ΠΏΡƒΡ‚Π°Π»ΠΈΡΡŒ? Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ экспСримСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΡΡΠ½ΠΈΡ‚ΡŒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ.

  1. УстановитС высокий ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка для ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вывСсти Π΅Π³ΠΎ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ — внСситС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния Π² свой CSS:

      # inner span {
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # ff0;
       z-индСкс: 4;
    }
      
  2. Если Π²Ρ‹ сохранитС ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅, Π²Ρ‹ увидитС… Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ! Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ стСка, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ для ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, примСняСтся Π² локальном контСкстС стСка, установлСнном сСрым ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠΌ — ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π° вмСстС со своим сСрым Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ элСмСнтом.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт (синий ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚) Π½Π΅ устанавливаСт локального контСкста стСкирования — ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅ΠΌΡ‹ΠΉ z-index : auto . Π‘ΠΈΠ½ΠΈΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ — это нСзакрСплСнная Π±ΡƒΠΌΠ°Π³Π° Π² стопкС. Π–Π΅Π»Ρ‚Ρ‹Π΅ ΠΈ Π³ΠΎΠ»ΡƒΠ±Ρ‹Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ фактичСски находятся Π² ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π°Ρ… сами ΠΏΠΎ сСбС (ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ цСлочислСнный ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка ΠΈ сами ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ контСксты стСка).

  3. Если Π²Ρ‹ заставитС синий ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ контСкст налоТСния, Π²Ρ‹ Π½Π΅ смоТСтС ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½, Ссли Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ пСрСнСсСтС Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт (синий ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚) Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½.Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ — внСситС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния Π² свой CSS:

      #inner {
    
       ...
    
       z-индСкс: 2;
     }
    
     #Π²Ρ‚ΠΎΡ€ΠΎΠΉ {
    
       ...
    
       z-индСкс: 1;
     }
    
     #second span {
    
       ...
    
       z-индСкс: 3;
     }
      
  4. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ сСрый ΠΈ синий ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ контСксты налоТСния, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ Π΄Π²Π° ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π°. Π’Π½ΠΈΠ·Ρƒ стопки находится ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ с ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стопки 1, содСрТащий Π΄Π²Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π° (синий ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚). Π’Π²Π΅Ρ€Ρ…Ρƒ стопки находится ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ с ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стопки 2, содСрТащий Π΄Π²Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π° (сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚).Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅ синий ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка 0, поэтому ΠΎΠ½ появляСтся Π·Π° Π³ΠΎΠ»ΡƒΠ±Ρ‹ΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка 3. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅ сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка 0, поэтому ΠΎΠ½ появляСтся Π·Π° ΠΆΠ΅Π»Ρ‚Ρ‹ΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠΌ с Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ стСка. ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка 4. На рисункС 1 ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ бокса ΠΈ Π΄Π²Π° Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… контСкста стСка сбоку вдоль оси Z.

Рисунок 1: Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… контСкстов налоТСния.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹, располоТСнныС Π²Π½ΡƒΡ‚Ρ€ΠΈ Β«2Β», всСгда Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΏΠ΅Ρ€Π΅Π΄ всСми элСмСнтами Π²Π½ΡƒΡ‚Ρ€ΠΈ Β«1Β».Π—Π°Ρ‚Π΅ΠΌ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ контСкстС налоТСния элСмСнты с Π±ΠΎΠ»Π΅Π΅ высоким Π½ΠΎΠΌΠ΅Ρ€ΠΎΠΌ z-индСкса ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтами с нСбольшим Π½ΠΎΠΌΠ΅Ρ€ΠΎΠΌ z-индСкса. Если Π΄Π²Π° элСмСнта ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€ z-index, Ρ‚ΠΎ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появляСтся ΠΏΠΎΠ·ΠΆΠ΅ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅, появится Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ.

Π­Ρ‚Π° Ρ‡Π°ΡΡ‚ΡŒ, вСроятно, Π±Ρ‹Π»Π° довольно Π·Π°ΠΏΡƒΡ‚Π°Π½Π½ΠΎΠΉ, особСнно Ссли Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² CSS. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ контСксты стСкирования, Ссли Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π½ΠΈ стСка Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов. Если элСмСнт ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ Π»ΠΎΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ контСксту налоТСния, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ оси Z Π² этом локальном контСкстС.Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π² ΠΎΠ΄Π½ΠΎΠΌ локальном контСкстС налоТСния Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя элСмСнтами Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ локальном контСкстС налоТСния.

Π₯ΠΎΡ€ΠΎΡˆΠ°Ρ Π½ΠΎΠ²ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹, скорСС всСго, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ с этими ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ. ИзмСнСния Π² z-index Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ распространСны Π² Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ…, ΠΈ Ссли ΠΎΠ½ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ происходят, Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ контСкста стСкирования.

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : фиксированный фиксируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра. Он остаСтся Π½Π° мСстС, Π΄Π°ΠΆΠ΅ Ссли Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ прокручиваСтся.Для media = "print" фиксированный элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ΅Ρ‡Π°Ρ‚Π½ΠΎΠΉ страницС.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Internet Explorer вСрсии 6 ΠΈ ΡΡ‚Π°Ρ€ΡˆΠ΅ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ фиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π²Ρ‹ Π½Π΅ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅.

Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ позиция ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнта с position: absolute относятся ΠΊ Π΅Π³ΠΎ содСрТащСму Π±Π»ΠΎΠΊΡƒ, позиция ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнта с position: fixed всСгда ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ исходного содСрТащСго Π±Π»ΠΎΠΊΠ°.ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это ΠΎΠΊΠ½ΠΎ просмотра: ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ страницы. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это, Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ исправитС ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡˆΠΈΡ… элСмСнтов. Π’Ρ‹ сдСлаСтС Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΎΡ‡Π΅Π½ΡŒ высоким, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ полосу ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ Π»Π΅Π³Ρ‡Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚.

  1. ВнСситС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния Π² свой ΠΊΠΎΠ΄ CSS:

      #inner {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 5em;
       высота: 5em;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 999;
       ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: фиксированноС; Π²Π΅Ρ€Ρ…: 1em;
       слСва: 1em;
     }
    
     #Π²Ρ‚ΠΎΡ€ΠΎΠΉ {
       ΡˆΠΈΡ€ΠΈΠ½Π°: 5em;
       высота: 150ΠΌΠΌ;
       Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 00f;
       позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
       Π²Π΅Ρ€Ρ…: 1em;
       слСва: 2em;
     }
      
  2. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ.Если Ρƒ вас Π½Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΡƒΠ²Π΅Π»ΠΈΡ‡ΡŒΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ height для #second . (А ΠΊΠ°ΠΊΠΎΠΉ Ρƒ вас гигантский ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€?) Высокий синий элСмСнт выступаСт Π·Π° ниТнюю Ρ‡Π°ΡΡ‚ΡŒ ΠΎΠΊΠ½Π°. ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ страницу Π²Π½ΠΈΠ· ΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ. #inner Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ фиксируСтся Π² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ 1em свСрху ΠΎΠΊΠ½Π° ΠΈ 1em слСва; поэтому ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ сСрая Ρ€Π°ΠΌΠΊΠ° остаСтся Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС Π½Π° экранС.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ΄Π°Π»ΡΡŽΡ‚ΡΡ ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ².Они Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ссли Π²Ρ‹ Π½Π΅ освободитС для Π½ΠΈΡ… мСсто. Если всС Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, высота Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡΡ Π΄ΠΎ нуля. ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ содСрТащСго Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся блиТайшим ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΏΡ€Π΅Π΄ΠΊΠΎΠΌ. Если ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ° Π½Π΅Ρ‚, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра Π±ΡƒΠ΄Π΅Ρ‚ содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Ρ„ΠΈΠΊΡΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ области просмотра — ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра всСгда являСтся ΠΈΡ… содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ.ΠŸΡ€ΠΈ просмотрС Π½Π° экранС ΠΎΠ½ΠΈ всСгда ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°; ΠΏΡ€ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ ΠΎΠ½ΠΈ появятся Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС. ПолоТСниС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ края Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ , ΠΏΡ€Π°Π²Ρ‹ΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ Π»Π΅Π²Ρ‹ΠΉ . Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свойства опрСдСляСт расстояниС ΠΎΡ‚ края Π΄ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ края Π±Π»ΠΎΠΊΠ°, содСрТащСго элСмСнт.

ВсС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ стСка Π² контСкстС стСкирования.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ стСка ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство z-index . Когда z-index ΡƒΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ Ρ†Π΅Π»ΠΎΠ΅ число, элСмСнт устанавливаСт Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ контСкст стСкирования для своих ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ².

Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅

Вопросы для ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠΉ

  • ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚Π΅ измСнСния ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° фиксированного позиционирования, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ порядок налоТСния ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°ΠΌΠΈ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сСрый ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π±Ρ‹Π» сзади, Π° Π·Π°Ρ‚Π΅ΠΌ синий, ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ ΠΈ Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Ρ‹ Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ порядкС.
Автор записи

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

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