Курс CSS. Пример 01 урока 39.

Оператор поддержки
Птичка CSS - это наше всё!

position:static; - По умолчанию. Элементы показываются по порядку, как они появляются в потоке документа.

position:absolute; - Элемент позиционируется относительно своего первого позиционируемого (нестатичного) предка.

position:fixed; - Элемент позиционируется относительно окна браузера. Поэтому они вылетели из таблицы и находятся внизу экрана, 40 и 60 пикселей от нижнего края.

position:relative; - Элемент позиционируется относительно своей нормальной позиции, так, например, "left:20" добавляет 20 пикселей к своей нормальной позиции.

position:inherit; - Значение свойства position (позиционирование) наследуется от своего родителя.

-----------------

У нашей птички z-index:20; ↑ - это больше, чем у кнопки. Поэтому, несмотря на то, что птичка в хидере прописана первой, а кнопка идет за птичкой, все-таки, благодаря большему значению z-index, птичка своим хвостом закрывает кнопку. Именно этого визуального эффекта и хотел дизайнер.

-----------------

Для того, чтобы сделать элемент невидимым используют свойства visibility (в таком виде: visibility:hidden;) и display (в таком виде: display:none;).

Обратите внимание, что эти две возможности дают разные результаты.

visibility:hidden; - (видимость:спрятан;) элемент будет спрятан, но он по-прежнему будет занимать тоже самое место, как и раньше.

display:none; - (отображать:нет;) также элемент будет спрятан, но он теперь НЕ будет занимать тоже самое место. Страница будет отображаться, как-будто данного элемента нет вообще.

Рассмотрим обе возможности на примерах.

Пример 1. visibility:hidden;






Нажатие кнопки справа добавит мне свойство visibility:hidden;
Нажмите эту кнопку прямо сейчас...
Это текст в большом диве специально для того, чтобы показать обтекание этим текстом маленького дива. При нажатии кнопки обратите внимание каким образом меняется (и меняется ли вообще) расположение этого текста...


Пример 2. display:none;






Нажатие кнопки справа добавит мне свойство display:none;
Нажмите эту кнопку прямо сейчас...
Это текст в большом диве специально для того, чтобы показать обтекание этим текстом маленького дива. При нажатии кнопки обратите внимание каким образом меняется (и меняется ли вообще) расположение этого текста...


Поиграйтесь кнопками справа, это позволит вам лучше почувствовать, как работают свойства visibility:hidden; и display:none;. Кстати, в реальной практике, эти свойства используются также, как и на этой страничке - в сочетании с программами на JavaScript, когда нужно быстро спрятать или показать какой-то элемент.

-----------------

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

Все это ради того, чтобы посмотреть, что на фиксированный элемент ...
← см слева элемент "Оператор поддержки"
... не действует работа полос прокрутки.

Читать этот контент не надо.

После этой фразы все бросились читать этот контент.

-----------------

Товарищи!

Обращаю ваше внимание на необходимость ширше и глубже, т.е. ширее и глубее, внедрять технологию CSS в массы!

Не все еще осознали необходимость!

Но есть среди нас и такие, которые осознали необходимость, но недостаточно!

Имеются и такие, которые осознали необходимость достаточно, но не прониклись духом!

Но самая трудная работа нам предстоит среди тех, которые хотя и осознали необходимость достаточно и прониклись духом, но являются настолько закоренелыми лентяями, что даже пальцем не хотят пошевелить!

Мы с вами много говорили об этом, но воз и ныне там.

А там - это вам не здесь и даже не тут, это совсем другое место.

Не смотря на все трудности мы продолжаем делать тоже самое.

Хотя, возможно, уже пора перестроиться и делать что-то совсем другое.

Есть и положительные моменты: трудности нас закалили.

Есть и отрицательные моменты: непонятно, зачем нам это надо?

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

Худшие умы продолжают играть в эти игры.

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

Я кончил.

-----------------

-----------------

-----------------

-----------------