Подписка
Email
Fb
RSS
Twitter
Email

Видео уроки CSS. Часть10

Позиционирование cssВсем привет! В эфире очередной, уже десятый по счету урок CSS с сайта DenWeb.Ru.

Сегодня мы с Вами будем осваивать то, как расположить элемент в системе координат, т.е. css позиционирование, его типы. Эта тема чем-то близка с темой позиционирования фонового изображения, рассмотренного в пятом уроке.

Существует четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. Тип позиционирования указывается через свойство position. Координаты задаются при помощи свойств left, top, right, bottom.

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

Итак, четыре типа позиционирования:

Нормальное позиционирование (position:static);

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

Абсолютное позиционирование (position:absolute);

Положение задается относительно краев браузера. Элемент «вырывается» из потока документа.
Позиционирование CSS

Фиксированное положение (position:fixed);

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

Относительное позиционирование (position:relative);

Положение элемента устанавливается относительно его первоначального места.
CSS координаты

Следует так же помнить, что css свойства left и top имеют приоритет над right и bottom. Это касается всех типов позиционирования.

Для того, чтобы позиционирование дочернего элемента происходило относительно родителя, нужно задать родителю свойство position:relative, а дочернему — position:absolute.
абсолютное позиционирование

Вы можете оставить комментарий.

57 комментариев к записи “Видео уроки CSS. Часть10”

  1. Georgiy:

    обьесните пожалуста шапка сайта ставится в css такимже методом как в 10 уроке?

    • Если нужно как-то сложно разместить элементы, то да. В простом же случае позиционировать не нужно. Просто делается блок <div> с определенной шириной, высотой и выравнивается по центру сайта.

  2. Georgiy:

    большое спс ,еще мне интересно как делают кагда на какомнибуть сайте не большое изображение, на него нажимаеш и откр другая страница ,если вам не сложно обьесните пожалусто как это сделать

  3. Georgiy:

    я помню что гдето это было но непомнил где ,спс вам большое

  4. Georgiy:

    не планируется ли выпустить уроки по javascript ???

  5. Андрей:

    а как можно сделать выдвижное меню на верху сайтаИ как сделать на шапке переходы на другие страницы (если не сложно напишите в icq 562782099) Зарание спасибо

  6. Андрей:

    Спасибо

  7. Алан:

    Спасибо за урок, когда выйдет следующий?

  8. Алекс:

    Здравствуте Уважаемый!Часть 10 это последняя часть по CSS? Если да, то что является продолжением, а если нет то когда вы планируете продолжение обучения?

  9. Снежана:

    Спасибо вам большое за видеоуроки! Все очень подробно, наглядно...и главное понятно. Разместила ссылку на ваш сайт себе на экспресс-панель, пользуюсь постоянно, еще раз сенкс.Я так понимаю, что если будут конкретные вопросы, то у к вам можно обратиться? Куда писать?

  10. Олег:

    Сможете мне тоже сказать как делать ссылки в шапке, поиск в шапке.Буду очень благодарен.

  11. Олег:

    Да да меню в шапке.Вот адрес tobi_29@mail.ru.Я еше хотел спросить знание JavaScript обязательно для верстки сайта? 

    • Олег, шаблон отправил. 

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

  12. Олег:

    Большое спасибо! И  с наступающим новым годом

  13. Сергей:

    Следующего урока, я так понимаю не будет? 

  14. Денис:

    Заранее извиняюсь за замечание, так как я в этом только новичок. А чего вы не сказали про то, что если у родителя свойство position принимает значение absolute | relative | fixed, то отсчет координат дочернего элемента будет измеряться от краев родителя.

  15. Михаил:

    Добрый день!У меня возник такой вопрос:"Как накладывать текст на картинку методом позиционирования?"В этом уроке было сказано, что об этом ты расскажешь в следующем уроке , но что делать если 10 урок последний ?

  16. Анастасия:

    Спасибо. Очень хорошо для новичков — доходчиво и по существу.

  17. sarmail:

    Вопрос не по теме: а что за программой пользуетесь, которой синенькие рамочки  для нас рисуете? Это какой-то встроенный инструмент в программу захвата видео? Если да — то что это за программа?

  18. Павел:

    подскажите в каком уроке про тег <div> описывается??

  19. Alex:

    Спасибо большое за уроки. У меня такой вопрос. html:<div id="1"'>       <div id="2"></div></div>css: case 1div#1 {    position: absolute: .......................}div#2 {    position: absolute: ........................}css: case 1div#1 {    position: relative: .......................}div#2 {    position: absolute: ........................}Если разница между первым и вторым и вчем. Спасибо

  20. Коля:

    Спасибо большое, заинтересовался версткой сайтов, но не мог найти с чего начать, пока не нашел Вас) Все доступно и понятно.

  21. Никита:

    Ден насколько я понял то все позиционирования обладают одинаковым действием? можно выбрать любое какое понравится а результат не изменится?

  22. Алина:

    Можно и мне отправить шаблон выдвижного меню! Заранее, большое спасибо!

    asya.alinka@mail.ru

  23. Иван:

    Можно и мне пожалуйста отправить шаблон. Заранее спасибо! vangog172@mail.ru

  24. Ruslan:

    Здравствуйте!У меня такой вопрос, есть блок div его можно margin'ом располагать по экрану.Также можно указать position:relative; и значениями top left позиционироватьВ чем принципиальная разница?Денис, я пытаюсь поставить красивое окошко за input type='text'  как вы это показывали в вашем уроке, и вот margin'ом это не получается, а position:relative; все нормально Вот почему так происходит?Благодарю за помощь!

  25. Екатерина:

    Здравствуйте, извините что опять упоминаю за опечатку. «Для того, чтобы позиционирование дочернего элемента происходило относительно родителя, нужно задать родителю свойство positiOn:relative, а дочернему — position:absolute.»

  26. Андрей:

    Здравствуйте , спасибо вам за  уроки , . Возник такой вопрос , при абсолютном позиционировании используются свойства left , top  и др , так вот как они связаны с блочным строением ? То есть значение свойства left это width+padding+margin+border ? 

  27. Vika:

    Ден, у меня тоже просьба и мне отправить шаблон выдвижного меню. Заранее благодарна! и спасибо за уроки , за вашу проделанную работу, за то что очень многим они помогают и будут помогать.

  28. Vika:

    забыла указать почту чтобы вы выслали и мне шаблон меню, - lisinil@ukr.net  , еще раз спасибо

    • Vika, поищите просто в Гугле по запросу «выпадающее меню css» — найдете кучу вариантов и выберете подходящий для себя.

  29. Дмитрий:

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

  30. Дмитрий:

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

  31. Руслан:

    Ден а можешь скинуть посмотреть какие нить варианты своей верстки ?  Видеть пример было бы не плохо

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика