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

Π˜Π·ΡƒΡ‡Π°Π΅ΠΌ CSS-ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π° 10 шагов

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ β€” ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… понятий Π² Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткС. Π Π°Π·ΠΎΠ±Ρ€Π°Π²ΡˆΠΈΡΡŒ с Π½ΠΈΠΌ, Π²Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ станСт понятно, Π° вСрстка ΠΈΠ· ΡˆΠ°ΠΌΠ°Π½ΡΡ‚Π²Π° прСвратится Π² осмыслСнный процСсс. Π˜Ρ‚Π°ΠΊ, Ρ€Π΅Ρ‡ΡŒ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ ΠΎ CSS-свойствах position ΠΈ float.

1. position: static

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ всС элСмСнты Π½Π° страницС ΠΈΠΌΠ΅ΡŽΡ‚ статичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (position: static), это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ элСмСнт Π½Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½, ΠΈ появляСтся Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Π½Π° своСм ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ мСстС, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ порядкС, ΠΊΠ°ΠΊ ΠΈ Π² html-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅.

НСт нСобходимости ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ это свойство ΠΊΠ°ΠΊΠΎΠΌΡƒ-Π»ΠΈΠ±ΠΎ элСмСнту, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΌ Π½Π΅ трСбуСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π½Π΅Π΅ установлСнноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½ΠΎΠ΅.


#content{
 position: static;
}

2. position:relative

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (position: relative) позволяСт Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойства: top, bottom, left ΠΈ right, для располоТСния элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Π±Ρ‹ ΠΎΠ½ появился ΠΏΡ€ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ пСрСмСстим #content Π½Π° 20 пиксСлСй Π²Π½ΠΈΠ·, ΠΈ Π½Π° 40 пиксСлСй Π²Π»Π΅Π²ΠΎ:


#content{
 position: relative;
 top: 20px;
 left: -40px;
}

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° Ρ‚ΠΎΠΌ мСстС, Π³Π΄Π΅ Π±Ρ‹ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Π» находится наш Π±Π»ΠΎΠΊ #content, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π»ΠΎΡΡŒ пустоС пространство. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ #content, Π±Π»ΠΎΠΊ #footer Π½Π΅ пСрСмСстился Π½ΠΈΠΆΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ, #content ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ своС мСсто Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡƒΠ»ΠΈ Π΅Π³ΠΎ.

На Π΄Π°Π½Π½ΠΎΠΌ этапС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π½ΠΎ, Π½Π΅ ΡΠΏΠ΅ΡˆΠΈΡ‚Π΅ с Π²Ρ‹Π²ΠΎΠ΄Π°ΠΌΠΈ, Π΄Π°Π»Π΅Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅, Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, для Ρ‡Π΅Π³ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

3. position: absolute

ΠŸΡ€ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ (position: absolute), элСмСнт удаляСтся ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΈ появляСтся Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Π΅ΠΌΡƒ скаТСтС.

Π”Π°Π²Π°ΠΉΡ‚Π΅, для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, пСрСмСстим Π±Π»ΠΎΠΊ #div-1a Π² Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ, ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» страницы:


#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° этот Ρ€Π°Π·, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±Π»ΠΎΠΊ #div-1a Π±Ρ‹Π» ΡƒΠ΄Π°Π»Π΅Π½ ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ элСмСнты Π½Π° страницС Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡŒ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ: #div-1b, #div-1c ΠΈ #footer ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΈΡΡŒ Π²Ρ‹ΡˆΠ΅, Π½Π° мСсто ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. А сам Π±Π»ΠΎΠΊ #div-1a, располоТился Ρ‚ΠΎΡ‡Π½ΠΎ Π² ΠΏΡ€Π°Π²ΠΎΠΌ, Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΡƒΠ³Π»Ρƒ страницы.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любой элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ страницы, ΠΎΠ΄Π½Π°ΠΊΠΎ этого Π½Π΅ достаточно. На самом Π΄Π΅Π»Π΅, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ #div-1a ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° #content. И Π½Π° этом этапС, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ вновь вступаСт Π² ΠΈΠ³Ρ€Ρƒ.

4. position: fixed

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (position: fixed), являСтся ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования. ЕдинствСнноС Π΅Π³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ всСгда находится Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области экрана, ΠΈ Π½Π΅ двигаСтся Π²ΠΎ врСмя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы. Π’ этом ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ, ΠΎΠ½ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° фиксированноС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.


#div-1a {
 position:fixed;
 top:0;
 right:0;
 width:200px;
}

Π’ IE с position: fixed Π½Π΅ всС Ρ‚Π°ΠΊ Π³Π»Π°Π΄ΠΊΠΎ, ΠΊΠ°ΠΊ Π±Ρ‹ Π½Π°ΠΌ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ, Π½ΠΎ сущСствуСт мноТСство способов ΠΎΠ±ΠΎΠΉΡ‚ΠΈ эти ограничСния.

5. position:relative + position:absolute

Назначив Π±Π»ΠΎΠΊΡƒ #content ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (position: relative), ΠΌΡ‹ смоТСм ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ Π³Ρ€Π°Π½ΠΈΡ†. Π”Π°Π²Π°ΠΉΡ‚Π΅ размСстим Π±Π»ΠΎΠΊ #div-1a, Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ Π±Π»ΠΎΠΊΠ° #content.


#content {
 position:relative;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

6. Π”Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

Π’ΠΎΠΎΡ€ΡƒΠΆΠΈΠ²ΡˆΠΈΡΡŒ знаниями ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… шагов, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования.


#content {
 position:relative;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Одним ΠΈΠ· прСимущСств Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования, являСтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ элСмСнты Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ΠΈ располоТСны Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Π±Π»ΠΎΠΊ #div-1b располоТСн ΠΏΠ΅Ρ€Π΅Π΄ Π±Π»ΠΎΠΊΠΎΠΌ #div-1a.

А сСйчас Ρƒ вас Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Π» Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ вопрос: β€œΠ ΠΊΡƒΠ΄Π° ΠΆΠ΅ дСлись ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΈΠ· нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°?”. Они ΡΠΊΡ€Ρ‹Π»ΠΈΡΡŒ ΠΏΠΎΠ΄ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ располоТСнными Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ.

7. Π”Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с фиксированной высотой

Одно ΠΈΠ· Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ – Π·Π°Π΄Π°Ρ‚ΡŒ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ, содСрТащСму ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.


#content {
 position:relative;
 height: 450px;
}

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

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

8. Float

Для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ высотой, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

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


#div-1a {
 float:left;
 width:200px;
}

9. β€œΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅β€ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

Если Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ float: left, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ float: left, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² приТмСтся ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, ΠΈ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, с ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ высотой.


#div-1a {
 float:left;
 width:150px;
}

#div-1b {
 float:left;
 width:150px;
}

Π’Π°ΠΊΠΆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ float, Π² этом случаС, ΠΎΠ½ΠΈ распрСдСлятся ΠΏΠΎ краям ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.


#div-1a {
 float:right;
 width:150px;
}

#div-1b {
 float:left;
 width:150px;
}

Но Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас появилась другая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° – ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ выходят Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Ρ‚Π΅ΠΌ самым ломая всю вСрстку. Π­Ρ‚Π° самая распространСнная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ², хотя Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΎΠ½Π° довольно просто.

10. ΠžΡ‡ΠΈΡΡ‚ΠΊΠ° float

Чистку Ρ„Π»ΠΎΠ°Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ двумя способами. Если послС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈΠ΄Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ, достаточно Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ clear: both.


#div-1a {
 float:left;
 width:190px;
}

#div-1b {
 float:left;
 width:190px;
}

#div-1c {
 clear:both;
}

Или ΠΆΠ΅ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ свойство overflow: hidden


#content {
 overflow:hidden;
}

Π’ любом случаС, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅.

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

БСгодня  Π±Ρ‹Π»ΠΈ рассмотрСны Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ позиционирования, ΠΈ самыС простыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹. Π’Π°ΠΊΠΆΠ΅, Π² ΠΏΠΎΠΌΠΎΡ‰ΡŒ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌ я всСгда Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Ρ†ΠΈΠΊΠ» статСй Ивана Π‘Π°Π³Π°Π»Π°Π΅Π²Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² своС врСмя ΠΌΠ½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ.

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ скринкаста β€œLearn CSS Positioning in Ten Steps”.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов Π² HTML ΠΈ CSS

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого HTML Π½Π΅ получится ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ красивый сайт. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈΠΌΠ΅Π΅Ρ‚ свой ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Для Π΅Π³ΠΎ создания ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ стилизация, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS стилСй.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π²Π΅Π±-страницы. К ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ стили для измСнСния Ρ†Π²Π΅Ρ‚Π°, Ρ‚Π΅Π½Π΅ΠΉ, Ρ€Π°ΠΌΠΎΠΊ, ΡˆΡ€ΠΈΡ„Ρ‚Π°.

Однако ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, элСмСнт сначала Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ свойства позиционирования, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ свойство {position}.

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

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ HTML/CSS β€” Π²ΠΈΠ΄Ρ‹?

Бвойство {position} ΠΈΠΌΠ΅Π΅Ρ‚ Ρ†Π΅Π»Ρ‹ΠΉ ряд Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ страницы.

БущСствуСт 4 основных Ρ‚ΠΈΠΏΠ° позиционирования элСмСнтов Π² CSS:

  1. position: absolute;
  2. position: relative;
  3. position: fixed;
  4. position: static.

ВсС ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ позиционирования.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Бвойство position: relative ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов

Одно ΠΈΠ· самых часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ позиционирования Π² CSS. ИспользованиС Π΄Π°Π½Π½ΠΎΠ³ΠΎ значСния Π·Π°Π΄Π°Π΅Ρ‚ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΠ΅, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ внСшнСго Π±Π»ΠΎΠΊΠ°. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства <padding>.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΏΠΎ всСй ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π½ΠΎ Π½Π΅ тСряя собствСнных Π³Ρ€Π°Π½ΠΈΡ†. Они Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, сохраняя Ρ€Π°Π½Π΅Π΅ использованноС пространство. Оно ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‚Π°ΠΊΠΎΠΉ Ρ‚ΠΈΠΏ позиционирования позволяСт Π±Π»ΠΎΠΊΡƒ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π²Ρ‹ΡˆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов, пСрСкрывая ΠΈΡ….

Π Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π΅ всС свойства пСрСмСщСния ΠΏΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌ. ВсСго ΠΈΡ… 4:

  1. <Top> β€” ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ располоТСниС элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π±Π»ΠΎΠΊΠ°.
  2. <Bottom> β€” располагаСт Π±Π»ΠΎΠΊ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края.
  3. <Right> β€” Π·Π°Π΄Π°Π΅Ρ‚ располоТСниС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ внСшнСго Π±Π»ΠΎΠΊΠ°.
  4. <Left> β€” ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠΉ части внСшнСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Если Π²Ρ‹ сдСлаСтС запись ΠΈΠ· 4 свойств: <top>, <bottom>, <left>, <right>, Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ свойства. Π’ΠΎ Π΅ΡΡ‚ΡŒ, <top> сработаСт Ρ€Π°Π½ΡŒΡˆΠ΅, Ρ‡Π΅ΠΌ <bottom>, Π° <left>, Ρ€Π°Π½ΡŒΡˆΠ΅ Ρ‡Π΅ΠΌ <right>.

Π•Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΈΠΌ плюсом использования Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° позиционирования являСтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования свойства z-index. Π—Π° счСт этого ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² css Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для слоСвой вСрстки.

Π”Π°Π½Π½ΠΎΠ΅ свойство прСкрасно ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для позиционирования ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ².

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ <absolute>

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов
<!doctype>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Page</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <div>
            
            </div>
        </div>
    </body>
</html>

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов
body{
    color: darkgreen;
    background: red;
    margin: 0 auto;
    height: 250vh;
}
#content{
    position: fixed;
    height: 100px;
    width: 100%;
    background: black;
}
.block{
    position: absolute;
    background: green;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 10%;
}

Π’Π°ΠΊΠΎΠΉ Ρ‚ΠΈΠΏ позиционирования Π±Π»ΠΎΠΊΠΎΠ² Π² css ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π΅Ρ€Π΅Π΄ΠΊΠΎ. Он ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΉ ΠΎΡ‚ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ.

Он ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π° Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Но ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ всСй страницы. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ всС элСмСнты ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠΌΠ΅ΡŽΡ‚ свойство {position: static}.

НазваниС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ absolute Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π·Π° сСбя, ΠΎΠ½ΠΎ располагаСт Π·Π°Π΄Π°Π΅Ρ‚ элСмСнту Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ отличаСтся ΠΎΡ‚ значСния relative ΠΏΠΎ Ρ†Π΅Π»ΠΎΠΌΡƒ ряду ΠΏΡ€ΠΈΠ·Π½Π°ΠΊΠΎΠ².

Если Π½Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ для Π΅Π³ΠΎ родитСля свойство {position: relative ΠΈΠ»ΠΈ fixed}, Ρ‚ΠΎ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ располоТСн ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ всСй страницы.

Π§Ρ‚ΠΎΠ±Ρ‹ элСмСнт ΠΈΠΌΠ΅Π» Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Ρ‚ΠΎ для Π΅Π³ΠΎ родитСля Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ свойство {position: relative}.

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

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ воспринимаСт Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ Π΅Π³ΠΎ Π½Π΅ сущСствовало вовсС. Из-Π·Π° этого ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ свойством z-index.

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ страницС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ свойства <top>, <right>, <bottom> ΠΈ <left>.

Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² css.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования:

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΠΎΠ΅ статичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ static

Π­Ρ‚ΠΎ стандартноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ html элСмСнтов. Оно стоит ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для всСх элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ располоТСны Π½Π° страницС.

Π•Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для удалСния позиционирования. По сути, {position: static} являСтся ΠΎΡ‚ΠΌΠ΅Π½ΠΎΠΉ позиционирования.

Π’Π°ΠΊΠΎΠΉ Ρ‚ΠΈΠΏ позиционирования Π½Π΅ позволяСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство z-index. Он располагаСт элСмСнты Π² Ρ‚Π°ΠΊΠΎΠΌ порядкС, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΎΠ½ΠΈ описаны Π² HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

Ѐиксация элСмСнта. Position: fixed

{Position: fixed} ΠΈΠ»ΠΈ зафиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ΠšΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ создании шапки ΠΈ Ρ„ΡƒΡ‚Π΅Ρ€Π° страницы. ΠœΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для создания Π±Π»ΠΎΠΊΠΎΠ² с Ρ€Π΅ΠΊΠ»Π°ΠΌΠΎΠΉ.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов

body{

color: darkgreen;

background: red;

margin: 0 auto;

height: 250vh;

}

#content{

position: fixed;

height: 100px;

width: 100%;

background: black;

}

.block{

position: absolute;

background: green;

height: 50px;

width: 50px;

top: 40%;

left: 10%;

}

body{
    color: darkgreen;
    background: red;
    margin: 0 auto;
    height: 250vh;
}
#content{
    position: fixed;
    height: 100px;
    width: 100%;
    background: black;
}
.block{
    position: absolute;
    background: green;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 10%;
}

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

Для Ρ‚Π°ΠΊΠΈΡ… элСмСнтов создаСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ элСмСнтов. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅ содСрТатся элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ зафиксированы Π½Π° страницС. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ β€” ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ свойство {position: fixed}.

Position: inherit ΠΈ position: initial.

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ‚ наслСдствСнноС свойство. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΅Π³ΠΎ Π±Π»ΠΎΠΊ-Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ.

Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ‚ стандартноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. По сути, Ρ‚ΠΎ ΠΆΠ΅ самоС Ρ‡Ρ‚ΠΎ ΠΈ {position: static}.

Бвойства пСрСмСщСния

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрим свойства ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠ΅ Π·Π° ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов. Они Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π½Π° всС элСмСнты Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ свойство {position: static}.

Как ΠΌΡ‹ ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ: сущСствуСт всСго 4 свойства β€” <top>, <right>, <bottom>, <left>. ВсС ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ значСния.

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€” <auto>, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π²Π½ΠΎ 0. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ β€” Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Ρ€ΡΡ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…, rem, em, vh ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Π°Ρ….

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

НадССмся Ρ‡Ρ‚ΠΎ данная ΡΡ‚Π°Ρ‚ΡŒΡ Π±Ρ‹Π»Π° для вас ΠΏΠΎΠ»Π΅Π·Π½Π°. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ всС аспСкты Ρ€Π°Π±ΠΎΡ‚Ρ‹ свойства position, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ.

Для ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ:

  1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΡˆΠ°ΠΏΠΊΡƒ, которая Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π° ΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π΅Ρ€ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ скролла.
  2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„ΡƒΡ‚Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΡ‡Π΅Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы.

Π’ Ρ†Π΅Π½Ρ‚Ρ€Π΅ создайтС 3 Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ΠœΠΎΠΆΠ΅Ρ‚Π΅ эти Π±Π»ΠΎΠΊΠΈ для вставки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.

Π’Π΅Π³ΠΈ:

CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ — это ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ мСстом располоТСния (ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ) элСмСнта Π½Π° Π²Π΅Π±-страницС, ΠΎΠ½ΠΎ контролируСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства position.

Для указания Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ мСста располоТСния ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ CSS свойства: top, right, bottom ΠΈ left. Они Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ со всСми ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ элСмСнтами, ΠΊΡ€ΠΎΠΌΠ΅ статичСских.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ позиционирования.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°!

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнта Π½Π°Π΄ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ!

Бвойство position ΠΈΠΌΠ΅Π΅Ρ‚ 4 значСния: static, fixed, relative ΠΈ absolute. КаТдоС ΠΈΠ· этих Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π±ΡƒΠ΄Π΅Ρ‚ продСмонстрировано Π½ΠΈΠΆΠ΅ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ использования.

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ всС Π²ΠΈΠ΄Ρ‹ позиционирования элСмСнтов Π½Π° страницС, Π½Π°ΠΌ придСтся Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΡ‚ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠŸΠΎΡ‚ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

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

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства float ΠΈΠ»ΠΈ position ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ элСмСнт ΠΈΠ· Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°. Если элСмСнт «Π²Ρ‹ΠΏΠ°Π΄Π°Π΅Ρ‚» ΠΈΠ· Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, Ρ‚ΠΎ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ располоТСны Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅ этого элСмСнта Π±ΡƒΠ΄ΡƒΡ‚ смСщСны Π½Π° Π΅Π³ΠΎ мСсто Π½Π° Π²Π΅Π±-страницС.

БтатичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

БтатичСским Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для всСх элСмСнтов Π½Π° Π²Π΅Π±-страницС. Если ΠΊ элСмСнту Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ свойство position, Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ статичСским ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° Π²Π΅Π±-страницС согласно ΠΎΠ±Ρ‰Π΅ΠΌΡƒ ΠΏΠΎΡ‚ΠΎΠΊΡƒ элСмСнтов.

ΠŸΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ CSS свойств top, left, right ΠΈΠ»ΠΈ bottom ΠΊ статичСски ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ элСмСнту, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Если Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ статичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ значСния static:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
    <style>
      p { position: static; }
    </style>
  </head>

  <body>
    <p>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ†.</p>
	<p>Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π°Π±Π·Π°Ρ†.</p>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

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

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° страницС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’Π°ΠΊΠΈΠ΅ элСмСнты ΡƒΠ΄Π°Π»ΡΡŽΡ‚ΡΡ ΠΈΠ· ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, элСмСнты, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π·Π° фиксированным элСмСнтом, Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, ΡΠΌΠ΅Ρ‰Π°ΡΡΡŒ ΠΈ занимая Π΅Π³ΠΎ мСсто Π½Π° Π²Π΅Π±-страницС.

Π‘Ρ‚ΠΎΠΈΡ‚ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ элСмСнты с фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты, скрывая ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ»ΠΈ частично. ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… страниц, ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ эффСкт Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², ΠΎΡΡ‚Π°Π²Π°ΡΡΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
    <style>
      img {
		position: fixed;
		top: 5%;
		left: 40%
	  }
    </style>
  </head>

  <body>
    <img src="donald.gif">
	 <pre>ВСкст
      ВСкст
      ВСкст
      ВСкст
      ВСкст
      ВСкст
      ВСкст
      Какой-Ρ‚ΠΎ тСкст
      ВСкст
      ВСкст
      ВСкст
      ВСкст
      ВСкст</pre>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΈ статичСскиС элСмСнты, ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π² ΠΎΠ±Ρ‰Π΅ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅. ΠŸΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ свойств top, left, right ΠΈΠ»ΠΈ bottom ΠΊ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ элСмСнтам, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго мСстополоТСния, оставляя пустоС пространство Ρ‚Π°ΠΌ, Π³Π΄Π΅ элСмСнт располагался ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ.

Π’Π°ΠΊΠΈΠ΅ элСмСнты Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° располоТСниС ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΡ… ΠΈΡ… элСмСнтов, ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π½Π° своих мСстах ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚Ρ‹ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ элСмСнтом:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
    <style>
      h3 {
		position: relative;
		top: 30px;
	  }
    </style>
  </head>

  <body>
    <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ уровня.</h2>
	<h3>ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.</h3>
	<h4>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅Π³ΠΎ уровня.</h4>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: элСмСнты с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ (relative) ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π² качСствС родитСля для элСмСнтов с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ (absolute).

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

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ΄Π°Π»ΡΡŽΡ‚ΡΡ ΠΈΠ· ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ освободившССся пространство, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ игнорируя Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты. Π—Π°Ρ‚Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт Π² любоС Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто Π²Π΅Π±-страницы, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства top, left, right ΠΈΠ»ΠΈ bottom.

ВсС Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ блиТайшСго ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ° (Ссли ΠΎΠ½ Π΅ΡΡ‚ΡŒ), Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ свойство position ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ absolute, fixed ΠΈΠ»ΠΈ relative.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
    <style>
      img {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    </style>
  </head>

  <body>
	<img src="image.jpg">
	<p>ИзмСним располоТСниС Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования.<br> 
      Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ страницы.</p>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

ΠŸΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты

Когда элСмСнты находятся Π²Π½Π΅ ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ° страницы, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ порядок располоТСния элСмСнтов соотвСтствуСт ΠΈΡ… порядку Π² HTML-ΠΊΠΎΠ΄Π΅ страницы, ΠΎΠ΄Π½Π°ΠΊΠΎ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ порядком пСрСкрытия с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства z-index, Ρ‡Π΅ΠΌ большС Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ элСмСнт.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
    <style>
      div {
        position: absolute;
        width: 100px;
		height: 100px;
      }
	  .div1 {
		 background-color: #66FFFF;
		 left: 70px;
		 top: 0px;
		 z-index: 1;
	  }
	  .div2 {
		 background-color: #FFFF66;
		 left: 0px;
		 top: 30px;
		 z-index: 0;
	  }
	  .div3 {
		 background-color: #66FF66;
		 left: 33px;
		 top: 60px;
		 z-index: 2;
	  }
    </style>
  </head>

  <body>
	<div>z-index: 1;</div>
	<div>z-index: 0;</div>
	<div>z-index: 2;</div>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² позволяСт Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒ эти ΠΈΡ… нСзависимо ΠΎΡ‚ располоТСния Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов страницы. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π² CSS осущСствляСтся ΠΏΡƒΡ‚Ρ‘ΠΌ указания ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚.

Основной ΠΏΠΎΡ‚ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

Π’Ρ‹ ΡƒΠΆΠ΅ Π·Π½Π°Π΅Ρ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°, Π² соотвСтствии с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ элСмСнты Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° страницС. Они ΠΈΠ΄ΡƒΡ‚ Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π² Ρ‚ΠΎΠΌ порядкС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ находятся Π² ΠΊΠΎΠ΄Π΅ страницы. Π‘Π»ΠΎΠΊΠΎΠ²Ρ‹Π΅ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ с Π½ΠΎΠ²ΠΎΠΉ строки, Π° строчныС Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² строкС.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ΄Ρ‡ΠΈΠ½ΡΡŽΡ‚ΡΡ этим ΠΏΡ€ΠΈΠ°Π²ΠΈΠ»Π°ΠΌ, находятся Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π­Ρ‚ΠΎΡ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π²ΠΎΠ·Π½ΠΈΠΊ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π° страницС совсСм ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ. Для этого элСмСнту Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ установлСно ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ΠŸΡ€ΠΈ этом, ΠΎΠ½ удаляСтся ΠΈΠ· основного ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ Π΅Π³ΠΎ мСсто, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ Π΅Π³ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅Ρ‚. Иногда ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ установлСно свойство float, Ρ‚ΠΎΠΆΠ΅ ΡƒΠ΄Π°Π»ΡΡŽΡ‚ΡΡ ΠΈΠ· основного ΠΏΠΎΡ‚ΠΎΠΊΠ°. Но это Π½Π΅ совсСм ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ строковыС элСмСнты Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ ΠΈΡ… мСсто.

Π’ΠΈΠ΄Ρ‹ позиционирования

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

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ позициционирования Π±Π»ΠΎΠΊΠΎΠ²:

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ размСщаСтся ΠΏΠΎ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌ. ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΎΡΡ‡Ρ‚ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Π³Ρ€Π°Π½ΠΈΡ† страницы ΠΈΠ»ΠΈ ΠΎΡ‚ Π³Ρ€Π°Π½ΠΈΡ† внСшнСго Π±Π»ΠΎΠΊΠ°, Ссли этот Π±Π»ΠΎΠΊ Ρ‚ΠΎΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ смСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ мСста, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ½ Π·Π°Π½ΠΈΠΌΠ°Π» Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π”Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ Π΅Π³ΠΎ мСсто. Оно остаётся пустым, Ссли Π΅Π³ΠΎ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€ΠΎΡŽΡ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты.

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ размСщаСтся ΠΏΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π³Ρ€Π°Π½ΠΈΡ† ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы Ρ‚Π°ΠΊΠΎΠΉ элСмСнт Π½Π΅ двиТСтся вмСстС со всСми элСмСнтами, Π° остаётся Π½Π° ΠΎΠ΄Π½ΠΎΠΌ мСстС Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

БтатичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π­Ρ‚ΠΎ располоТСниС элСмСнта Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ΠΎ Π΅ΡΡ‚ΡŒ, элСмСнт находится Ρ‚Π°ΠΌ, Π³Π΄Π΅ ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π±Π΅Π· позиционирования. Если Π΅ΠΌΡƒ Π·Π°Π΄Π°Π½Ρ‹ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ устанавливаСт свойство position. Оно ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ значСния:

position: absolute; — Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅

position: relative; — ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅

position: fixed; — фиксированноС

position: static; — статичСскоС

Для указания ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ свойства:

left — смСщСниС Π»Π΅Π²ΠΎΠ³ΠΎ края элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ внСшнСго Π±Π»ΠΎΠΊΠ°.

right — смСщСниС ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ внСшнСго Π±Π»ΠΎΠΊΠ°.

top — смСщСниС Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ внСшнСго Π±Π»ΠΎΠΊΠ°.

bottom — смСщСниС Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края элСмСнта ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈΠ»ΠΈ внСшнСго Π±Π»ΠΎΠΊΠ°.

Π­Ρ‚ΠΈ свойства ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

left: auto; — Π±Π΅Π· смСщСния (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

left: Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Π° Π² Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния CSS

left: Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Π° Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…. Если элСмСнт смСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‚ΠΎ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ Ρ€Π°ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. А Ссли Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ смСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ внСшнСго Π±Π»ΠΎΠΊΠ°, Ρ‚ΠΎ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ Ρ€Π°ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π±Π»ΠΎΠΊΠ°.

left: inherit; — Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ принимаСтся ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта

Π£ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… свойств значСния ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Ρƒ left.

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

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнт Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ мСстС страницы. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты, создадим страницу ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° Π½Π΅Ρ‘ Π΄Π²Π° Π±Π»ΠΎΠΊΠ°. Они Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Один ΠΈΠ· Π½ΠΈΡ… Π±ΡƒΠ΄Π΅Ρ‚ с большой высотой. Π­Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ страницы появилась ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΈ Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ Π²Ρ‹ ΠΏΠΎΠΉΠΌΡ‘Ρ‚Π΅, ΠΊΠ°ΠΊ элСмСнты с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ позиционирования Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ основного ΠΏΠΎΡ‚ΠΎΠΊΠ°. Для всСх Π±Π»ΠΎΠΊΠΎΠ² Π½Π° страницС установим Ρ„ΠΎΠ½.

Π‘Ρ‚ΠΈΠ»ΡŒ:

+

7
8
9
10
11
12
13
14
15
16

div
  {
  background-color: #909090;
  }
.stream
  {
  background-color: Blue;
  width: 100px;
  margin-bottom: 2px;
  }

HTML ΠΊΠΎΠ΄:

20
21

<div></div>
<div></div>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° страницу Π±Π»ΠΎΠΊ с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Π£ΠΊΠ°ΠΆΠ΅ΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ слСва ΠΈ свСрху:

Π‘Ρ‚ΠΈΠ»ΡŒ:

17
18
19
20
21
22

#abs_left
  {
  position: absolute;
  left: 40px;
  top: 20px;
  }

HTML ΠΊΠΎΠ΄:

28
29

<div>ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅<br>
слСва свСрху</div>

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт налоТился Π½Π° синий Π±Π»ΠΎΠΊ ΠΈ частично Π·Π°ΠΊΡ€Ρ‹Π» Π΅Π³ΠΎ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ — элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π­Ρ‚ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ². Если Π±Π»ΠΎΠΊΡƒ Π½Π΅ установлСна ΡˆΠΈΡ€ΠΈΠ½Π°, Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ страницы ΠΈΠ»ΠΈ внСшнСго Π±Π»ΠΎΠΊΠ°, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° с ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… отступов. Π­Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π½Π΅ распространяСтся Π½Π° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° страницу Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π½ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ справа ΠΈ снизу:

Π‘Ρ‚ΠΈΠ»ΡŒ:

23
24
25
26
27
28

#abs_right
  {
  position: absolute;
  right: 10px;
  bottom: 60px;
  }

HTML ΠΊΠΎΠ΄:

36
37

<div>ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅<br>
справа снизу</div>

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π‘Π»ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ, Π° Π±Π»ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, останСтся Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Ρ‹ΠΌ.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ΠŸΡ€ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ элСмСнт смСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго полоТСния Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅. Π•Π³ΠΎ мСсто остаётся нСзанятым. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, располоТим ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт Π² ΠΊΠΎΠ΄Π΅ страницы ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, находящимися Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, ΠΌΠ΅Π΄ΠΆΡƒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌΠΈ двумя Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ создали.

Π‘Ρ‚ΠΈΠ»ΡŒ:

29
30
31
32
33
34
35

#rel_left
  {
  position: relative;
  left: 120px;
  top: 10px;
  width: 300px;
  }

HTML ΠΊΠΎΠ΄:

40
41

<div>ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅<br>
слСва свСрху</div>

Как я ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠ½ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½ΠΎ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ этот способ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ элСмСнт ΠΈ помСстим Π΅Π³ΠΎ Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π’Π΅ΠΏΠ΅Ρ€ΡŒ этот Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

Π‘Ρ‚ΠΈΠ»ΡŒ:

36
37
38
39
40
41

#abs_block
  {
  position: absolute;
  left: 5px;
  bottom: 48px;
  }

HTML ΠΊΠΎΠ΄:

46
47
48
49
50
51
52

<div>
  ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅<br> слСва свСрху
  
  <div>
  ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅<br> ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Π»ΠΎΠΊΠ°
  </div>
</div>

Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ с ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ. ΠŸΡ€ΠΈ этом смСщСниС Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡƒΡŽ сторону. НапримСр ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π° элСмСнта Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π½Π΅ Π²Π²Π΅Ρ€Ρ…, Π° Π²Π½ΠΈΠ·. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π·Π°Π΄Π°Π΄ΠΈΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ созданному Π±Π»ΠΎΠΊΡƒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ смСщСниС. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΡƒΠ΄Π° ΠΎΠ½ ΠΏΡ€ΠΈ этом пСрСмСстится:

Часто ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS устанавливаСтся Π±Π΅Π· смСщСния. Π‘Π»ΠΎΠΊ остаётся Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π½ΠΎ становится ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ. Π­Ρ‚ΠΎ дСлаСтся для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π³ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты.

Π’ΠΠ–ΠΠž: По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, элСмСнты Π² основном ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π΅ Π²ΠΎΠ·Π»Π΅ самого края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π° с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ отступом. Π­Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Ρ‚Π΅Π³Π° <body>. Π£ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² этот отступ Ρ€Π°Π·Π½Ρ‹ΠΉ. Из Π·Π° этого Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ элСмСнтов основного ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ элСмСнтов Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚. Для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ отступы Ρ‚Π΅Π³Π° <body> Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌΠΈ. Π’ΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ страницы смСстится ΠΊ краям, ΠΈ элСмСнты основного ΠΏΠΎΡ‚ΠΎΠΊΠ° Π±ΡƒΠ΄Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

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

ЀиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS устанавливаСтся ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ особым элСмСнтам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы ΠΈ всСгда ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π½Π° экранС. ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ. Но ΠΎΠ½ΠΈ Π½Π΅ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ внСшнСго Π±Π»ΠΎΠΊΠ°, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ Π³Ρ€Π°Π½ΠΈΡ† ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π° страницу Π±Π»ΠΎΠΊ с фиксированным ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

Π‘Ρ‚ΠΈΠ»ΡŒ:

42
43
44
45
46
47

#fix
  {
  position: fixed;
  left: 400px;
  top: 10px;
  }

HTML ΠΊΠΎΠ΄:

64

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

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ страницу, Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ фиксированный элСмСнт остаётся Π½Π° мСстС.

Если ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΡƒ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π»Π΅Π²ΡƒΡŽ ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ, Ρ‚ΠΎ это опрСдСляСт Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Π»ΠΎΠΊΠ°. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ, Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ любой Π²ΠΈΠ΄ позиционирования ΠΈ установитС Π΅ΠΌΡƒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈ слСва, ΠΈ справа. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ Ρƒ Π±Π»ΠΎΠΊΠ° получатся Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов ΠΏΠΎ Ρ€Π°Π·Π½Ρ‹ΠΌ сторонам Π±Π»ΠΎΠΊΠ° / Π₯абрЗдравствуйтС, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ. БСгодня я расскаТу Π²Π°ΠΌ ΠΎ малоизвСстном способС разнСсти Π΄Π²Π° элСмСнта ΠΏΠΎ Ρ€Π°Π·Π½Ρ‹ΠΌ сторонам Π±Π»ΠΎΠΊΠ°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ находятся. НапримСр Π²ΠΎΡ‚ Ρ‚Π°ΠΊ

Π”ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ я, ΠΊΠ°ΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· вас, пользовался двумя способами:
  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ способ основан Π½Π° свойствС float. Π›Π΅Π²ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ задаётся float: left, ΠΏΡ€Π°Π²ΠΎΠΌΡƒ float: right
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ right: 0 Π»ΠΈΠ±ΠΎ left: 100%, margin-left: -(ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°)

Π“Π»Π°Π²Π½Ρ‹ΠΉ нСдостаток ΠΎΠ±ΠΎΠΈΡ… способов Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ, Ссли Π±Π»ΠΎΠΊΠΈ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ ΠΈΠ»ΠΈ ΠΏΠΎ срСднСй Π»ΠΈΠ½ΠΈΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Ρ‚ΠΎ приходится ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ ΠΏΠΎΠ΄Π±ΠΎΡ€Π° ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, задавая ΠΈΠΌ Π»ΠΈΠ±ΠΎ top: anyValue, Π»ΠΈΠ±ΠΎ margin-top: anyValue. А Ρƒ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ способа плюс ΠΊΠΎ всСму Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½, Π½Π΅ Ρ‚ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ нСдостаток, Π½ΠΎ нСприятная ΠΌΠ΅Π»ΠΎΡ‡ΡŒ. Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΎΡ‡ΠΈΡ‰Π°Ρ‚ΡŒ ΠΏΠΎΡ‚ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clearFix’a, overflow ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ²Π°.
Π˜Ρ‚Π°ΠΊ способ Π½ΠΎΠΌΠ΅Ρ€ 3. Для Π½Π°Ρ‡Π°Π»Π° ΠΊΠΎΠ΄:
БобствСнно HTML

CopyΒ SourceΒ |Β CopyΒ HTML
  1. <div>
  2. Β Β Β Β <div><a href="#">Π›Π΅Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ</a></div><div><a href="#">ΠŸΡ€Π°Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ</a></div>
  3. </div>

БобствСнно CSS

CopyΒ SourceΒ |Β CopyΒ HTML
  1. .wrap {
  2. Β Β Β Β width: 500px;
  3. Β Β Β Β background: #555;
  4. Β Β Β Β height: 500px;
  5. }
  6. .left, .right {
  7. Β Β Β Β display: inline-block;
  8. Β Β Β Β //display:Β inline;
  9. Β Β Β Β //zoom:Β 1;
  10. Β Β Β Β width: 100%;
  11. Β Β Β Β margin-right: -100%;
  12. Β Β Β Β vertical-align: bottom;
  13. }
  14. .right {
  15. Β Β Β Β text-align: right;
  16. }
  17. .left a, .right a { display: inline-block; position: relative; }
  18. .left a { width: 200px; height: 100px; background: green; }
  19. .right a { width: 100px; height: 200px; background: pink; }

ПояснСния

Π‘ΡƒΡ‚ΡŒ способа Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° посрСдством margin-right: -100% ΠΈ содСрТимоС ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ text-align: right.
Оба Π±Π»ΠΎΠΊΠ° (right ΠΈ left) ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π² ΠΎΠ΄Π½Ρƒ строку, ΠΈΠ½Π°Ρ‡Π΅ ΠΈΠ·-Π·Π° символа пСрСноса строки ΠΏΡ€Π°Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡ΡƒΡ‚ΡŒ-Ρ‡ΡƒΡ‚ΡŒ Π²Ρ‹Π»Π΅Π·Π°Ρ‚ΡŒ Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±Π»ΠΎΠΊΠ°-родитСля.
Бсылкам ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ position: relative, ΠΈΠ½Π°Ρ‡Π΅ ΠΈΠ·-Π·Π° налоТСния Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅.
ΠŸΠ»ΡŽΡΡ‹ способа

Π“Π»Π°Π²Π½Ρ‹ΠΉ плюс Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ для Π½Π°ΡˆΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ vertical-align. И ΠΌΡ‹ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΡ… ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ ΠΈ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.
ΠœΠΈΠ½ΡƒΡΡ‹ способа

А Π³Π»Π°Π²Π½Ρ‹ΠΉ минус Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ, примСняя этот способ, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π²Ρ‘Ρ€Π΄ΠΎ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ содСрТимоС Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ увСличится Π΄ΠΎ Ρ‚Π°ΠΊΠΎΠΉ стСпСни, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π°Ρ‡Π½ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° (ΠΊ слову говоря, способ с Ρ„Π»ΠΎΡƒΡ‚Π°ΠΌΠΈ Π»ΠΈΡˆΡ‘Π½ этого нСдостатка, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ содСрТимого Π±Π»ΠΎΠΊΠΎΠ², ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΡΡ‚Π°Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³Π°).

Бсылка Π½Π° Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

P.S.

Π― Π½Π΅ встрСчал Ρ‚Π°ΠΊΠΎΠ³ΠΎ способа Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, посСму ΠΏΡ€ΠΎΡΡŒΠ±Π°: Ссли ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π½Π°ΠΉΠ΄Ρ‘Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΡƒΡŽ Ρ€Π°Π½ΡŒΡˆΠ΅, сообщитС ΠΌΠ½Π΅ поТалуйста.
Upd.

Π’ коммСнтариях ΠΌΠΎΡ‘ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ»ΠΈ Π½Π° способ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ text-align: justify. Π­Ρ‚ΠΎΡ‚ способ Ρ‚ΠΎΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆ, Π½ΠΎ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ Π΄Π²Π° нСдостатка. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ… ΠΎΠ½ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ввСдСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта, ΡΠΌΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ послСднюю строку тСкстового Π±Π»ΠΎΠΊΠ°, Π° Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, ΠΎΠ½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² IE6-IE7 для Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов.
ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS: ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ€Π°Π· ΠΈ навсСгда

Π’Ρ‹ всС Π΅Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS ΠΈ тСряСтС элСмСнты Π½Π° экранС? Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² этой ΠΌΠ°Π³ΠΈΠΈ.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Когда Π²Ρ‹ устанавливаСтС position: absolute, Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠ»Π°Π½ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π΅ сам элСмСнт, Π° Π΅Π³ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, вСдь ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π³ΠΎ ΠΈ осущСствляСтся ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS. Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ это Π½Π΅ всСгда нСпосрСдствСнный Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ элСмСнта.

Рассмотрим ΠΊΠΎΠ΄ с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Π΄ΠΈΠ²Π°ΠΌΠΈ, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π° ΠΏΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ ΠΌΠ°Ρ‚Ρ€Π΅ΡˆΠΊΠΈ.

<body>
<div>
Β Β <div>
Β Β Β Β <div>
Β Β Β Β Β Β <div></div>
Β Β Β Β </div>
Β Β </div>
</div>
</body>

Π‘Π»ΠΎΠΊΠΈ box-1, box-2 ΠΈ box-3 для красоты ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств margin: auto ΠΈ свойств flex CSS. Π‘Π»ΠΎΠΊ box-4 остаСтся Π² своСй Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

body {
Β Β display: flex;
}

.box-1,
.box-2,
.box-3 {
Β Β display: flex;
Β Β margin: auto;
}

ВсС 4 элСмСнта ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ вСрстка выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

.box-4 Π±Π΅Π· позиционирования

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‡Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ?

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сСбя, элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π½Π°Ρ‚ΡŒ Π΄Π²Π΅ Π²Π΅Ρ‰ΠΈ:

  • ΠΊΠ°ΠΊΠΎΠΉ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ станСт Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ отсчСта;
  • Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ смСщСния ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΡ‡ΠΊΠΈ отсчСта (свСрху, снизу, справа ΠΈΠ»ΠΈ слСва).

Если ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ position: absolute для box-4, этот элСмСнт ΠΏΠΎΠΊΠΈΠ½Π΅Ρ‚ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Но сСйчас ΠΎΠ½ остаСтся Π½Π° своСм мСстС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ смСщСния Π½Π΅ Π·Π°Π΄Π°Π½Ρ‹. Если Π² CSS ΡˆΠΈΡ€ΠΈΠ½Π° элСмСнта Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π°, ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ Π΅Π³ΠΎ содСрТимого (плюс ΠΏΠ°Π΄Π΄ΠΈΠ½Π³ΠΈ ΠΈ Ρ€Π°ΠΌΠΊΠ°).

.box-4 с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±Π΅Π· смСщСния

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ свойства top: 0 ΠΈ left: 0. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ станСт Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ отсчСта для этих ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚. Π•ΠΉ становится блиТайший элСмСнт с нСстатичСской ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ (Ρ‡Π°Ρ‰Π΅ всСго position: relative). box-4 Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΏΠΎΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎ ΠΎΠΏΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ своих ΠΏΡ€Π΅Π΄ΠΊΠΎΠ². Ни box-3, Π½ΠΈ box-2, Π½ΠΈ box-1 Π½Π΅ подходят, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (unset).

Если ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€Π΅Π΄ΠΎΠΊ Π½Π΅ нашСлся, элСмСнт размСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π΅Π»Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (body):

.box-4 с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ элСмСнты Π±Π΅Π· позиционирования

Если ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ position: relative для элСмСнта box-1, Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ отсчСта станСт ΠΎΠ½:

.box-4 с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. .box-1 с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт располагаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ блиТайшСго ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ°.

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΡ‡ΠΊΠ° отсчСта нашлась, всС, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΡˆΠ΅ Π½Π΅Π΅ Π² DOM-Π΄Π΅Ρ€Π΅Π²Π΅, пСрСстаСт ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Если ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ position: relative Ρ‚Π°ΠΊΠΆΠ΅ для box-2, Ρ‚ΠΎ box-4 Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π³ΠΎ, вСдь этот ΠΏΡ€Π΅Π΄ΠΎΠΊ Π±Π»ΠΈΠΆΠ΅.

.box-4 с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. .box-2 с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

Аналогично ΠΈ для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° box-3:

.box-4 с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. .box-3 с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

А Π²ΠΎΡ‚ ΠΈ наглядный красивый CSS-ΠΏΡ€ΠΈΠΌΠ΅Ρ€ поиска ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄ΠΊΠ°:

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ How to understand CSS Position Absolute once and for all.

Π•Ρ‰Π΅ большС ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… статСй ΠΏΠΎ CSS:

CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²

CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС, Ρ‡Ρ‚ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ совсСм Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ готовая страница. Он просто ΠΏΠΈΡˆΠ΅Ρ‚ ΠΊΠΎΠ΄, элСмСнты сами Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° страницС, свСрху Π²Π½ΠΈΠ· (Π±Π»ΠΎΡ‡Π½Ρ‹Π΅) ΠΈ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ (строчныС). Π§Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ написан ΠΊΠΎΠ΄, Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° страницС.

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

Π’ CSS стилях это называСтся ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ (position), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ (static), ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ (relative) ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ (absolute).

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS

ΠŸΡ€ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ, Π±Π»ΠΎΠΊ пСрСмСщаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго исходного полоТСния. Однако прописав Π±Π»ΠΎΠΊΡƒ:

position: relative;

Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, ΠΎΠ½ останСтся Π½Π° мСстС. А ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π±Π»ΠΎΠΊ систСма ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ (top, bottom, left, right), ΠΊΠ°ΠΊ с ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ значСниями.

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° с классом block-yellow находится красный Π±Π»ΠΎΠΊ с классом block-relative. Π’ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠ΅, красный Π±Π»ΠΎΠΊ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π² ΠΊΠΎΠ΄Π΅ прописан послСдним.

<div>исходная позиция
<div>ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ позиция- relative</div>
</div>

Нам Π½Π°Π΄ΠΎ ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ красный Π±Π»ΠΎΠΊ Π²Π½ΠΈΠ· Π½Π° 10 пиксСлСй. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°ΡΠΈΠ»ΡŒΡΡ‚Π²Π΅Π½Π½ΠΎ помСняв ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ красного Π±Π»ΠΎΠΊΠ°. ΠœΡ‹ Ρ‚Π°ΠΊ ΠΈ пишСм top: 10px, Π½ΠΎ Π½Π°Π΄ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΎΡ‚ Ρ‡Π΅Π³ΠΎ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ эти 10 пиксСлСй?

ΠŸΡ€ΠΎΠΏΠΈΡΠ°Π² position: relative, ΠΌΡ‹ ясно Π΄Π°Π΅ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ полоТСния.

.block-yellow {
Β Β background-color: #ffe70f;
}

.block-relative {
Β Β position: relative;
Β Β top: 10px;
Β Β background-color: #ed5b77;
}

На ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ красный Π±Π»ΠΎΠΊ сдвинулся Π²Π½ΠΈΠ·, Π½Π° 10 пиксСлСй Π²Π½ΠΈΠ·, ΠΎΡ‚ своСго ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния.

CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²

Если ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· ΠΊΠΎΠ΄Π° position: relative, Ρ‚ΠΎ Π±Π»ΠΎΠΊ останСтся Π½Π° мСстС. А Ссли вмСсто relative, Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ absolute, Ρ‚ΠΎ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ отсчСт этих 10 пиксСлСй Π±ΡƒΠ΄Π΅Ρ‚ Π²Π΅ΡΡ‚ΠΈΡΡŒ ΠΎΡ‚ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ Π² ΠΈΡ‚ΠΎΠ³Π΅ наш Π±Π»ΠΎΠΊ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ поднимСтся Π²Π²Π΅Ρ€Ρ…, ΠΏΠΎΠ΄Ρ‚ΡΠ³ΠΈΠ²Π°ΡΡΡŒ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΊΡ€ΠΎΠΌΠΊΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. А это Π² наши ΠΏΠ»Π°Π½Ρ‹ Π½Π΅ Π²Ρ…ΠΎΠ΄ΠΈΠ»ΠΎ.

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


CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²

На ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π±Π»ΠΎΠΊ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ, это ΠΊΠΎΠ³Π΄Π° отсчСт систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ вСдСтся ΠΎΡ‚ края Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π·Π°ΠΌΠ΅Π½ΠΈΠ² всСго ΠΎΠ΄Π½ΠΎ слово, ΠΌΡ‹ помСняли ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°.

position: absolute;

Π•ΡΡ‚ΡŒ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ. ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ влияниС ΠΈ Π½Π° строчныС элСмСнты. Если строчному элСмСнту Π·Π°Π΄Π°Ρ‚ΡŒ position: absolute, Ρ‚ΠΎ ΠΎΠ½ станСт вСсти сСбя ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ. Π­Ρ‚ΠΎ Π°Π½Π°Π»ΠΎΠ³ свойству — display: block.

Π­Ρ‚ΠΎ Π΅Ρ‰Ρ‘ Π½Π΅ всё, «Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ» элСмСнт, находящийся Π²Π½ΡƒΡ‚Ρ€ΠΈ «ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ» родитСля, мСняСт свою Ρ‚ΠΎΡ‡ΠΊΡƒ отсчСта ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ родитСля.

<div>
position: relative
<div>
position: absolute;
</div>
</div>

Π‘Π»ΠΎΠΊ с классом block-absolute Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ родитСля block-yellow.

.block-yellow {
Β Β position: relative;
Β Β padding: 10px;
Β Β background-color: #ffe70f;
}

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

.block-absolute {
Β Β position: absolute;
Β Β bottom: 10px;
Β Β left: 10px;
Β Β background-color: #ed5b77;
}

CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²

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

ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠΈ страницы Π±Π»ΠΎΠΊ с position: fixed, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π° мСстС, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ для закрСплСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.

z-index

Π Π°Π·Ρ€ΡƒΠ»ΠΈΠ²Π°Π΅Ρ‚ порядок пСрСкрытия «Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ…» Π±Π»ΠΎΠΊΠΎΠ². Нам Π½Π°Π΄ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ красный Π±Π»ΠΎΠΊ Π±Ρ‹Π» свСрху ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ, Ρ‚ΠΎΠ³Π΄Π° ΠΌΡ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ z-index: 2 для красного ΠΈ z-index: 1 для ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ.

<div>ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ</div>
<div>Π–Π΅Π»Ρ‚Ρ‹ΠΉ</div>

.block-red {
Β Β position: relative;
Β Β z-index: 2;
Β Β background-color: #ffe70f;
}

.block-yelow {
Β Β  position: absolute;
Β Β  top: 20px;
Β Β  z-index: 1;
Β Β  background-color: #ed5b77;
}


CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²
  • CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 28.09.2018 10:23:38
  • CSS ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² ΠœΠΈΡ…Π°ΠΈΠ» Русаков

ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²Ρ‚ΠΎΡ€Π° (ΠœΠΈΡ…Π°ΠΈΠ» Русаков) ΠΈ индСксируСмой прямой ссылкой Π½Π° сайт (http://myrusakov.ru)!

Π”ΠΎΠ±Π°Π²Π»ΡΠΉΡ‚Π΅ΡΡŒ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄Ρ€ΡƒΠ·ΡŒΡ Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅: http://vk.com/myrusakov.
Если Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄Π°Ρ‚ΡŒ ΠΎΡ†Π΅Π½ΠΊΡƒ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅, Ρ‚ΠΎ Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ Π΅Ρ‘ Π² ΠΌΠΎΠ΅ΠΉ Π³Ρ€ΡƒΠΏΠΏΠ΅: http://vk.com/rusakovmy.

Если Π’Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π½Π° сайтС,
Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния: ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния

Если Ρƒ Вас ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π»ΠΈΠ±ΠΎ Ρƒ Вас Π΅ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²Ρ‹ΡΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π²Π½ΠΈΠ·Ρƒ страницы.

Если Π’Π°ΠΌ понравился сайт, Ρ‚ΠΎ размСститС ссылку Π½Π° Π½Π΅Π³ΠΎ (Ρƒ сСбя Π½Π° сайтС, Π½Π° Ρ„ΠΎΡ€ΡƒΠΌΠ΅, Π² ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅):

CSS Layout — ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ Бвойство


Бвойство position ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏ ΠΌΠ΅Ρ‚ΠΎΠ΄ позиционирования, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для элСмСнта (статичСский, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, фиксированный, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ Π»ΠΈΠΏΠΊΠΈΠΉ).


ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ ΠΠ΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡ‚ΡŒ

Бвойство position ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° позиционирования, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ для элСмСнта.

БущСствуСт ΠΏΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ:

  • статичСский
  • ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ
  • исправлСно
  • Π°Π±ΡΠΎΠ»ΡŽΡ‚
  • Π»ΠΈΠΏΠΊΠΈΠΉ

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π·Π°Ρ‚Π΅ΠΌ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ свСрху, снизу, слСва ΠΈ справа свойства.Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, эти свойства Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Ссли позиция свойство устанавливаСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ. Они Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π² зависимости ΠΎΡ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ.


ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ

: статичСская;

HTML-элСмСнты ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ располоТСны статичСски.

На статичСскиС элСмСнты Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ свойства top, bottom, left ΠΈ right.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : статичСский; Π½Π΅ позиционируСтся ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ особым ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ; это всСгда Π² соотвСтствии с Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΊΠΎΠΌ страницы:

Π­Ρ‚ΠΎΡ‚ элСмСнт

ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ: static;

Π’ΠΎΡ‚ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ:

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

Π΄Π΅Π»Π°.статичСскоС {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: статичСскоС; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 3px solid # 73AD21;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »
ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ

: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ; позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния.

Установка свойств top, right, bottom ΠΈ left ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ Π΅Π³ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния. Π”Ρ€ΡƒΠ³ΠΎΠ΅ содСрТимоС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΠΏΡ€ΠΎΠ±Π΅Π»Π°, оставлСнного элСмСнт.

Π­Ρ‚ΠΎΡ‚ элСмСнт

ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ;

Π’ΠΎΡ‚ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ:

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

Π΄Π΅Π»Π°.ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ {
позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
слСва: 30 пиксСлСй; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 3px solid # 73AD21;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ПолоТСниС

: фиксированноС;

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : фиксированный; располагаСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ всСгда остаСтся Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС, Π΄Π°ΠΆΠ΅ Ссли страница прокручиваСтся. Π’Π΅Ρ€ΡˆΠΈΠ½Π°, Бвойства right, bottom ΠΈ left ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для позиционирования элСмСнта.

Ѐиксированный элСмСнт Π½Π΅ оставляСт ΠΏΡ€ΠΎΠ±Π΅Π»Π° Π½Π° страницС, Π³Π΄Π΅ ΠΎΠ½ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ находился Π±Ρ‹.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° фиксированный элСмСнт Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ страницы. Π’ΠΎΡ‚ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ:

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

div.fixed {
position: fixed;
Π½ΠΈΠ·: 0;
справа: 0; Π¨ΠΈΡ€ΠΈΠ½Π°
: 300px; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 3px solid # 73AD21;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

Π­Ρ‚ΠΎΡ‚ элСмСнт

ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ : исправлСно;


ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ

: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ; позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ блиТайшСго ΠΏΡ€Π΅Π΄ΠΊΠ° (вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра, ΠΊΠ°ΠΊ фиксированный).

Однако; Ссли элСмСнт с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΊΠΎΠ², ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚Π΅Π»ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ пСрСмСщаСтся вмСстС с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ страницы.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Β«ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉΒ» элСмСнт — это элСмСнт, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ — Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ статичСский .

Π’ΠΎΡ‚ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π­Ρ‚ΠΎΡ‚ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ;

Π­Ρ‚ΠΎΡ‚ элСмСнт

ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ: absolute;

Π’ΠΎΡ‚ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ:

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

Π΄Π΅Π»Π°.ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ {
позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
ΡˆΠΈΡ€ΠΈΠ½Π°: 400 пиксСлСй; Высота
: 200 пиксСлСй; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 3px solid # 73AD21;
}

div.absolute {
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
Π²Π΅Ρ€Ρ…: 80 пиксСлСй;
справа: 0; Π¨ΠΈΡ€ΠΈΠ½Π°
: 200 пиксСлСй; Высота
: 100 пиксСлСй; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 3px solid # 73AD21;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »
ПолоТСниС

: Π»ΠΈΠΏΠΊΠΎΠ΅;

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ : Π»ΠΈΠΏΠΊΠΈΠΉ; позиционируСтся Π½Π° основС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π›ΠΈΠΏΠΊΠΈΠΉ элСмСнт ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ с фиксированным , Π² зависимости ΠΎΡ‚ полоТСния ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.Он позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π² ΠΎΠΊΠ½Π΅ просмотра Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ достигнута заданная позиция смСщСния, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΠ½ «закрСпится» Π½Π° мСстС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, позиция: фиксированная).

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Internet Explorer, Edge 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΠ΅ вСрсии Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ фиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Safari Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ -webkit- прСфикс (см. ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅). Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ , ΠΏΡ€Π°Π²Ρ‹ΠΉ , Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈΠ»ΠΈ Π»Π΅Π²Ρ‹ΠΉ для Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ для Ρ€Π°Π±ΠΎΡ‚Ρ‹.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π»ΠΈΠΏΠΊΠΈΠΉ элСмСнт ΠΏΡ€ΠΈΠ»ΠΈΠΏΠ°Π΅Ρ‚ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы ( top: 0 ), ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ достигнСтС полоТСния ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

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

div.sticky {
position: -webkit-sticky; / * Safari * /
позиция: Π»ΠΈΠΏΠΊΠΈΠΉ;
Π²Π΅Ρ€Ρ…: 0;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
Π³Ρ€Π°Π½ΠΈΡ†Π°: 2px solid # 4CAF50;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠŸΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ элСмСнты

Когда элСмСнты располоТСны, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты.

Бвойство z-index опрСдСляСт порядок стСка элСмСнта (ΠΊΠ°ΠΊΠΎΠΉ элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π°Π΄ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ…).

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ порядок Π² стСкС:

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ z-индСкс -1, ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π·Π° тСкстом.

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

IMG {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅;
слСва: 0px;
Π²Π΅Ρ€Ρ…: 0px;
z-индСкс: -1;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам "

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ с Π±ΠΎΠ»Π΅Π΅ высоким порядком стСка всСгда находится ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтом с Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΌ порядком стСков.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Если Π΄Π²Π° ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнта ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π±Π΅Π· z-индСкса ΡƒΠΊΠ°Π·Π°Π½, элСмСнт, располоТСнный послСдним Π² ΠΊΠΎΠ΄Π΅ HTML, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½ свСрху.


ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ

Как Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ тСкст ΠΏΠΎΠ²Π΅Ρ€Ρ… изобраТСния:


Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

УстановитС Ρ„ΠΎΡ€ΠΌΡƒ элСмСнта
Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ элСмСнта. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ обрСзаСтся Π΄ΠΎ этой Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ отобраТаСтся.


ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒ сСбя упраТнСниями!


ВсС CSS свойства позиционирования

ΠΠ΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡ‚ΡŒ ОписаниС
Π½ΠΈΠ· УстанавливаСт Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡ€Π°ΠΉ поля для ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°
ΠΊΠ»ΠΈΠΏ Π—Π°ΠΆΠΈΠΌΡ‹ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта
ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ УстанавливаСт ΠΊΡ€Π°ΠΉ Π»Π΅Π²ΠΎΠ³ΠΎ поля для ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°
позиция Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΈΠΏ позиционирования для элСмСнта
ΠΏΡ€Π°Π²Ρ‹ΠΉ УстанавливаСт ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ поля для ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°
Ρ‚ΠΎΠΏ УстанавливаСт ΠΊΡ€Π°ΠΉ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ поля для ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°
z-index УстанавливаСт порядок стСка элСмСнта

,

CSS позиция свойство


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

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ элСмСнт

:

h3 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅;
слСва: 100 пиксСлСй;
Π²Π΅Ρ€Ρ…: 150 пиксСлСй;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам "

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ "ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами".


ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ использованиС

Бвойство position опрСдСляСт Ρ‚ΠΈΠΏ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° позиционирования, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ для элСмСнт (статичСский, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ, фиксированный ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹ΠΉ).

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: статичСский
НаслСдуСтся: Π½Π΅Ρ‚
Анимационный: Π½Π΅Ρ‚. Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
ВСрсия: CSS2
Бинтаксис JavaScript: ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ .style.position = "Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ" ΠŸΠΎΠΏΡ‹Ρ‚Π°ΠΉΡΡ

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

Числа Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, которая ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ свойство.

ΠΠ΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡ‚ΡŒ
позиция 1,0 7,0 1.0 1,0 4,0

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ sticky Π½Π΅ поддСрТиваСтся Π² Internet Explorer ΠΈΠ»ΠΈ Edge 15 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсиях.



Бинтаксис CSS

позиция: статичСская | Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ | фиксированная | ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ | липкая | Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ;

ЗначСния нСдвиТимости

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ОписаниС Π‘Ρ‹Π³Ρ€Π°ΠΉΡ‚Π΅
статичСский Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² порядкС, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² Π‘Ρ‹Π³Ρ€Π°ΠΉΡ‚Π΅ Β»
Π°Π±ΡΠΎΠ»ΡŽΡ‚ Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ своСго ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ (Π½Π΅ статичного) элСмСнта-ΠΏΡ€Π΅Π΄ΠΊΠ° Π‘Ρ‹Π³Ρ€Π°ΠΉΡ‚Π΅ Β»
исправлСно Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ располоТСн ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π‘Ρ‹Π³Ρ€Π°ΠΉΡ‚Π΅ Β»
ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ располоТСн ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния, поэтому Β«left: 20pxΒ» добавляСт 20 пиксСлСй Π² Π»Π΅Π²ΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ элСмСнта Π‘Ρ‹Π³Ρ€Π°ΠΉΡ‚Π΅ Β»
Π»ΠΈΠΏΠΊΠΈΠΉ Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ позиционируСтся Π½Π° основС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

Π›ΠΈΠΏΠΊΠΈΠΉ элСмСнт ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ фиксированной , Π² зависимости ΠΎΡ‚ полоТСния ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.Он позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π² ΠΎΠΊΠ½Π΅ просмотра Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ достигнута заданная позиция смСщСния, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΠ½ «закрСпится» Π½Π° мСстС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, позиция: фиксированная).

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: НС поддСрТиваСтся Π² IE / Edge 15 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½Π΅ΠΉ вСрсии. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ Π² Safari с вСрсии 6.1 с прСфиксом -webkit-.
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ Β»
Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ УстанавливаСт для этого свойства Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Ρ… Π‘Ρ‹Π³Ρ€Π°ΠΉΡ‚Π΅ Β»
Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ УнаслСдуСт это свойство ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

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

Как ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния:

h3.pos_left {
позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
слСва: -20px;
}

h3.pos_right {позиция
: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
слСва: 20 пиксСлСй;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам "

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

Π‘ΠΎΠ»ΡŒΡˆΠ΅ позиционирования:

# parent1 {
position: static; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 1px сплошной синий; Π¨ΠΈΡ€ΠΈΠ½Π°
: 300 пиксСлСй;
высота: 100 пиксСлСй;
}

# child1 {
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 1px, сплошной красный;
Π²Π΅Ρ€Ρ…: 70px;
справа: 15px;
}

# parent2 {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 1px сплошной синий;
ΡˆΠΈΡ€ΠΈΠ½Π°: 300 пиксСлСй; Высота
: 100 пиксСлСй;
}

# child2 {
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ; Π“Ρ€Π°Π½ΠΈΡ†Π°
: 1px, сплошной красный; ВСрхняя Ρ‡Π°ΡΡ‚ΡŒ
: 70px;
справа: 15 пиксСлСй;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам "

БвязанныС страницы

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ CSS: ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ CSS

HTML DOM ссылка: свойство ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ


,

css - ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Div - ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка

ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка
  1. Π’ΠΎΠ²Π°Ρ€Ρ‹
  2. ΠšΠ»ΠΈΠ΅Π½Ρ‚Ρ‹
  3. Π‘Π»ΡƒΡ‡Π°ΠΈ использования
  1. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка ΠŸΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹Π΅ вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹
  2. ΠšΠΎΠΌΠ°Π½Π΄Ρ‹ ЧастныС вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ для вашСй ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹
  3. прСдприятиС ЧастныС вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ для вашСго прСдприятия
  4. Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ связанныС с Π½ΠΈΠΌ тСхничСскиС возмоТности ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠ³ΠΎ роста
  5. Π’Π°Π»Π°Π½Ρ‚ ΠΠ°Π½ΠΈΠΌΠ°Ρ‚ΡŒ тСхничСский Ρ‚Π°Π»Π°Π½Ρ‚
.
HTML - Div Π²Ρ‹ΡˆΠ΅ позиционирования div с использованиСм CSS

ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка
  1. Π’ΠΎΠ²Π°Ρ€Ρ‹
  2. ΠšΠ»ΠΈΠ΅Π½Ρ‚Ρ‹
  3. Π‘Π»ΡƒΡ‡Π°ΠΈ использования
  1. ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ стСка ΠŸΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹Π΅ вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹
  2. ΠšΠΎΠΌΠ°Π½Π΄Ρ‹ ЧастныС вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ для вашСй ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹
  3. прСдприятиС ЧастныС вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ для вашСго прСдприятия
  4. Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ связанныС с Π½ΠΈΠΌ тСхничСскиС возмоТности ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠ³ΠΎ роста
  5. Π’Π°Π»Π°Π½Ρ‚ ΠΠ°Π½ΠΈΠΌΠ°Ρ‚ΡŒ тСхничСский Ρ‚Π°Π»Π°Π½Ρ‚
  6. Ρ€Π΅ΠΊΠ»Π°ΠΌΠ° Π‘Π²ΡΠ·Π°Ρ‚ΡŒΡΡ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ ΠΏΠΎ всСму ΠΌΠΈΡ€Ρƒ
,