Есть сверстанная страница, на ней блок
<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 можно поднять элемент на передний план?
#element
position: absolute
илиposition: relative
вместе сz-index: 101