1

Есть сверстанная страница, на ней блок

<div id="element">
    Some content
</div>

Я добавил на страницу еще один слой

<div class="overlay"></div>

Со следующими свойствами

.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.5;
    z-index: 100;
}

Хочу динамически по нажатию на кнопку поднять блок #element над слоем .overlay так, чтобы он оказался на переднем плане. Пробую с помощью js менять свойство z-index например на 101, в обозревателе объектов видно, что он изменился, но визуально он все еще внизу, под полупрозрачным слоем.

Вместо #element может быть любой другой элемент страницы, исходную разметку менять нельзя. Как еще кроме z-index можно поднять элемент на передний план?

2
  • Попробуйте добавьте элементу #element position: absolute или position: relative вместе с z-index: 101 3 апр 2017 в 10:03
  • codepen.io/anon/pen/vxbqmq Осталось только JS прикрутить
    – labris
    3 апр 2017 в 10:30

2 ответа 2

2

Для наглядности добавил еще цвет и размер шрифта. До клика на кнопке элемент выделить мышью невозможно, он находится "под". После клика элемент переходит "над".

HTML

<div id="element">
  <p>    Some content </p>
</div>
<div class="overlay">


</div>


<div class="under">

<button href="#"onclick="changeElement('element')">Открыть Some Content</a>
</button>

CSS

.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.1; 
  background:red; /* просто проверить */
    z-index: 100;
}

#element {position: relative; }

.under {position: relative; z-index:500}

JS

function changeElement(id) {
  var el = document.getElementById(id);
  el.style.color = "red";
  el.style.fontSize = "25px";
  el.style.zIndex = "300";
}

http://codepen.io/anon/pen/vxbqmq

2
  • Решение для этого примера работает, но в некоторых других случаях (например, если я пытаюсь поднять над оверлеем элемент главного меню) это не срабатывает 4 апр 2017 в 5:34
  • Не срабатывать может по ряду причин, я ответил на поставленный Вами вопрос, исходя из информации, предоставленной в вопросе. Если будет другая информация, давайте искать другое решение в другом вопросе.
    – labris
    4 апр 2017 в 9:50
1

labris, не бывает такого, что overlay на странице лежит в одном родителе со всеми элементами страницы, так что твой вариант точно не подходит, если хотя бы один родитель этого элемента имеет z-index меньше чем у оверлея, элемент не поднимется над ним:

HTML

<div class="page">
  <div class="container">
    <div class="container_inner">
      <div class="block-1"></div>
      <div class="block-2"></div>
    </div>
  </div>
  <div class="overlay"></div>
</div>

CSS

.page {
  position: relative;
  width: 300px;
  height: 300px;
}

.container,
.container_inner,
.overlay,
.block-1,
.block-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.block-1 { background-color: red; }
.block-2 { background-color: green; }
.overlay { background-color: pink; }

.container_inner { z-index: 1; }
.block-1   { z-index: 100; }
.overlay   { z-index: 10; }

https://jsfiddle.net/30w9frdj/6/

На вскидку тут 2 варианта:

1) Убрать все z-index'ы у родителей, но не думаю, что это реально и ничего не сломает

2) Не кошерный, но ... клонируем элемент, задаем position: absolute и кладем рядом с оверлеем с сохранением позиционирования/размеров

Больше вариантов я не вижу =/

6
  • Так смысл-то в том и состоит, чтобы через JS менять z-index у элемента с position:relative. Мой пример работает, как бы то ни было - codepen.io/anon/pen/vxbqmq
    – labris
    3 апр 2017 в 12:24
  • Ты сделал ровно то же самое, что делал ТС ( + со шрифтом поигрался xDDD ) и у него это не работает: "в обозревателе объектов видно, что он изменился, но визуально он все еще внизу". 3 апр 2017 в 12:38
  • До клика на кнопке элемент невозможно выделить. После клика он выделяется, поскольку уже находится сверху.
    – labris
    3 апр 2017 в 12:42
  • Не ровно то же, я добавил Position:relative.
    – labris
    3 апр 2017 в 12:42
  • а, ну да, тогда твой вариант вакуумный, но все же лучше (возможно) чем у ТСа, меня просто сбило с толку то, что ты решил со шрифтами поиграться -_- Однако мне кажется он ему все равно не подойдет ибо "Вместо #element может быть любой другой элемент страницы", я не верю, что бывают страницы без z-index и одним уровнем вложенности. 3 апр 2017 в 12:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.