Как сделать div поверх всех остальных элементов управления
Я хочу, чтобы мой div отображался поверх всего, что я поставил на 100% ширины и высоты, и он показывает над большим количеством элементов управления, за исключением того, что у некоторых есть css z-index и другие вещи. Я попытался установить для div z-index большое число, но это не сработало.
Ответы (5)
Обратите внимание, вам не нужно устанавливать свойства отображения и видимости. Кроме того, не устанавливайте отступы или поля для этого элемента! Если вы хотите, чтобы у него был отступ, установите поле для его дочернего элемента/дочерних элементов. Кроме того, убедитесь, что рассматриваемый DIV является прямым потомком элемента BODY.
Это сработало для меня, но есть ли возможность сделать это не исправленным? — person Pini Cheyni; 27.04.2017
в моем случае я не хотел исправлять это, у меня есть динамическая страница, которая добавляет элементы поверх этого div, вместо того, чтобы нажимать этот div вниз, он заставляет этот div оставаться фиксированным в этой позиции — person Pini Cheyni; 28.04.2017
@PiniCheyni Похоже на другую проблему. Этот вопрос касается элемента, который находится «поверх всех остальных элементов управления». Попробуйте открыть новый вопрос и более подробно описать свою проблему 🙂 — person Šime Vidas; 28.04.2017
Дело в том, что это решение создает проблему, которую я описал, а не исходный вопрос. — person Pini Cheyni; 28.04.2017
@PiniCheyni Вопрос заключается в том, чтобы элемент покрывал всю область просмотра, и именно это делает код в моем ответе. У вас есть дополнительное требование, поэтому имеет смысл создать новый вопрос. Мне также нужно полностью понять проблему, и объяснять это с помощью комментариев не оптимально. — person Šime Vidas; 29.04.2017
Чтобы вытащить элемент html из естественного потока того, как элементы расположены на экране, вам нужно использовать position: absolute. Это позволит элементу стать слоем над другими элементами (при условии, что значение z-index больше, чем у всех остальных). Прямо сейчас ваш элемент, кажется, имеет позицию: относительную.
Как создать эффект наложения с помощью CSS
Есть несколько способов создания наложений. В этой статье мы покажем, как создать наложение с помощью CSS свойств.
Один из способов создания такого эффекта является абсолютное позиционирование HTML элемента на странице. Необходимо в разметке создать div, потом абсолютно позиционировать его с помощью свойства position, и дальше с помощью свойства z-index задать для div высокий z-index, чтобы он находился поверх всех остальных элементов страницы. Мы зададим более высокий z-index для следующего элемента div, которое откроется сверху наложения.
Для position задайте значение absolute, а z-index установите в 10.
div >div> div >div> .overlay< position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; >Здесь мы устанавливаем свойство position в fixed а z-index в 11, на 1px выше, чем слой наложения.
.modal < width: 300px; height: 200px; line-height: 200px; position: fixed; top: 40%; left: 50%; margin-top: -100px; margin-left: -150px; background-color: #8ebf42; border-radius: 40px; text-align: center; z-index: 11; >Мы устанавливаем position в значение relative.
body< position: relative; padding: 20px; margin:0; min-height:100%; font-family: 'Open Sans', sans-serif; background: #8ebf42; color: #eeeeee; >И так, мы создали наложение. Давайте посмотрим результат!
Пример
html> html> head> title>overlay div title> style> body< position: relative; padding: 20px; margin:0; min-height:100%; font-family: 'Open Sans', sans-serif; background: #8ebf42; color: #eeeeee; > .overlay < position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.6); > .modal < width: 300px; height: 200px; line-height: 200px; position: fixed; top: 40%; left: 50%; margin-top: -100px; margin-left: -150px; background-color: #8ebf42; border-radius: 40px; text-align: center; z-index: 11; > style> head> body> h2>Создание наложения с абсолютно позиционированным элементом h2> div class="overlay"> div> div class="modal">Lorem Ipsum - это текст-"рыба" div> div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> body> html>Мы также можем создать наложение при помощи селекторов ::before и ::after.
Стили и решения этого метода во многом похожи на предыдущий. Только здесь необходимо добавить стиль к псевдоклассам ::before и ::after .
Пример
html> html> head> title>overlay div title> style> body< position: relative; padding: 20px; margin:0; min-height:100%; font-family: 'Open Sans', sans-serif; background: #8ebf42; color: #eeeeee; > body :after < content: ""; display: block; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.3); > .modal < width: 300px; height: 200px; line-height: 200px; position: fixed; top: 40%; left: 50%; margin-top: -100px; margin-left: -150px; background-color: #8ebf42; border-radius: 40px; text-align: center; z-index: 11; > style> head> body> h2>Создание наложения с абсолютно позиционированным элементом h2> div class="modal">Lorem Ipsum - это текст-"рыба" div> div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> body> html>Как сделать Div отображаться поверх всего остального на экране?
Но когда я перемещаю это всплывающее окно вверх, чтобы появиться над картой, он становится скрытым:
Я пробовал установить z-index на моей странице свойств CSS, но это не сработало.
Есть ли какое-то свойство HTML/CSS, которое можно установить так, чтобы всплывающее окно, которое является DIV, на самом деле всегда накладывается поверх всего остального?
z-index – не тот простой друг. На самом деле это не имеет значения, если вы положили z-index:999999999999 ….. Но это имеет значение, КОГДА вы дали ему, что z-index . Различные dom-элементы имеют приоритет друг над другом.
Я сделал одно решение, в котором я использовал jQuery для изменения элементов css и дал ему z-index только тогда, когда мне нужен элемент, который должен быть сверху. Таким образом, мы можем быть уверены, что z-index этого элемента был указан последним, и индекс будет отмечен. Для этого требуется какое-то действие, которое нужно обработать, но в вашем случае это кажется возможным.
Не уверен, что это работает, но вы можете попробовать также указать параметр !important :
Используете ли вы position: relative ?
Попробуйте установить position: relative , а затем z-index, потому что вы хотите, чтобы этот div имел z-индекс по отношению к другому div.
Кстати, ваш браузер важно проверить, работает ли он или нет. Ни IE, ни Firefox не являются хорошими.
Установите индекс DIV z на один больше, чем другие DIV. Вам также необходимо убедиться, что у DIV есть и position кроме static .
вы должны использовать position:fixed , чтобы сделать значения z-index применимыми к вашему div
Попробуйте установить положение в абсолютное, т.е.
Одна из форм для этого – вставить панель, которую вы хотите развернуть внутри DIV, настроенной как относительная: покажите вам:
Вы используете первый div для размещения внутреннего содержимого в определенной области внутри вашей страницы, а второй абсолют следует отнести к контейнеру (потому что он относительный). Z-индекс в этом случае относится также к контейнеру, и если он выше, чем контейнер должен быть наверху. Вы можете поместить стиль в класс css и изменить размер абсолютного div, чтобы развернуть его при наведении или другое действие, которое вы хотите контролировать.
выпадающие списки всегда отображаются вверху, единственное решение для этой проблемы – скрывать выпадающие списки при отображении изображения (отображение: блок или видимость: видимый) и показывать их при скрытом изображении (отображение: нет или видимость: скрыто)