Скачать "CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Вертикальный текст. CSS свойства writing-mode и text-orientation. #Shorts Следующее видео: Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150

0:00

Вступление

0:32

Подготовка к уроку

3:56

Position

4:36

relative

6:53

свойство z-index со значением relative

8:53

absolute

14:01

свойство z-index со значением absolute

14:54

fixed

16:43

свойство z-index со значением fixed

17:08

sticky

20:34

Подводные камни использования absolute

23:56

Примеры

28:43

Методичка

28:53

Напутствие

Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150

Адаптивная верстка интернет магазина с НУЛЯ. Выполняю реальный заказ. Верстка сайта за $150

Канал: ДЕН - подорожую та програмую

Вертикальный текст. CSS свойства writing-mode и text-orientation. #Shorts

Вертикальный текст. CSS свойства writing-mode и text-orientation. #Shorts

Канал: Фрілансер по життю

CSS свойство BACKGROUND. Делаем фон для сайта // Уроки HTML CSS JS. Урок №9

CSS свойство BACKGROUND. Делаем фон для сайта // Уроки HTML CSS JS. Урок №9

Канал: Фрілансер по життю

Свойства и стили оформления блоков. CSS opacity. Уроки HTML CSS JS. Урок №8

Свойства и стили оформления блоков. CSS opacity. Уроки HTML CSS JS. Урок №8

Канал: Фрілансер по життю

ВЕРСТКА САЙТА ($70) ВЫПОЛНЯЕМ РЕАЛЬНЫЙ ЗАКАЗ

ВЕРСТКА САЙТА ($70) ВЫПОЛНЯЕМ РЕАЛЬНЫЙ ЗАКАЗ

Канал: ДЕН - подорожую та програмую

Як накласти кольоровий фон на зображення html css

Як накласти кольоровий фон на зображення html css

Канал: Кодимо солов'їною

HTML уроки. HTML теги форм. HTML input. Уроки HTML CSS JS. Урок №4

HTML уроки. HTML теги форм. HTML input. Уроки HTML CSS JS. Урок №4

Канал: Фрілансер по життю

CSS псевдоклассы. Псевдокласс HOVER и другие. Уроки HTML CSS JS. Урок №10

CSS псевдоклассы. Псевдокласс HOVER и другие. Уроки HTML CSS JS. Урок №10

Канал: Фрілансер по життю

CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5

CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5

Канал: Фрілансер по життю

CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6

CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6

Канал: Фрілансер по життю

CSS позиционирование простыми словами

просто о CSS позиционировании

CSS позиционирование

Уроки HTML CSS JS

позиционирование css

css position

CSS position примеры

CSS позиционирование примеры

фрилансер по жизни

css с нуля

css обучение

верстка с нуля

верстка сайтов

position absolute

position fixed

position sticky

position relative

CSS уроки с нуля

Верстка сайтов с нуля

css уроки

css

html

css3

фрилансерпожизни

обучение

cssposition

00:00:02

познакомимся замечательными сердце

00:00:04

свойствами позиционирования элементов

00:00:07

различные seas с позиционирования очень

00:00:09

часто используются при верстке

00:00:11

современных макетов это и различные

00:00:13

выпадающее меню и всплывающие окна так

00:00:16

называемые попапы это и липкий федор

00:00:19

который следует за нами при скроле и

00:00:22

всяческое нестандартное расположение

00:00:24

элементов и так далее но пользоваться

00:00:28

этими крутыми возможностями нужно очень

00:00:31

грамотно сначала познакомимся со всеми

00:00:34

свойствами позиционирования а потом

00:00:36

немного попрактикуемся я уже создал

00:00:38

новый проект и добавил его в редактор

00:00:40

кода для демонстрации я создам несколько

00:00:43

блоков главный родительский блок и три

00:00:50

дочерних

00:00:52

вот таким образом содержимое дочерних

00:00:56

блоков я вставлю

00:00:58

именно их класса для того чтобы мы

00:01:02

видели с каким именно блоком мы работаем

00:01:06

сейчас все это выглядит таким образом но

00:01:09

ненадолго переносим наши классы файлик

00:01:14

си эс эс сразу

00:01:17

для боди я сделаю внутренний отступ

00:01:20

чтобы наши блоки не были прибиты

00:01:23

границы далее немного преобразим наши

00:01:26

блоки

00:01:27

родительский блок я отвернул в границу

00:01:31

толщиной 5 пикселей красного цвета

00:01:34

ограничу его по ширине

00:01:36

это у меня блочные элементы мы знаем что

00:01:40

он по умолчанию 100 процентов ширины

00:01:42

родители занимает так вот я хочу

00:01:44

ограничить его ширину до 800 пикселей и

00:01:48

применен к нему такой интересный

00:01:50

параметр как мэр джон с 0 авто

00:01:54

свойствами джин это внешний отступ но со

00:01:57

значением 0 авто он заставляет блочный

00:02:01

элемент который ограничен по ширине

00:02:03

выстроится по центру браузер добавим еще

00:02:08

высоту и посмотрим что у нас получилось

00:02:10

вот собственно наш результат

00:02:12

отлично дальше работаем с дочерними

00:02:16

элементами каждый окрасим в некий фон

00:02:23

так также я укажу

00:02:25

line хай 50 пикселей увеличу размер

00:02:31

шрифта сделаю жирным и поставлю по

00:02:34

центру также я хочу изменить свойства

00:02:38

шрифта arial который мне нравится больше

00:02:42

так первый блок я сверстал посмотрю что

00:02:45

получилось отлично что-то похожее

00:02:49

применим и к следующим блоком но чтобы

00:02:53

не копировать похожие стиле

00:02:56

я могу обратиться к селектору типа def

00:03:03

то есть это за этой записью и обращаюсь

00:03:06

ко всем div в ко всем таком div внутри

00:03:09

дива с классом блок и ракет те параметры

00:03:14

которые у меня общие для всех трех

00:03:16

дочерних блоков я переношу сюда а

00:03:20

отличие допустим цвет фона я уже вынесу

00:03:23

по классам разнесу по классу

00:03:29

и вот так отлично смотрим ну хорошо

00:03:34

что-то похожее можно здесь вот изменить

00:03:37

цвет на белый

00:03:38

чтобы лучше читалось вот то есть у нас

00:03:43

есть три простых блока самых обычных

00:03:46

далее мы начнем применять к ним свойства

00:03:50

позиционирования с разными значениями и

00:03:53

посмотрим как они себя будут вести и

00:03:55

главное основное свойство

00:03:58

позиционирования так и называются позишн

00:04:00

и его значение по умолчанию это стати

00:04:05

свойство позиция устанавливайте

00:04:08

позиционирования элемента относительно

00:04:10

других элементов либо окна браузера при

00:04:14

значение по умолчанию static все наши

00:04:16

блоки выводятся как обычно на них не

00:04:19

действуют дополнительные свойства о

00:04:21

которых мы поговорим чуть чуть позже то

00:04:24

есть позиция static фактически

00:04:27

указывается для всех блоков просто ну по

00:04:30

умолчанию поэтому мы не где этот

00:04:34

параметр не пишет следующее значение

00:04:37

свойства позиция намного интересней и

00:04:41

называется она лэйте

00:04:44

положение элемента устанавливается

00:04:46

относительно его

00:04:48

и изначального положения в коде о чем

00:04:52

идет речь позиция на рыло и tiff может

00:04:55

использоваться дополнительно с новыми

00:04:59

свойствами позиционирования такими котле

00:05:02

вт top right и bottom используя параметр

00:05:13

позишн мир лайков и дополнительные

00:05:16

свойства позиционирования мы можем

00:05:19

сдвигать наш элемент пусть по

00:05:23

горизонтали либо по вертикали

00:05:24

относительно его текущего положения

00:05:26

например наш блок который сейчас у нас

00:05:31

спокойненько себе стоит и либо лежит не

00:05:35

ясно я хочу его сдвинуть влево на 50

00:05:39

пикселей

00:05:40

и вверх на 60 от верха точнее вот лево

00:05:46

на 50 отступить сдвинуть и сверху

00:05:50

отступить либо сдвинуть получается вниз

00:05:53

на 60 пикселей ясное дело что мы не

00:05:56

можем одновременно использовать left и

00:05:58

right

00:05:59

это понятно потому что диссонанс

00:06:01

происходит также как и top и bottom

00:06:04

мы можем использовать что-то одно

00:06:05

горизонталь и вертикаль поэтому эти

00:06:08

параметры эти свойства я пока уберу и

00:06:11

так life 50 top 60 позиций умерла эти

00:06:16

все это мы пишем для блока с классом

00:06:20

блок 2 смотрим и так мы видим что наш

00:06:25

блок 2

00:06:27

сдвинулся на указанные нами

00:06:30

параметры относительно своего

00:06:32

местоположения вместо себя он оставил

00:06:34

пустое пространство размером который он

00:06:39

собственно занимал все остальные блоки

00:06:42

остались в медвежьем то есть они

00:06:44

остались на тех же местах на них ничего

00:06:47

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

00:06:51

наш блог

00:06:53

помимо дополнительных свойств лев top

00:06:56

right и bottom к позиций армейцев можно

00:06:59

применить еще одно дополнительное

00:07:01

свойство это за тэн z-index

00:07:05

указывается его значение могут быть

00:07:07

простые цифры по умолчанию это 0 то есть

00:07:10

у всех блоков по умолчанию z-index 0 и

00:07:15

включается он начинает работать только

00:07:18

когда значение свойства позиция у нас

00:07:22

указан relay тиф а также следующее

00:07:24

значение которых мы сейчас будем

00:07:26

говорить задачи зад индекса является

00:07:29

контроль положение элементов которые так

00:07:34

или иначе за позиционирован и

00:07:36

по оси z звучит сложно но я сейчас все

00:07:41

покажу допустим мы видим что сейчас у

00:07:45

нас блок 2

00:07:47

перекрывает блок 3 но если от блоку 3

00:07:51

применю позиций орла и тиф и

00:07:53

укажу ему зад индекс большей чем у блока

00:07:57

два блока 2 у нас ноль это по умолчанию

00:07:59

допустим я укажу 2 set индекс 2

00:08:03

то мы увидим что наш блок 3 а перекрыл

00:08:08

блок 2 то есть по оси z по только на

00:08:11

которую мы вот смотрим монитор да у нас

00:08:14

блок 3 стал главнее он накрыл блок 2

00:08:19

соответственно если мы укажем зад yandex

00:08:22

блока два больше чем у блока 3 например

00:08:25

зад индекс 3

00:08:27

то все опять вернется блок 2 станет

00:08:31

опять как бы главнее и перекроет собой

00:08:33

блок 3 z-index тоже очень часто

00:08:37

используются верстки вспоминаем те же

00:08:40

попапы выпадающее меню и так далее где

00:08:43

надо чтобы меню например выпало поверх

00:08:46

до каких-то блоков

00:08:48

тут и вступает в игру наш z-index

00:08:52

следующее значение свойства позиция это

00:08:55

позиция абсолют абсолютное

00:08:57

позиционирование простыми словами блок

00:09:01

которому применена абсолютное

00:09:02

позиционирование

00:09:04

как будто вырывается из потока из грубо

00:09:09

говоря html кода и зависает в воздухе он

00:09:12

перестаёт иметь какую какие-то размеры

00:09:16

физически сейчас покажу вот наш блок

00:09:20

нашему блоку 2 применен применен

00:09:23

параметр позишн абсолют также он

00:09:26

обязательно должен сопровождаться

00:09:28

дополнительными свойствами

00:09:29

позиционирования например я его размещаю

00:09:32

сверху сверху слева в углу топ 0 of 0 их

00:09:39

можно не указывать но разные браузеры

00:09:41

будут по-разному реагировать и

00:09:44

по-разному позиционировать блок поэтому

00:09:47

если мы хотим чтобы нас аббала везде

00:09:49

одинаково мы должны жестко рассказать

00:09:53

нашим браузером где мы хотим видеть наш

00:09:55

элемент поэтому позиция на абсолют

00:09:58

значит используйте дополнительные

00:10:01

свойства указания позиции итак смотрим

00:10:05

на наш блог

00:10:06

обновляем и мы видим что он куда-то

00:10:09

улетел мало того что он куда-то улетел в

00:10:12

него пропала его ширина

00:10:15

мы знаем что у блочных элементов ширина

00:10:17

100 процентов он себя начал вести как

00:10:20

строчный элемент а именно его ширина

00:10:24

стала равна ширине его контента и он

00:10:27

прилип у нас к верхнему левому углу

00:10:30

всего браузера почему к верхнему левому

00:10:34

еще раз потому что мы указали вот эти

00:10:38

два параметра топ 0 лифт 0 более того мы

00:10:44

видим что на его месте где он у нас был

00:10:47

между блоком 1 и блоком 3

00:10:50

все исчезло как я уже и говорил он как

00:10:53

будто выдернулся и защищаем all кода и

00:10:56

завис где-то в воздухе там где мы его за

00:11:00

позиционировали дополнительными

00:11:02

свойствами по горизонтали и по вертикали

00:11:04

вот и пространство который он занимал

00:11:07

между блоками блоком 1 и блоком 3

00:11:11

она исчезла поэтому блок 3 как бы занял

00:11:14

его место блок 2 выдернулся все что ниже

00:11:18

по двинулась вверх по ходу в чем прикол

00:11:22

абсолютного позиционирования и как

00:11:25

сделать так чтобы можно было

00:11:27

позиционировать абсолютный элемент

00:11:29

относительно другого элемента как раз

00:11:32

абсолютным позиционированием

00:11:33

и строятся большинство элементов это

00:11:36

меню выпадающие попапы и так далее так

00:11:40

далее так далее но работает она классно

00:11:44

тогда когда мы можем его позиционировать

00:11:47

относительно допустим родителям для того

00:11:50

чтобы наш блог 2

00:11:52

мы могли позиционировать относительно

00:11:56

нашего родительского элемента я

00:11:58

напоминаю это у нас блок вот с этой

00:12:01

красной рамочкой и класс у него блок нам

00:12:06

родительскую родительскому элементу

00:12:08

относительно которого мы хотим

00:12:10

позиционировать наш абсолютный элемент

00:12:13

нужно добавить параметр позишн армейцев

00:12:17

теперь а

00:12:18

благодаря этому параметру наш блок 2

00:12:21

станет позиционироваться

00:12:24

относительно уже своего родителя дива с

00:12:28

классом блок смотрим а по и теперь в

00:12:31

месяц вместо верхнего левого угла окна

00:12:34

браузера наш блог позиционируется

00:12:37

относительно родителя которому применен

00:12:41

позиция relay тиф и соответственно

00:12:44

теперь у нас уже больше как бы гибкости

00:12:48

теперь мы можем брать абсолютный элемент

00:12:51

и позиционировать его относительно того

00:12:54

чего мы хотим также решать вопрос

00:12:59

размера да как я говорил что наш блог

00:13:03

перестает быть собственно блочным и вот

00:13:05

так вот он схлопывается тут мы можем

00:13:08

только указывать размер например 100

00:13:11

процентов ширины сто процентов ширины и

00:13:14

наш блок вот так вот были сняты накрыв

00:13:17

собой все что под ним заняв всю ширину

00:13:21

родителя которые я напомню которому я

00:13:24

напомню применен позиций мир лаять и

00:13:26

также мы можем блок

00:13:29

естественно двигать там сверху допустим

00:13:32

на 20 пикселей слева на 30 пикселей

00:13:35

отодвиньте вот таким образом также чтобы

00:13:40

показать немножко по-другому допустим

00:13:44

использовал другие свойства right bottom

00:13:48

например вот так и соответственно снизу

00:13:52

отступил наш блог на 30 и справа на 20

00:13:57

то есть на указанные нами значением вот

00:14:00

таким вот образом так же каких позиций

00:14:03

армейцев позиция абсолют будет

00:14:05

действовать z-index

00:14:06

я верну

00:14:09

блок наверх вот он собой накроет другие

00:14:13

блоки и теперь опять опять применив

00:14:17

позицию на флейте и указав больше

00:14:19

z-index больше 0 потому что здесь

00:14:23

z-index вообще не указан мы увидим что

00:14:26

блок 3 станет главнее

00:14:28

и накроет блок 2 то же самое если укажу

00:14:32

для блока 1 он также себя поведет тоже

00:14:35

собой накроет наш абсолютный элемент для

00:14:40

демонстрации следующего значения

00:14:42

свойства позициям вернемся на исходную

00:14:44

позицию а именно уберем всякие

00:14:47

позиционированию блоков вот вернемся как

00:14:52

бы как было и а значит очень интересные

00:14:56

классное классное значение свойства

00:14:59

позиция это позиция fixed он также как и

00:15:05

абсолют вырывает блок из потока но он в

00:15:13

отличие от абсолюта фиксируется сугубо

00:15:16

по окну браузер то есть мы видим что в

00:15:22

нашем родительском элементе добавлен

00:15:24

параметр позишн орла и тем

00:15:27

соответственно мы абсолю когда мы

00:15:29

применяли абсолют мы могли блок

00:15:31

позиционировать относительно родителя то

00:15:35

сейчас

00:15:36

указав также но значение fixed для блока

00:15:40

2 и обновив мы увидим что он все равно

00:15:44

будет позиционирован относительно окна

00:15:47

браузера независимости от того есть у

00:15:50

родителя позиций армейцев

00:15:51

или нет а также фиксирует его что значит

00:15:54

фиксирует для того чтобы

00:15:56

продемонстрировать я увеличу наш

00:15:58

родительский блок и увеличу его в высоту

00:16:02

чтобы у нас появился скраб на странице

00:16:04

вот и начну страницу скролить весь

00:16:09

контент у нас содержимое у нас едет

00:16:11

вместе со скромным кроме

00:16:13

блока который зафиксирован мы также

00:16:16

видим что

00:16:18

схлопнулся как и в случае с абсолютным

00:16:20

элементом то есть его ширина стала равна

00:16:24

ширине

00:16:25

его содержимого поэтому так же как и для

00:16:28

абсолютного блока мы можем регулировать

00:16:30

его размеры с помощью

00:16:33

быть и хай вот так и теперь про скроле

00:16:38

vaio контенту нас блок

00:16:39

всегда будет при битва так вот к верхней

00:16:42

части свойство z-index для него работает

00:16:45

аналогично предыдущим примерам если

00:16:48

блоку 3 добавлю позиций на рыло и tiff

00:16:51

иззат индекс который больше чем у блока

00:16:54

2 например z-index 2 обновив страницу и

00:16:58

начав скролить мы увидим что блок 3

00:17:01

накрывает собой

00:17:02

adblock 2 и получается вот такой вот

00:17:05

интересный эффект

00:17:07

ну и наконец последнее значение свойства

00:17:10

позиция это позиция стики

00:17:13

что означает липкий применяя этот

00:17:17

параметр позиция со значением стики мы

00:17:21

наделяем наш блог таким гибридом между

00:17:26

позиция static то есть по умолчанию и

00:17:29

позицию fixed указав дополнительное

00:17:33

свойство top' со значением 0 наш блок 2

00:17:38

для которого указан параметр позишн

00:17:40

стики превратиться из static

00:17:43

fixed в тот момент когда при скроле

00:17:46

верхняя граница браузера достигнет его

00:17:50

положение о чем идет речь

00:17:52

посмотрим и увидим что у нас все как

00:17:56

было изначально то есть блоки в позицию

00:17:58

static но в тот момент когда мы начинаем

00:18:01

скролить а именно когда верхняя граница

00:18:04

браузеру достигает нашего липкого блока

00:18:07

он прилипает и его его действие уже

00:18:12

схоже с действием при позишн fixed

00:18:16

только в этом случае блок располагается

00:18:21

не относительно окна браузера как это

00:18:23

при значении fixed a относительно

00:18:27

родителя то есть указав позиция стики

00:18:31

для блока его родитель относи сразу

00:18:34

автоматически становится как бы грубо

00:18:37

говоря коробкой для вот этого вот

00:18:39

липкого

00:18:40

элемента вот на первый взгляд очень

00:18:45

интересное и полезное свойство да то

00:18:47

есть даже в начале ролика я показывал

00:18:50

как работает вот липкое меню и наверно

00:18:53

ты думаешь что именно вот таким образом

00:18:55

это и делать честно говоря я не

00:18:57

использую это значение по одной простой

00:19:00

причине у него еще недостаточная

00:19:04

поддержка браузерами как мы знаем

00:19:07

кроссбраузерность это очень важно для

00:19:09

работы любого мастера по верстке

00:19:12

поэтому я использую для этих целей

00:19:14

конфигурацию

00:19:16

позиция fixed плюс там иногда

00:19:19

джесс код и обо всем этом я конечно буду

00:19:21

рассказывать в наших уроках в дальнейшем

00:19:24

ну вот такое интересное такое интересное

00:19:27

значение есть и я ним тоже говорю

00:19:32

дополнительным приколом будет добавить

00:19:34

еще один блок какой-то 4 вот выкрасить

00:19:42

его скажем как 1 и тоже добавить ему по

00:19:46

здешним стеки и

00:19:53

демонстрация того что первый блок он

00:19:56

будет ехать только до того пока верхняя

00:20:01

граница браузера не достигнет следующего

00:20:03

липкого блока и дальше у нас поедет уже

00:20:06

а блок 3 чтобы было еще более понятно я

00:20:13

поставлю под блоком

00:20:15

4 блок 4 у нас был еще один какой-то

00:20:19

блок вот и теперь мы видим что липкие

00:20:26

блоки они едут только до следующего

00:20:29

липкого блока и дальше как бы передают

00:20:33

эстафету в чем же опасность применение

00:20:36

допустим абсолютного позиционирования

00:20:38

казалось бы очень просто взял разместил

00:20:41

именно там где надо по дизайну и все все

00:20:44

выглядит как на картинке но к сожалению

00:20:47

или к счастью мы живем вне статическом

00:20:50

мире в мире браузеров разных размеров

00:20:53

экранов и разные изменяющиеся информации

00:20:56

поэтому о позиционировании особенно

00:20:59

абсолютно фиксированное стоит

00:21:01

использовать крайне осторожно надо

00:21:03

помнить что они вырываются из другого

00:21:08

кода и не влияют на другие блоки

00:21:11

я сейчас приведу пример например у нас

00:21:14

блок один будет с текстом блок 2 тоже с

00:21:19

текстом остальные блоки мы уберем вот и

00:21:23

допустим мы хотим сделать из этих двух

00:21:27

блоков две колонки я укажу

00:21:31

ширину 50 процентов слева сверху размещу

00:21:36

абсолютно позиционеры относительно дима

00:21:41

с классом блог потому что к нему

00:21:42

применим параметр позишн лэйте вспомним

00:21:45

на

00:21:46

так тут я сделаю то же самое для блока

00:21:50

234 нам уже не нужны только размещу

00:21:53

справа сверху таким образом у нас должны

00:21:57

получиться вот две колонки супер но что

00:22:00

если под этими двумя блоками у нас будет

00:22:02

еще один блок 3 тоже с каким-то текстом

00:22:11

мы его не увидим я покажу почему потому

00:22:17

что он находится

00:22:22

потому что он находится под нашими

00:22:26

абсолютными блоками я напоминаю что

00:22:28

блоки которые которым применен позиция

00:22:33

абсолютно не в вырываются из контента и

00:22:35

поэтому очень сложно строить

00:22:39

какую-то структуру особенно динамически

00:22:42

меняющийся структуру о чем я и говорю о

00:22:45

том что текста здесь может быть как

00:22:48

больше до

00:22:51

таки меньше мы ж не знаем вот и поэтому

00:22:58

таким образом нельзя строить

00:23:01

надежную структуру для страниц структура

00:23:05

должна быть выстроена только в

00:23:07

статических блоках как именно мы будем

00:23:09

естественно разбирать на уроках по

00:23:12

структуре будем говорить о flex ах

00:23:15

грядах и так далее сейчас я только лишь

00:23:18

предупреждаю что нельзя злоупотреблять

00:23:22

абсолютными позиционирования my и

00:23:24

использовать их только там где они

00:23:27

действительно нужны

00:23:28

естественно в дальнейшем мы будем в том

00:23:31

или ином формате решать различные задачи

00:23:34

и я буду наглядно показывать как и где

00:23:37

использовать абсолютное позиционирование

00:23:40

уже на так скажем реальных макетах но

00:23:45

сейчас мы немножко попрактикуемся и

00:23:48

набьем руку по позиционированию на более

00:23:52

простых примерах уже привычных нам из

00:23:54

прошлых уроков и очистил html и хочу

00:23:59

создать уже привычный нам маркированный

00:24:03

список

00:24:05

маркированный список скажем из пяти

00:24:10

пунктов с каким-то

00:24:14

текстом вот как нибудь так обращаюсь к

00:24:24

нему с помощью селектора класса из

00:24:26

нашего css файла увеличу шрифт

00:24:32

обращусь к пунктам сделаю отступ вниз 10

00:24:41

вот как нибудь так вот что у меня

00:24:45

получилось и я хочу разместить здесь

00:24:48

как-то стиль с хочу как-то стиле zero 8

00:24:51

маркированный список как это мы делали

00:24:54

уже на прошлых уроках я напоминаю что мы

00:24:57

это делали с помощью свойство background

00:25:00

а также с помощью псевдо-элементов

00:25:02

сейчас мы немножко скрестим все это дело

00:25:06

в одно с помощью еще и позиционирование

00:25:11

для этого я добавляю псевдо-элемент be

00:25:14

for к моему тайгу ли сразу ставлю пустой

00:25:21

контент до

00:25:22

напоминаю что псевдо-элемент и не

00:25:25

работают без этого свойства и добавляю

00:25:30

фоновую картинку ранее заготовленную

00:25:34

меня тут есть такая вот галочка вот и

00:25:39

далее я позиционирую это псевдо-элемент

00:25:43

абсолютно позиция абсолют размещая его

00:25:46

сверху и слева и а поскольку картинка

00:25:50

фоновая она не не задает никаких

00:25:52

размеров нашему псевдо-элементы мне

00:25:55

нужно эти размеры указать ширина 20

00:25:59

высота 20 сохраняем смотрим мы видим что

00:26:04

моя галочка появилась но немножко не там

00:26:07

где нужно вот и я намекаю на то что нам

00:26:14

нужно наш псевдо-элемент

00:26:16

позиционировать относительно каждого

00:26:18

пункта и чтобы это сделать что мне нужно

00:26:22

сделать правильно добавить пункту

00:26:25

позиция raleigh team

00:26:26

и как мы помним из рока что теперь наш

00:26:30

псевдо-элемент будет

00:26:32

позиционирован сверху слева именно

00:26:35

относительно уже своего родителя а

00:26:39

именно так или вот теперь так у нас все

00:26:42

это выглядит каждая стрелочка каждая

00:26:45

галочка разместилась относительно своего

00:26:49

бегали все что нам осталось сделать это

00:26:53

немножко подвинуть текст внутренним по

00:26:55

деньгам скажем на 30 пикселей

00:26:57

да и если приглядеться видно что галочка

00:27:01

немножко выше чем она должна быть

00:27:04

поэтому я беру и просто увеличиваю

00:27:06

значение топ допустим на два пикселя

00:27:09

даже можно на 4 вот примерно то таким

00:27:15

образом я использовал сразу и а

00:27:18

псевдо-элемент и свойство бэкграунд и

00:27:21

абсолютное позиционирование хочу

00:27:23

добавить что наш лист

00:27:28

такое такое поведение функциональная

00:27:31

себя добавлю тут очень много текста мы

00:27:34

увидим что благодаря по деньгу у нас тут

00:27:37

текст не будет переходить за галочку а

00:27:40

все будет именно так как нам нужна

00:27:43

почему так все сложно спросишь ты почему

00:27:47

нельзя просто использовать background и

00:27:48

добиться того же самого можно согласен

00:27:52

но забегая вперед скажу что бывают

00:27:55

случаи когда нам нужно так или иначе

00:27:58

анимировать либо видоизменять что-либо

00:28:02

при наведении например либо при от неких

00:28:06

других действиях и не всегда это можно

00:28:08

сделать

00:28:09

анимировать время в виду именно свойства

00:28:13

обыграл поэтому применяется

00:28:17

псевдо-элемент как отдельный так я

00:28:20

повторюсь псевдо-элемент можно так

00:28:22

сравнить он как бы добавляется до к

00:28:24

нашему тайгу

00:28:26

его абсолютно позиционеры применяю к

00:28:30

нему фон и дальше я могу с ним делать

00:28:32

все что угодно то есть такой способ он

00:28:37

позволяет максимально гибко

00:28:39

работать с тем или иным элементом

00:28:43

позиционирование довольно сложной

00:28:45

интересная тема поэтому я сделал для

00:28:47

тебя очередную методичку по

00:28:49

позиционированию ссылка будет в описании

00:28:53

обучайся развивайся и помни живи работой

00:28:57

свободное время

00:28:58

[музыка]

Описание:

CSS позиционирование (CSS position). Позиционирование CSS очень часто используется при верстке современных макетов и открывает для нас новые интересные возможности расположения элементов на странице. Расскажу про CSS position простыми словами и покажу на примерах. Рассмотрим такие CSS свойства позиционирования как position, top, left, right, bottom и z-index. Познакомимся с position static, position relative, position absolute, position fixed и position sticky Весь плейлист с БЕСПЛАТНЫМ курсом и уроками по HTML CSS JS верстке: https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr Шпаргалка/методичка по CSS позиционированию: https://fls.guru/cssposition.html Чат помощи друг другу по верстке - https://t.me/flschat Архив с файлами урока ищи в телеграм канале https://t.me/freelancer_lifestyle Или качай по ссылке: https://fls.guru/files/tutorials/css_8.zip 0:00 - Вступление 0:32 - Подготовка к уроку 3:56 - Position 3:56 - static 4:36 - relative 6:53 - свойство z-index со значением relative 8:53 - absolute 14:01 - свойство z-index со значением absolute 14:54 - fixed 16:43 - свойство z-index со значением fixed 17:08 - sticky 20:34 - Подводные камни использования absolute 23:56 - Примеры 28:43 - Методичка 28:53 - Напутствие Спасибо Emil Chapchakchi Instagram: https://www.instagram.com/freelancer.lifestyle/ Facebook: https://www.facebook.com/freelancerlifestyle/ Telegram канал: https://t.me/freelancer_lifestyle ----------------------------------------------------------------------------------------------- Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle ----------------------------------------------------------------------------------------------- «Фрилансер по жизни». Живи, а работай в свободное время! ©

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.