CSS包装div的背景知识

Question

我在包装div中有2个div，我想知道是否可以将#wrapper div放在内容的顶部（#outer和#inner）。

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

我希望#wrapper添加透明背景而不对HTML进行任何更改。我尝试使用z-index这样做没有成功。

看到这个小提琴：http : //jsfiddle.net/nPpDE/

任何帮助深表感谢。

Answer 1

使用-http :after: //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)
}

伪元素放置在其他元素之上，并对其应用半透明背景。

__

编辑：一种略有不同的方式-（请参阅下面的评论）（使用position:absolute

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

__

注意-为了能够“单击”伪元素，请添加pointer-events: none;到其中。

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

要使其在IE中起作用，请参阅IE的css'pointer-events'属性替代，它可能会有所帮助。