Последние публикации сайта:

Абсолютное позиционирование элементов на веб-странице. Свойство CSS position absolute.

Дата публикации: 03.05.2014

Просмотров: 16

Продолжаем рассматривать возможные значения свойства CSS position. На этот раз давайте рассмотрим абсолютное позиционирование элементов и свойство CSS:

Вернемся к предыдущему примеру и посмотрим, как на этот раз будут вести себя элементы.

[wp-js-fiddle url="http://jsfiddle.net/dimachen/k77e9" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Что в этом случае произошло с блоком div, к которому было добавлено свойство position:absolute?

1) Блок выпал из нормального потока, потерял свою высоту и элемент, который находился под ним, занял его место.

2) Блок div перестал занимать 100% ширины экрана монитора.

Ширина слоя при абсолютном позиционировании, если она не задана явно, становится равной ширине контента плюс значения полей, границ и отступов.

Относительное позиционирование элементов на веб-странице. Свойство CSS position relative.

Дата публикации: 02.05.2014

Просмотров: 17

Первый способ позиционирования элементов на веб-странице, который мы с вами сейчас рассмотрим - это относительное позиционирование элементов.

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

Давайте вернемся все к тому же примеру из предыдущих уроков, когда три блока div располагаются один над другим и среднему из них добавим свойство position:relative.

[wp-js-fiddle url="http://jsfiddle.net/dimachen/VgevL/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Как можно видеть из примера, пока, ровным счетом, ничего не изменилось.

Но, давайте попробуем элементу с position:relative добавить свойства left и top.

[wp-js-fiddle url="http://jsfiddle.net/dimachen/VgevL/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Свойство CSS position с помощью, которого можно изменять нормальный поток элементов.

Дата публикации:

Просмотров: 13

Как я писал в предыдущем уроке, все элементы на веб-странице, пока к ним не будет применено никаких свойств CSS, которые меняют нормальный поток элементов, будут находится в нормальном потоке.

Одно из свойств CSS, которое может поменять нормальный поток элементов является свойство position.

Это свойство может принимать следующие значения:

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

fixed - фиксированное позиционирование элемента

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

static - нормальный поток

Что такое нормальный поток элементов на веб-странице?

Дата публикации: 01.05.2014

Просмотров: 14

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

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

Сначала давайте разберемся, что значит нормальный поток для блочных элементов.

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

[wp-js-fiddle url="http://jsfiddle.net/dimachen/ERgcj/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

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

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

Наследование margin-top родительскими элементами.

Дата публикации: 30.04.2014

Просмотров: 15

Еще один интересный эффект, который связан со свойством margin-top - это эффект наследования отступов по вертикали дочернего элемента родительским элементом.

Давайте посмотрим, как это выглядит.

Имеем два блока div, один из которых родительский, а другой дочерний.

[wp-js-fiddle url="http://jsfiddle.net/dimachen/3ZxsA/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

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

Довольно странное и неожиданное поведение, правда?

Но, есть способ, как можно изменить такое поведение.

Страница 20 из 116« Первая...10...1819202122...304050...Последняя »