Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 12 видеоуроку по CSS Размер: 168.44 kB, скачали: 546 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Что такое позиционирование?
В двух словах позиционирование дает нам возможность поместить изображение в любом месте страницы. Пример позиционирования для идентификатора image:
#image{
Position: absolute | relative | fixed | static;
top: ..px;
left: ..px;
right: ..px;
bottom: ..px;
}
4 способа позиционирования элементов
Свойство Position задает позиционирование. Оно может быть четырех типов:
- absolute – абсолютное
- relative – относительное
- fixed – фиксированное
- static – статическое (стоит по умолчанию)
Следующие четыре свойства определяют положение элемента, которого мы позиционируем:
- top указывает отступ от верхнего края
- left указывает отступ от левого края
- right указывает отступ от правого края
- bottom указывает отступ от нижнего края
Достаточно указать лишь два из них. Одно — по вертикали, другое — по горизонтали. То есть вы не можете задать отступ от верхнего края и от нижнего. Это неправильно. Но вы можете задать отступ от верхнего края и от левого края или от нижнего края и от правого края. Значения отступов задаются в пикселях. На этом с теорией можно закончить. Давайте приступим к практике.
Вот что мы получим в конце видеоурока:
- одно изображение с позиционированием абсолютным
- два изображения будут накладываться друг на друга
- третье изображение будет фиксированным, то есть когда мы будем передвигать ползунок страницы, это изображение будет оставаться на месте.
Абсолютное позиционирование
Давайте перейдем в код и вставим тег <img> с идентификатором info.
<div id = "content"> <div id="container"> <img src="img/info-line.png" alt="" id="info">
В таблице стилей вставим стили для этого идентификатора.
#content img#info{
width: 77px;
height: 77px;
position: absolute;
}
Установили высоту и ширину по 77 пикселей, позиционирование выставили абсолютным. Сохраняем. Получается, что наше изображение всплыло над всеми другими элементами. Оно никак на них не влияет и находится над ними. Давайте пропишем этому изображению свойства top и left. Для начала возьмем значения по ноль пикселей.
#content img#info{
width: 77px;
height: 77px;
position: absolute;
top: 0px;
left: 0px;
}
Сохраняем и видим, что наше изображение позиционируется в левом верхнем углу экрана. Возможно, вы думаете, что это за пространство между верхней частью экрана и изображением и левой частью экрана и изображением? Дело в том, что изображение у нас само по себе прозрачное, а его форма показана синей рамкой. Таким образом, указав top и left для абсолютного позиционирования, изображение стало позиционироваться относительно всей области экрана, а не относительно того блока, в котором оно находится. Давайте поменяем свойство left на свойство right.
#content img#info{
width: 77px;
height: 77px;
position: absolute;
top: 0px;
right: 0px;
}
Я надеюсь, вы поняли суть.
Относительное позиционирование
Уберем свойства top и right. И разберемся со вторым свойством значения position – relative.
#content img#info{
width: 77px;
height: 77px;
position: relative;
}
Сохраним и обновим страницу. Видим, что свойство position со значением relative создает изображение, которое располагается как блочный элемент, то есть все остальные теги его не обтекают. Если бы мы добавили просто изображение, то эффект был бы такой же.
Давайте попробуем задать этому изображению отступ от верхнего и левого края, допустим, по 100 пикселей.
#content img#info{
width: 77px;
height: 77px;
position: relative;
top: 100px;
left: 100px;
}
Мы видим, что изображение опять всплыло над всеми элементами страницы, но то место, где оно располагается в коде, осталось свободным. Очень трудно привести пример, где используется данный эффект. Поэтому я вам покажу два более интересных примера.
Абсолютное позиционирование в относительном
Давайте перейдем в код страницы page.html и вставим в header ссылку с изображением. Ссылка открывается в новом окне, а изображение имеет идентификатор info.
<a href="http://info-line.net/" target="_blank"><img src="img/info-line.png" alt="" id="info"></a>
Сохраним и пропишем стили для идентификатора info, который находится в идентификаторе header. Пропишем абсолютное позиционирование, отступ от верхнего и левого края по 10 пикселей.
#header img#info{
width: 77px;
height: 77px;
position: absolute;
top: 10px;
left: 10px;
}
Сохраняем. Смотрим, что получается на данный момент. Изображение отступило от верхнего и левого края на 10 пикселей — так как и должно было быть.
Теперь давайте зададим блоку header свойство position со значением relative.
#header{
background: #F8F5B5 url('img/bg_header.png') repeat-x;
width: 100%;
height: 100px;
position: relative;
}
Сохраняем и видим, что наше изображение стало позиционироваться относительно блока header. Теперь можно сделать вывод, что все элементы с абсолютным позиционированием, находящиеся в блоке с относительным позиционированием, будут позиционироваться относительно самого этого блока. Это используется очень часто. Почему? Дело в том, что если вы абсолютным позиционированием поместите изображение, например, справа от header'a, как показано на видео, то на разных разрешениях экрана оно будет отображаться в разных местах, потому что оно позиционируется относительно всего экрана. То есть, если текст располагается по центру, а изображение задано в пикселях, то изображение на большом экране будет налезать на текст. Единственным спасением может быть только задание отступа в процентах.
Давайте закрепим эту информацию и создадим еще изображение с абсолютным позиционированием, которое будет находиться в блоке header. Я перехожу в код, добавляю изображение и указываю ему идентификатор pic1.
<img src="img/pictures.png" alt="" id="pic1"></a>
Укажем стили для этого идентификатора. Ширина и высота — 128 пикселей, позиционирование — абсолютное, отступ от верхнего края — 68 пикселей, отступ от левого края — 460 пикселей.
#header img#pic1{
width: 128px;
height: 128px;
position: absolute;
top: 68px;
left: 460px;
}
Посмотрим. Видим, что у нас появилась картина, крючок которой висит в шапке нашей страницы, а сама картина висит в контенте. Уменьшим это изображение. Вместо 128 пикселей укажем 100.
#header img#pic1{
width: 100px;
height: 100px;
position: absolute;
top: 68px;
left: 460px;
}
Ну вот, довольно симпатично. Со значением relative мы заканчиваем.
Фиксированное позиционирование
Переходим в код страницы page.html. Вместо изображения, которое мы использовали в container'е, укажем новое, а вместо его стилей укажем другие стили для идентификатора trash, который присвоен новому изображению.
<div id="container"> <img src="img/trash_full.png" alt="" id="trash">
#content img#trash{
width: 100px;
height: 100px;
position: fixed;
right: 0px;
bottom: 0px;
}
Мы указали ширину и высоту в 100 пикселей, фиксированное позиционирование, отступ от правого и нижнего краев — ноль пикселей.
Сохраняем и смотрим, что получается в браузере. Мы видим, что у нас появилась корзина, которая зафиксирована в нижнем правом углу экрана. Эффект довольно таки красивый и, я думаю, работа его вам понятна.
Статическое позиционирование
Четвертое значение свойства position – static мы рассматривать не будем, так как оно стоит по умолчанию для всех элементов.
И напоследок, в этом видеоуроке мы разберем z-индексы. Чтобы разобраться на примере, нам понадобится еще одно изображение. Пусть это будет pictures.png с идентификатором pic2.
<div id = "header"> <a href="http://info-line.net" target="_blank"><img src="img/info-line.png" alt="" id="info"></a> <img src="img/pictures.png" alt="" id="pic1"></a> <img src="img/pictures.png" alt="" id="pic2"></a>
В таблице стилей укажем такие же стили, как и для идентификатора pic1, только отступ от левого края будет не 460 пикселей, а 490.
#header img#pic2{
width: 100px;
height: 100px;
position: absolute;
top: 68px;
left: 490px;
}
Сохраняем и обновляем страницу в браузере. Замечаем, что изображение с идентификатором pic2 накладывается на изображение с идентификатором pic1. Это происходит потому, что изображение с идентификатором pic2 в коде находится ниже изображения с идентификатором pic1.
Z-индексы
Для решения этой проблемы созданы z-индексы. Чтобы каждый раз не менять строчки, когда вам это нужно, вы можете просто указать z-индекс. По умолчанию z-индекс для всех элементов равен нулю.
#header img#pic1{
width: 100px;
height: 100px;
position: absolute;
top: 68px;
left: 460px;
z-index: 1;
}
Указав z-индекс, равный единице, мы увидим, что изображение с идентификатором pic1 перекрывает изображение с идентификатором pic2. Значение свойства z- index может быть любым. Если вы укажете значение индекса, равное «-1», то этот элемент будет находиться за всеми остальными элементами вашего сайта. Если мы обновим страницу, то его не увидим.
#header img#pic1{
width: 100px;
height: 100px;
position: absolute;
top: 68px;
left: 460px;
z-index: -1;
}
На этом я заканчиваю данный видеоурок, а вы еще поработайте над свойством position, так как оно позволит вам украсить любой сайт и реализовать свои задумки. До встречи в следующем видеоуроке, в котором мы решим одну проблему, которая вынуждает многих искать в Google не очень понятную, на первый взгляд, фразу: Как прижать футер к низу страницы?
Info-line.net
Хороший урок. Качественно сделано *THUMBS UP*
Спасибо) Стараюсь с каждым разом делать лучше 🙂
Спасибо огромное, Олег, за прекрасные уроки! У меня небольшой вопрос насчет позиционирования элементов. Не лучше ли left, top указывать в процентах, ведь размер экрана у всех разный и может случиться что местоположение располагаемых элементов будет совсем другим у кого-то, чем то ,что вы задали у себя на мониторе в пикселях? Так у меня при прохождении урока и получилось. Поэтому я подумала что лучше бы их указывать в процентах. Это так? Спасибо))
И вам спасибо!
Использовать значения в % или в пискелях следует на свое усмотрение. При позиционировании, желательно учитывать, что разрешение на мониторах у пользователей бывает разное. Поэтому в некоторых случаях целесообразнее использовать относительные величины, такие как % или em.
Нельзя сказать, что всегда лучше указывать отступ в %, так как ситуации бывают разные. Также в отдельных случаях можно обойтись абсолютными величинами, использую абсолютное позиционирование внутри относительного.
Олег, а можно ли зафиксировать элемент не относительно всего экрана, а относительно его родительского блока задать координаты фиксации?
Задайте родительскому блоку относительное позиционирование, а внутреннему — фиксированное. Должно получится. Все достигается путем экспериментов)
Чета у меня с позицией проблемы ну да это ладно исправлю,я вот тут проблема одна очень большая точнее давняя еще с уроков HTML преследует меня как поменять размер изображения ну например оно 1000 на 500 как на сайте уменьшить ее намного меньше ну например 100 на 50 я знаю там width и height надо менять но кагбы я не менял она не уменьшалось может из за того что форматы моих картинок jpg а не как у тебя png короче чета у меня эта проблема не решается ну я еще попробую что нибудь может я просто что то не так делаю =)
Все равно изображение должно становиться меньше. Скинь код, подумаем)
У меня такой вопрос ты здесь делал position: fixed; как сделать что бы при нажатие на картинку сайт поднимался вверх (например у меня много видео на сайте и я добрался к последнему видео тоисть в самом низу как сделать что бы при нажатие на изображение сайт поднимался вверх)
Если нужно мгновенно, то можно написать код, использовав # и задав в шапке сайта атрибут id:
Если плавно, то попробуйте данный код (может не работать, нашел в интернете):
<a onclick="$('body').scrollTo('0px',800, {axis:'y'})" href="javascript://">Наверх</a>Если хотите еще более красивый подъем наверх, то используйте библиотеки JQuery. Для этого нужно знать JavaScript.
Здесь описан подробный способ:
Спасибо у меня все получилось!!!
Отлично) Какой метод именно получился? 2-ой?
Нет я только 1 пробовал.
Как сделать, что бы с левой сторон экрана по fixed двигались иконки социальных сетей как у тебя???
Ничего сложного нету, все то же самое, что и с правой, только делаем отступ от левого и верхнего края (
topиleft).Если же ты хочешь сделать, чтобы на разных экранах твой элемент отображался прилегая к какому-нибудь блоку (у меня это блок с контентом), то лучше всего поместить позиционируемый элемент внутрь этого блока и задать ему отрицательный отступ! Таким образом, независимо от разрешения экрана, блок будет распологаться на определенном растоянии от элемента внутри которого он находится. Ух) сложно наверное понять этот совет, но попытайтесь вдуматься %)
спасибо. а какой код у самых иконок?
Воспользуйтесь расширением FireBug или ему подобным) Про них я рассказываю в бонусных видеоуроках к курсу по CSS.
После того, как посмотрите код, можете не мучаться с встраиванием подобной панели, а воспользоваться сайтом
дай пожалуйста силку на урок где есть расширение FireBug а то я не могу найти
Юра, пользуйся поиском в правой колонке.
Вот все статьи, где присутствует слово firebug.
info-line.net/?s=firebug&...0%B8%D1%81%D0%BA
спасибо а мы будем изучать как делать форум и регистрацию пользователя.
Будем изучать CMS системы + отдельную установку движков форумов — но это в будущем. Когда я уже стабилизирую наконец уроки по 2-3 в неделю :))
У меня много планов на запись хороших видеоуроков 🙂
спасибо эти уроки действительно очень полезние и не всегда встретишь что бы на твои вопросы на форуме отвечали.
Рад быть полезным)
Олег у меня к тебе просьба я сейчас заканчиваю 9 класс и хочу ити учиться на програмирования там мне нужно знать html / css / java script / php и у меня вопрос не мог бы ты выложить уроки по php где-то до мая потому что я html и css немного знаю?
Нет. До мая я точно не успею. Дело в том, что на запись видеоурока у меня уходит в 8-20 раз больше времени, чем длительность видеоурока в итоге.
То есть на 30-минутное видео у меня уходит от 4 до 10 часов. К тому же, видеоуроки я планирую записывать по плану, поэтому следующие видео в ближайшее время будут по размещению сайта в интернете (уже почти записан) и фотошопу.
понятно спасибо буду так учится хотя розмещение сайта в интернете и фотошоп я думаю интереснее.
Помоги пожалуйста у меня на сайте сделался отступ от верхнего края может я чего то удалил но я не могу вернуть обратно как это сделать если чего то не понимаеш посмотри на сайте
От верхнего края чего? Ты про горизонтальное меню? Или про небольшой отступ между хедером и левым меню? Так как я вижу только эти неполадки. Отступ между шапкой сайта и левым меню появился из-за того что высота header'a = 200 px, а шапка (изображение) = 198 px. Поэтому, чтобы убрать этот отступ, нужно div id=header задать height=198px, а не 200px.
Если же ты имел ввиду горизонтальное меню (при нажатии на кнопку меню оно немножко не красиво выглядит), то тут проблема в самом . Он немного не правильно нарисован. Если присмотреться внимательнее, то можно увидеть, что на состояние нажатой кнопки выделяется меньше чем 60 px.
нет я имел в виду хедер от верхнего края но я уже ето сделал я удалил если я ето удалил то с сайтом ниче не случится и для чего вапше етот Doctype?
По-моему я говорил в видеоуроках, но если не говорил, то сейчас скажу)
Doctype = Doc (документ) + Type (тип) = Тип документа. Нужен для того, чтобы http-клиент понял, какой файл ему попался в «руки», например HTML5 или XHTML. Поисковик Google настоятельно рекомендует его использовать. Без Doctype страница по-моему (могу ошибаться) не считается валидной. На деле же, все браузеры и так понимают тип документа, и даже если вы не будете использовать такие теги, как html и body, браузеры все равно выдадут вам документ.
Вывод: не поленитесь вставить 1-2 строчки, это у вас не отнимет много времени, но избавит от непредвиденных проблем.
спасибо я понял а мы будем изучать html 4.1 или html 5 в следующих видео уроках.
Вот 2 бонусных видеоурока к курсу по HTML: XHTML и HTML5
а теги аудио нельзя в html 4 использовать.
Так используйте HTML5 или файловые хостинги предоставляющие вставку плеера на ваш сайт. Позже будем изучать CMS — там плагины будут. Еще позже и сами научимся писать плеер 🙂
понятно спасибо. а когда будут новые уроки и по чем они будут
Сегодня уже будет 1-ый видеоурок по размещению сайта в интернете. Буду стараться как можно скорее записывать их, но эти видеоуроки будут очень хорошего качества) поэтому на одно видео уходит в 10-20 раз больше времени, чем оно получается. Пока что сам ужасаюсь от этого. Когда войдет в привычку, надеюсь будет быстрее. Что могу сказать о новом формате видео?
1. Видео 1200:900
2. Красивые слайды
3. Будет очень много полезных эффектов (показаны нажатия клавиш с клавиатуры, музыка приятная в начале видео, увеличения и отдаления, выделение области)
4. Звук станет еще лучше
понятно спасибо жду на новые видео уроки
Олег, скажи пожалуйста, если надо, чтоб под текстом была подложка (картинка, которую не получится прописать, а надо только как png ставить), то взаимопозиционирование текста и картинки осуществляется с помощью z-index? или как-то по-другому еще?
Не совсем понял вопрос. В качестве фонового изображения и позиционируемого изображения можно использовать любую картинку любого расширения (не только png).
Вопрос не в расширении, а в том, как правильно сделать, чтоб текст накладывался на эту картинку? ведь как текст, так и картинка — по сути блоки, как сделать чтоб они не шли друг за другом, а накладывались? видимо, это работа z-index'ов?
Да, вы правы. Но если картинка будет задана как фон, то она будет фоном, а не блоком 🙂