CSS Floating Pop Up: хитрое позиционирование CSS

Question

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

Позвольте мне объяснить немного глубже. У меня есть таблица «страниц» в моей CMS, и я добавил возможность добавлять новые страницы через небольшой всплывающий элемент div.

Мой всплывающий элемент div определен под таблицей, но имеет вид style = "display: none", поэтому он не отображается на странице. После нажатия кнопки «Добавить новую страницу» моя функция JavaScript запускает:

document.getElementById("addPage").style.display="block";

Это позволяет магически появляться div при вызове.

Однако, вот моя проблема; Я хочу, чтобы этот div всегда отображался по центру, но мое стандартное поле: auto не позволяет центрировать этот div, так как он все еще отображается под таблицей (хотя по центру справа / слева и по z-index: 999).

Вот мой код CSS:

#addPage{
 width:250px; 
 height:180px;
 background-color:#FFFFFF;
 border:1px #000000 solid;
 position:absolute;
 z-index:999;
 padding:10px;
}

Answer 1

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

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

Answer 2

Описание неясно и может быть сделано с экранами / диаграммами, поэтому я пойду сюда поток сознания:

• z-index не имеет ничего общего с позиционированием, а только с наложением слоя, поэтому на данный момент игнорируйте это
• position:absolute или, более вероятно, position:fixed - это определенно то, что вам нужно для достижения позиции относительно документа / экрана, а не другого элемента.
• Звучит так, будто вы говорите о вертикальном центрировании, а не о горизонтальном, да? Это значительно труднее достичь с помощью чистого решения CSS.
• Поскольку в данном стиле правильно указаны pos: abs и высота, , если применяется и не конфликтует, я не вижу причин, почему ваш div не был бы точно таким, как описано.
• Однако вы также манипулируете стилями непосредственно с помощью JS, что, на мой взгляд, является анти-паттерном, потому что он применяется с более высокой специфичностью и гораздо более запутанным и трудным для обратного пути. Вам следует проверить трижды, что вы делаете с элементом и, если это вообще возможно, выполнить рефакторинг, чтобы применить только стиль, модифицирующий класс.
• Что означает firebug для примененных стилей?
• Почему вы просто не используете стандартное решение лайтбокса / сообщения? Общее практическое правило в веб-разработке заключается в том, что все, что вы хотите сделать, уже было сделано и стандартизировано ранее, поэтому у вас должна быть веская причина для повторного изобретения колеса.