Z-index не работает с перекрытием родительского DIV с одним внутри него

То, что я пытаюсь сделать, это скрыть полосу прокрутки DIV. Для этого я создал внешний DIV с overflow-y: hidden; и разместил в нем немного более широкий DIV. Я отдал внешний DIV выше z-index, чем внутренний. Оба имеют position: fixed;, но, несмотря ни на что, он не работает - более широкий DIV по-прежнему виден вне его родительского DIV. Я также сделал так, чтобы z-index из html был бы выше, чем у внутреннего DIV, в надежде, что он скроет полосу прокрутки, но это тоже не сработало. Также не работали отрицательные z-index. Я искал дни для исправления, но никто не работал.Z-index не работает с перекрытием родительского DIV с одним внутри него

Вот простой пример кода (я должен включать весь код в jsfiddle?) - HTML:

<html> 
    <body bgcolor="#BFBFBF"> 
     <div class="outer_MB"> 
      <div class="in_MB"> 
      </div> 
     </div> 
    </body> 
</html>

CSS:

html { 
    z-index: 2; 
} 

.outer_MB { 
    position: fixed; 
    height: 70%; 
    width: 84%; 
    left: 8%; 
    bottom: 0; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    overflow-y: hidden; 
    z-index: 2; 
    text-align: center; 
} 

.in_MB { 
    height: 70%; 
    width: 86%; 
    position: fixed; 
    overflow-y: scroll; 
    z-index: 1; 
}

PM: Это первый вопрос Я спросил на этом веб-сайте, поэтому скажите мне, если я что-то упустил, и я попытаюсь это исправить.

источник

2015-07-09 The Light Sabrix

Проблема в том, что ваш элемент .in_MB привязан к элементу outer_MB. Независимо от того, установлен ли ваш внутренний элемент z-index, он всегда будет отображаться поверх внешнего элемента.

Представьте, что у вас две коробки. Большая коробка и небольшая коробка. Вы помещаете маленькую коробку в большую коробку. Затем вы поднимаете большой ящик вверх - маленький ящик не остается там, где он есть, он поднимается с большой коробкой.

Если вы хотите .in_MB оказаться за .outer_MB, вам нужно, чтобы сделать их отдельные элементы:

<div class="outer_MB"></div> 
<div class="in_MB"></div>

Затем вам нужно, чтобы стиль .in_MB элемент появляется в том же положении, как .outer_MB элемента , Поскольку эти элементы теперь раздельны, но имеют одного и того же общего предка, то z-index будет действовать соответствующим образом.

источник

2015-07-09 11:07:00

Я не могу поверить, что я не думал об этом! Спасибо, это работает. –

Так суть вас проблемы вам нужно DIV, который позволяет прокручивать Но полосы прокрутки не должны быть видны ...

Смотрите эту fiddle.

Это фрагмент.

#container { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
#content { 
 
    width: 100%; 
 
    height: 99%; 
 
    overflow: auto; 
 
    padding-right: 15px; 
 
} 
 
html, 
 
body { 
 
    height: 99%; 
 
    overflow: hidden; 
 
}

<div id="container"> 
 
    <div id="content"> 
 
    testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br />testing 
 
    <br /> 
 
    </div> 
 
</div>

Надеется, что это помогает ..

источник

2015-07-09 11:11:09

Проблема с этим подходом заключается в том, что разные браузеры имеют полосы прокрутки разного размера. В Chrome на Windows я вижу линию финтов, в которой полоса прокрутки все еще частично видима, потому что в браузере я использую полосу прокрутки шириной 17 пикселей - больше, чем 15px, которую вы определили. Кроме того, у некоторых браузеров будет гораздо более тонкая полоса прокрутки или хуже, полосы прокрутки, которые появляются поверх содержимого (планшеты и т. Д.).), поэтому это решение может вызвать больше проблем, чем оно решает. –

Спасибо @JamesDonnelly !! Я вижу проблему сейчас. Я тестировал три браузера, а firefox показывает тонкую полосу прокрутки. Спасибо, что указали это. :) –

Я понял это уже. Дело в том, что мой DIV составляет всего около 84%. Я использовал аналогичный путь, но внутренний DIV все еще был виден внутри тела. Этот метод заключается в том, чтобы скрыть полосу прокрутки всей страницы, а не небольшую DIV. Или так я вижу это, по крайней мере. Можно сделать мой внутренний DIV более широким и иметь огромное количество дополнений, но это было бы слишком хаки. –

Z-index не работает с перекрытием родительского DIV с одним внутри него

ответ

Смежные вопросы