CSS Position

1. POWERCODE ACADEMY

2. Занятие на тему: CSS Position

Горбачевский Валерий

3. CSS Position

Запихни это куда хочешь!
3

4. Встречайте свойство "position"

Встречайте свойство "position"
4

5. position: static;

static является значением по умолчанию.
Элемент с position: static; отображается как
обычно и не будет позиционироваться какимлибо специальным способом, он просто
плюхнется вниз.
5

6. position: relative;

6

7. position: relative;

7

8. position: absolute;

8

9. Точка отсчета координат

По умолчанию «абсолютные»
элементы позиционируются в
системе координат, привязанной
к окну браузера. Однако, систему
координат можно изменить.
9

10. схлопывание родителя если ему не заданы размеры:

10

11. Absolute Centering

11

12. CSS Padding hack

12

13. position: fixed;

13

14. z-index

14

15. Задание

Добавьте разные значения top, left, а потом position:relative;
15

16. Задание 2

16

17. Задание 3

17

18. Overflow

18

19. Overflow и box-shadow

19

20. Спасибо!

Есть вопросы?
Вы можете связаться со мной
mail: [email protected]
Telegram/Viber: +380954382408
Skype: valerij.gorbachevskij
20