Абсолютно позиционированный оверлей игнорирует z-индекс - PullRequest
Новая
       33

Абсолютно позиционированный оверлей игнорирует z-индекс

0 голосов
/ 29 июля 2011

У меня есть следующий шаблон, который я пытаюсь заставить работать, я позволил себе добавить разные цветовые фоны к каждому div для отладки, в основном у меня есть три div, которые являются различными фонами, и эти фоны должны иметь свечение вцентр.Для этого я попытался установить абсолютно позиционированный контейнер с непрозрачностью 10%.Однако он перекрывает все и игнорирует z-index.

Я знаю, что упускаю что-то простое, но я слишком долго смотрю на это.

http://fwuse.com/n/ Нет свечения,цвета не дизайн, они их для отладки.http://fwuse.com/n/glow.html Добавлен Glow-контейнер, торчит только меню, все остальное скрыто.http://fwuse.com/n/glow-opacity.html Свечение контейнера с непрозрачностью, обратите внимание, что ни одна из ссылок не может быть нажата.

Ответы [ 4 ]

1 голос
/ 29 июля 2011

Почему бы просто не использовать CSS для вашего свечения? 

#radial-center {
  /* fallback */
  background-color: #2F2727;
  background-position: center center;
  background-repeat: no-repeat;

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);

  /* Firefox 3.6+ */ 
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE 10 */ 
  background: -ms-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE < 8 Linear gradient fallback */
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";

  /* IE 8/9 Linear gradient fallback */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";
  /* Opera cannot do radial gradients yet */

}

Демо: http://jsfiddle.net/AlienWebguy/49d5g/

0 голосов
/ 01 августа 2011

Я исправил это, мне пришлось установить #pagecontainer z-index и установить фоновые дивы в z-index: auto. Я установил заголовок на z-index: 501, содержимое на z-index: 502 и нижний колонтитул на z-index 503, #glow был установлен на z-index: 1.

Как это ни сбивает с толку, это работает, есть идеи, почему?

http://fwuse.com/no/

0 голосов
/ 30 июля 2011

#content-bg имеет более низкий z-индекс, чем свечение, которое охватывает всю страницу, поэтому потребляет все клики для содержимого.Изменение z-index для #content-bg на 3, казалось, вывело его на передний план настолько, чтобы его можно было нажать, не влияя на эффект свечения.

0 голосов
/ 30 июля 2011

Если вы можете сделать так, чтобы div содержимого не имел фонового цвета (background: transparent?) И имел z-index 3, а базовый div "10% opacity" имеет z-index 2, это будет работать.Однако я не уверен, что background: transparent является свойством CSS;)

...