Изучаю CSS. 3. Еще раз о позиционировании

Моя цель и способ отображения изучаемых примеров

Сначала информацию, варианты отображения которой будем исследовать, поместим в div-блок с заданным классом:

Чтобы не менялась предыдущая информация, будем менять именования класса my_w посредством добавления цифры: my_w1, my_w2 и т.п.

Результат вставки кода в текст, когда стили рассматриваемого класса не прописаны

Пропишем в окне Single Page Code стили окна. Вводим размер окна, его цвет и обрамляющую прямоугольную рамку ширины 8 px со своим цветом:

Результат применения стиля

Меняем стиль. Добавляем свойства для создания теней и закругления углов:

Код нового стиля
Результат применения нового стиля

Добавляем новые параметры для изменения положения окна. Приписываем ему появиться вверху окна браузера и по горизонтали центрироваться:

Получаем результат

Окно передвинулось вверх благодаря top: 10%;, и отцентрировалось по горизонтали благодаря свойствам left: 50%; и margin-left: -125px; Важно: 125=250/2, где width:250px;. Однако при скролировании всего окна данного поста поверх окна залезает содержание окон с кодом и верхняя панель окна темы сайта WordPress. Добавляем в стиль свойство z-index: 1050;

Результат добавления свойства z-index: 1050;

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

Значения свойства position
Результат добавления свойства псевдокласса hover

Получился эффект расширения окна как в рассмотренном примере с кнопкой.

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

Изменим способ задания окна. Поместим div-блок с содержанием в новый div-контейнер:

Теперь есть возможность задания стиля как блока содержания (тела окна), так и блока контейнера (окна):

Окно и тело окна