Latest web development tutorials
×

CSS курс

CSS курс CSS Краткое введение CSS грамматика CSS Id и Class селектор CSS создать CSS фон(background) CSS текст(text) CSS шрифты(Fonts) CSS ссылка(link) CSS стили списка(ul) CSS таблица(table) CSS Box модель CSS рамка(border) CSS контур(outline) CSS маржа(margin) CSS начинка(padding) CSS Группировка и вложенность CSS размер(Dimension) CSS дисплей(display) CSS разместить(position) CSS терка(float) CSS выравнивать(align) CSS Сочетание селекторов CSS Псевдо-классы CSS Псевдо-элемент CSS Панель навигации CSS Выпадающее меню CSS Галерея изображений CSS Прозрачное изображение/непрозрачный CSS технологии мозаики изображения CSS Тип носителя CSS селекторы атрибутов CSS резюме CSS примеров

CSS3 курс

CSS3 курс CSS3 Краткое введение CSS3 рамка(border) CSS3 фон CSS3 постепенное изменение CSS3 Текстовые эффекты CSS3 шрифты CSS3 2D изменение CSS3 3D изменение CSS3 переход CSS3 анимация CSS3 Multi-колонки CSS3 Пользовательский интерфейс

CSS Адаптивный дизайн

Viewport Grid View Медиа-запросы изображение видео(video) рамка

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

CSS справочное руководство CSS селектор CSS Речь Ссылка CSS Web Безопасные шрифты CSS анимация CSS блок CSS цвет CSS значения цвета CSS название цвета CSS шестнадцатеричный цвет

CSS позиционирования (определения местоположения)

Позиционирование иногда очень сложно!

Решают, чтобы показать перед элементами!

Элементы могут перекрываться!


Позиционирование (позиционирование)

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

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

Есть четыре различных способа позиционирования.


Статическое позиционирование

По умолчанию HTML элементы, которые не расположены, элементы появляются в нормальном потоке.

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


Фиксированное позиционирование

Положение элемента относительно окна браузера является фиксированная позиция.

Даже когда окно катится его не двигается:

примеров

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Попробуйте »

Примечание: Исправлено позиционирование в IE7 и IE8 описание DOCTYPE нужно поддерживать!

Фиксированное позиционирование положения элементов документа вне зависимости от потока, и, следовательно, не занимают пространство.

Фиксированные позиционируемые элементы и другие элементы перекрывают друг друга.


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

Относительное позиционирование элемент позиционируется относительно его нормального положения.

примеров

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Попробуйте »

Может быть перемещен взаимное расположение элементов контента и перекрывающихся элементов, она не изменяет исходного пространства, занимаемого.

примеров

h2.pos_top
{
position:relative;
top:-50px;
}

Попробуйте »

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


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

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

примеров

h2
{
position:absolute;
left:100px;
top:150px;
}

Попробуйте »

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

Абсолютно позиционируемые элементы и другие элементы перекрывают друг друга.


Перекрытие элементы

Ориентация и потока независимо от элементов документа, таким образом они могут охватывать и другие элементы на странице

Атрибут Z-индекс определяет порядок расположения элемента (какой элемент должен быть помещен перед или позади)

Элемент может иметь положительный или отрицательный порядок стека:

примеров

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

Попробуйте »

Элемент имеет более высокий порядок штабелирования всегда перед нижней штабелирования порядка элементов.

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


примеров

Другие примеры

Форма режущих элементов

Этот пример показывает, как установить форму элемента. Элемент обрезается в эту форму, и отображается.

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

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

Как настроить браузер для автоматической обработки переполнения

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

Изменение курсора

Этот пример демонстрирует, как изменить курсор.


Все свойства CSS позиционирования

Колонка "CSS" указывает номер, который CSS (CSS1 или CSS2) вариант определения имущества.

свойство объяснение значение CSS
дно Смещение определяет границу между нижним установочным элементом вне его содержащего блока от границы под. автоматический
длина
%
унаследовать
2
клип Клипы абсолютно позиционируемые элементы форма
автоматический
унаследовать
2
курсор Переместите курсор, чтобы отобразить заданный тип URL
автоматический
перекрестие
дефолт
указатель
движение
е изменение размера
нэ изменение размера
NW-изменение размера
п-изменение размера
SE изменение размера
ЮЗ изменение размера
s-изменение размера
ж изменение размера
текст
подождите
помощь
2
левый Определяет элементы адресности левое поле смещения границы блока между левым краем его содержащего. автоматический
длина
%
унаследовать
2
переполнение
Когда содержание элемента установлено, что происходит, когда переполняется свой регион. автоматический
скрытый
свиток
видимый
унаследовать
2
Переполнение-й
Определяет способ обработки содержимого верхнего / нижнего края области содержимого элемента переполнения автоматический
скрытый
свиток
видимый
нет-дисплей
нет-контента
2
Переполнение-х
Определяет, как обращаться к правому / левому краю области содержимого переливом содержимого элемента автоматический
скрытый
свиток
видимый
нет-дисплей
нет-контента
2
положение Укажите тип элементов позиционирования абсолютный
фиксированный
относительный
статический
унаследовать
2
право Он определяет таргетингом элементы, включающие границу и правое поле смещения между правой границей блока. автоматический
длина
%
унаследовать
2
топ Он определяет элемент позиционирования на границе, и его запас на блоке содержит смещение между границами. автоматический
длина
%
унаследовать
2
Z-индекс Установка порядка наложения элементов номер
автоматический
унаследовать
2