Среда, 13.11.2019, 23:42
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Атрибут position в HTML

Атрибут position в HTML

Стиль CSS position отвечает за месторасположения элемента относительно других элементов. Используется в стилях довольно часто и поддерживается всеми браузерами (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Яндекс Браузер). Приведем простенький пример для понимания.

Примера 1. HTML-код:

<html>

<head>

<style type="text/css">

.poselementtop{ position: relative; top: 10px; color:blue; }

.poselementbottom{ position: relative; bottom: 10px; color: green; }

</style> </head> <body> <p>Обычный текст <font class="poselementtop"

>Этот текст ниже на 10 пикселей</font> <font class="poselementbottom">

А этот наоборот выше</font>

</body>

</html>

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

Пример использования элемента position: relative

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

position: absolute | fixed | relative | static | inheri

Примечание: через | перечислены все его возможные значения.

1. Атрибут position: retative

position: retative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

При задании этого параметра, активизируются следующие параметры:
top
bottom
left
right
Если не указано никаких смещений, т.е.

top:0px;

bottom:0px;

left:0px;

right:0px;

то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания retative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Для пояснения этой особенности приведем пример.

Примера 2. HTML-код:

<div style="float:right;

              width:50px;

              height:50px;

              margin:5px;

              right: 100px;

              top: 100px;

               background:#FF0000;">

</div>

<div style="background:#EFABCA;font-size:12px; padding:10px">

В чем же тогда разница?

...

</div>

Код преобразуется в следующее:
 

Ещё один пример использования элемента position: relative

Примера 2*. Добавим к первому диву: position: relative;. HTML-код:

<div style="float:right;

          width:50px;

           height:50px;

          margin:5px;

          position:

          relative; right: 200px;

           top: 100px;

            background:#FF0000;">

</div>

<div style="background:#EFABCA;font-size:12px; padding:10px">

В чем же тогда разница? ...

</div>

Код преобразуется в следующее:
 

Ещё один пример использования элемента position: relative

Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.

2. Атрибут position: absolute

position: absolute - в данном случае считается, что начало отсчета - левый верхний угол. Здесь также действуют свойства top, bottom, left, right. При этом элемент который обладает атрибутом absolute становится как бы блочным элементом. Приведем пример.

Примера 3. HTML-код:

<div style="background:#EFBCDB;font-size:14px; padding-left:100px;">

                  <font style="">Текст один</font>

                 <font style="color:red; padding-left:30px;">Текст два</font>

                 <font style="color:blue; padding-left:30px">Текст три</font>

</div>

Код преобразуется в следующее:
 

Пример использования элемента position: absolute

В данном случае все три текста написаны друг за другом. Заметим, что мы специально сделали отступ слева padding-left:100px; в 100 пикселей. Теперь рассмотрим, что будет если мы во второй font добавим атрибут position: absolute.

Примера 3*. HTML-код:

<div style="background:#EFBCDB;font-size:14px; padding-left:100px;">

<font style="">Текст один</font>

<font style="color:red; padding-left:30px; position:absolute; left:0px;">

Текст два</font>

<font style="color:blue; padding-left:30px">Текст три</font>

</div>

Код преобразуется в следующее:
 

Ещё один пример использования элемента position: absolute

Заметим, что текст два уехал влево и теперь стоит на первой позиции. При этом текст три занял место второго. Почему так произошло? Потому что мы добавили position:absolute и отступ слева: left:0px. Как я писал выше, при атрибуте absolute начало отсчета для элемента становится - левый верхний угол.

3. Атрибут position: fixed

position: fixed - фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.

Примера 4. HTML-код:

<div style="background:#EFBCDB;

                 font-size:14px;

                height:20px;

                width:150px;

                border: 1px solid red;

                position: fixed;

               top:0px; left:40px;">

Фиксированный текст

</div>

<br/>Тут идет текст текст текст

<br/>Тут идет текст текст текст

...

Код преобразуется в следующее:
 

Пример использования элемента position: fixed

В данном примере верхняя строчка с текстом "фиксированный текст" всегда видна на странице браузера в любом положении скролла. Это свойство часто используют сайты, которые размещают рекламные строчки типо NOLIX, DAOS и т.п. См. как сделать строку как NOLIX и DAOS.

4. Остальные атрибуты position

4.1. position: static - этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.

4.2. position: inherit - наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.

← Перейти в каталог html уроков и советов

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz