CSS Position

Март 5, 2021

Содержание

2. Занятие на тему: CSS Position Горбачевский Валерий
3. CSS Position 3 Запихни это куда хочешь!
4. Встречайте свойство "position" 4
5. position: static; static является значением по умолчанию. Элемент с position: static; отображается как обычно и не
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. Задание 15 Добавьте разные значения top, left, а потом position:relative;
16. Задание 2 16
17. Задание 3 17
18. Overflow 18
19. Overflow и box-shadow 19
21. Скачать презентацию

Слайд 2

Занятие на тему: CSS Position
Горбачевский Валерий

Занятие на тему: CSS Position Горбачевский Валерий

Слайд 3

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

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

Слайд 4

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

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

Слайд 5

position: static;
static является значением по умолчанию. Элемент с position: static; отображается как

position: static; static является значением по умолчанию. Элемент с position: static; отображается

обычно и не будет позиционироваться каким-либо специальным способом, он просто плюхнется вниз.

5

Слайд 6

position: relative;
6

position: relative; 6

Слайд 7

position: relative;
7

position: relative; 7

Слайд 8

position: absolute;
8

position: absolute; 8

Слайд 9

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

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

окну браузера. Однако, систему координат можно изменить.

Слайд 10

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

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

Слайд 11

Absolute Centering
11

Absolute Centering 11

Слайд 12

CSS Padding hack
12

CSS Padding hack 12

Слайд 13

position: fixed;
13

position: fixed; 13

Слайд 14

z-index
14

z-index 14

Слайд 15

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

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

Слайд 16

Задание 2
16

Задание 2 16

Слайд 17

Задание 3
17

Задание 3 17

Слайд 18

Overflow
18

Overflow 18

Слайд 19

Overflow и box-shadow
19

Overflow и box-shadow 19