Родительская вставка-тень, перекрываемая дочерними divs

У меня проблема, когда дочерние divs перекрывают нижнее дно коробки.

У родителя есть max-height w / overflow-y: прокрутка. Любая помощь будет замечательной!

http://sofru.miximages.com/html/jQe0r.png

HTML:

CSS:

 .capture { width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; position: relative; } .threads { height: 250px; width: 100%; display: inline-block; padding-bottom: 10px; position: relative; clear: left; } .thread { width: 248px; float: left; margin-right: 8px; margin-top: 6px; border-bottom: 2px solid #dadada; overflow: hidden; zoom: 1; } .sh-btm { box-shadow: inset 0px -5px 9px -2px #000; } 

Нет, то, что вы просите, можно сделать довольно легко. Однако для облегчения я бы посоветовал использовать фоновое изображение или gradleиент CSS вместо вставки теней. Вам нужно немного подкорректировать CSS, чтобы получить именно то, что вы хотели. (например, чтобы нижняя надпись не закрывала стрелку внизу вашей полосы прокрутки).

Установка z-индекса на дочерние элементы будет работать, только если у вас есть не что иное, как статический текст и изображения для показа, а также ссылки или интерактивный контент. Вам также не разрешено устанавливать фон для родителя или он будет скрывать детей.

Чтобы достичь этого, вам нужно сделать 2 отдельных теневых оверлейных div и поместить их абсолютно в родительский контейнер. Ваша структура будет такой:

  • Родительский контейнер
    • Наложение тени налево
    • Теневое оверлейное дно
    • Threadcontainer (переполнение установлено на этом div)
      • Нить
      • Нить

Вот рабочая демонстрация: http://jsbin.com/avafaq/1/edit

 
 #shadow_overlay_left{ width: 10px; height: 100%; position: absolute; z-index: 5; box-shadow: inset 3px -2px 5px 0px #000; } #shadow_overlay_bottom{ width: 100%; min-height: 10px; position: absolute; bottom: 0%; z-index: 5; box-shadow: inset 0px -5px 9px 0px #000; } .threads { overflow-y: scroll; overflow-x: hidden; } 

Обратите внимание: я помещал свойства переполнения в контейнер .threads вместо родительского контейнера. Это связано с тем, что иначе ваши абсолютно позиционированные divs будут прокручиваться и не будут заполнять их соответствующие ширины / высоты.

Опять же, вы можете применять frameworks тени, фоновые изображения или gradleиенты CSS для ваших теневых оверлейных div.

Проблема в том, что дочерние элементы выше в контексте стекирования родительского элемента. Чтобы сделать теневое шоу, вы должны сделать их ниже родительского.

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

 .thread { position: relative; z-index: -1; } 

http://jsfiddle.net/7PhfJ/

Или, поскольку .threads уже позиционируется, и box-shadow находится на родительском, вы можете добавить z-index непосредственно к этому элементу:

 .threads { z-index: -1; } 

http://jsfiddle.net/7PhfJ/1/

Вы можете сделать это только с позиционированием и коробкой тени, но поддержка браузеров будет плоха. Я использовал position: sticky (без поддержки Chrome), но забавный эксперимент в любом случае.

 

Использовать position: sticky а не абсолютная, .shadow будет находиться в верхней части своего родителя, пока родитель будет видимым, поэтому мы настроим его с полной высотой родителя и смещаем контент с отрицательным полем, чтобы выровнять его с верхней части родителя. Sticky не прокручивается вниз с содержимым, как элемент с абсолютным позиционированием.

Теперь вы можете установить тень вставки в любое значение и использовать pointer-events: none позволяет взаимодействовать со слоем за слоем с теневой коробкой (поскольку позиционированные элементы с более высоким индексом z будут препятствовать взаимодействию с элементами позади них).

 .wrap{ border: 1px solid #dadada; /* You'll need a fixed height - assuming that's the case already, given the overflow */ height: 400px; margin: 5vh auto; overflow-y: auto; width: 50vw; } .content{ margin-top: -400px; } .shadow{ box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.3) inset; height: 100%; /* To avoid objects below not being accessible we use pointer events - CSS4 and wonky IE support again */ pointer-events: none; position: sticky; /* Firefox doesn't really need the vendor prefix and Chrome doesn't support this */ position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 0; width: 100%; } .item{ /* You would obviously add your own styling - just making boxes that show the concept */ background: white; border: 1px solid #dadada; box-sizing: border-box; float: left; height: 250px; margin: 1%; width: 23%; } .item:hover{ /* To demonstrate the click through the top layer and :hover works */ background: #f3f3f3; } 

Опять же – это экспериментальная и поддержка браузеров отсутствует в местах, но доказывает, что вы можете сделать это только с помощью CSS.

Скрипт здесь …