Главная Случайная страница


Полезное:

Как сделать разговор полезным и приятным Как сделать объемную звезду своими руками Как сделать то, что делать не хочется? Как сделать погремушку Как сделать так чтобы женщины сами знакомились с вами Как сделать идею коммерческой Как сделать хорошую растяжку ног? Как сделать наш разум здоровым? Как сделать, чтобы люди обманывали меньше Вопрос 4. Как сделать так, чтобы вас уважали и ценили? Как сделать лучше себе и другим людям Как сделать свидание интересным?


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






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





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

Чаще же всего position:relative используют вообще без задания смещений. В этом случае он ведет себя как обычный статический блок, но поскольку он все-таки не статический, то он создает внутри себя содержащий блок ("стакан"), тот самый, относительно которого будут позиционироваться блоки, лежащие внутри него.

<div id="header"></div>

< div id="contents">

<div id="author"></div>

</div>

<div id=" footer"></div>


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

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

#author { position:absolute; top:0; right:0; }

Как поведет себя блок?

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

Вот это и есть случай, в котором работает position:relative. Если мы поставим его блоку содержимого, то он никуда не денется из потока, но в то же время станет содержащим блоком, и "об авторе" расположится в его правом верхнем углу.

Date: 2016-02-19; view: 385; Нарушение авторских прав; Помощь в написании работы --> СЮДА...



mydocx.ru - 2015-2024 year. (0.005 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию