Обложка CSS-обложки div для покрытия содержимого

У меня есть 2 divs внутри div обертки, и мне было интересно, можно ли добавить div #wrapper поверх содержимого (#outer и #inner).Обложка CSS-обложки div для покрытия содержимого

<div id="wrapper"> 
     <div id="outer"> 
      <div id="inner"></div> 
     </div> 
    </div>

Я хочу, чтобы #wrapper добавлял прозрачный фон без внесения каких-либо изменений в HTML. Я попытался сделать это, используя z-index без успеха.

Смотрите эту скрипку: http://jsfiddle.net/nPpDE/

Любая помощь очень ценится.

источник

2013-06-21 junkystu

По «сверху», что вы имеете в виду? Наверху это дети? –

Нет, с точки зрения макета ребенок не может появиться за его родителем. Вы можете изменить непрозрачность внешнего и внутреннего divs, чтобы просмотреть их до обертки div, или создать абсолютно новый новый внутренний div, который находится поверх внешнего и внутреннего div. – j08691

Нет, так работает порядок укладки. –

Управляется с использованием :after - http://jsfiddle.net/t6mMR/ -Нет лишнего html!

Как это:

#wrapper:after { 
    position:relative; 
    top:-200px; 
    left:0px; 
    content:""; 
    width:400px; 
    height:200px; 
    display:block; 
    background:rgba(255, 0, 0,0.5) 
}

Псевдо-элемент расположен над другим, и полу прозрачным фоном применяется к нему.

EDIT: немного другой способ сделать это- (см комментарии ниже) (с использованием position:absolute

http://jsfiddle.net/t6mMR/1/

Примечание- Уметь для «щелчка» псевдоэлемента, добавьте pointer-events: none; к нему.

http://jsfiddle.net/t6mMR/1/

Чтобы получить эту работу в IE, см css 'pointer-events' property alternative for IE, это может помочь.

источник

2013-06-21 14:34:09

Хорошее решение, я только что обновил его abit, потому что позиция: абсолютная; (теперь он не имеет фиксированной высоты и ширины) http://jsfiddle.net/t6mMR/1/ – koningdavid

@koningdavid Правильно, я тоже добавлю это. –

Это потрясающе! Спасибо! – junkystu

То, что вы просите, невозможно.

Однако, возможно, когда вы добавляете еще один DIV внутри #wrapper и поместите его

position:absolute;

и дать ей прозрачный цвет

http://jsfiddle.net/nPpDE/1/

EDIT: решение Харли лучше так как ОП не хочет менять HTML

источник

2013-06-21 14:34:46 koningdavid

Спасибо. Это был мой второй вариант :) – junkystu

Вы можете дать детям position: relative и z-index: -1 (или иначе отрицательное значение), но я не уверен, что это багги или что такое поддержка браузера.

некоторые подробнее можно посмотреть здесь: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Вот краткий пример: http://codepen.io/Rykus0/full/jhwev

В противном случае, как уже говорили другие, вам необходимо включить новый элемент и позицию, используя либо absolute или fixed

источник

2013-06-21 14:38:02

Я иногда использую это решение, но я никогда не был уверен, что это «хорошо». Обратите внимание на отзывы разработчиков Dev. –

??и то, что о наличии непрозрачных цветов на внутренних контейнеров и регулярного цвета на главном контейнере:

#wrapper{ 
    position:relative; 
    background:black; 
    width:400px; 
    height:200px; 
} 
#outer{ 
    position:relative; 
    width:400px; 
    height:200px; 
    background: rgba(50,0,0,0.75); 
} 
#inner{ 
    position:relative; 
    width:350px; 
    height:200px; 
     background:rgba(0,50,0,0.75); 
    margin: 0 auto; 
}

скрипку, которая идет с ним :) http://jsfiddle.net/nPpDE/2/

источник

2013-06-21 15:02:01

Обложка CSS-обложки div для покрытия содержимого

ответ

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