html - 无法选择 Z-Index/Position Div 内的文本

Question

我正在尝试创建一个网站，其中我使用 z-index 和 position:absolute 将多个 div 定位在背景 div 的前面。这个背景 div 稍后会被转换成一个内容轮播，所以它的文本是可选的是至关重要的。我当前的代码不允许选择文本和链接，我想知道如何解决这个问题。

http://jsfiddle.net/6fwf9/2/

HTML:

<div id="header" class="box">header</div>
<div id="bg">
    Cannot highlight this text <br>
    <a href="">Cannot click on this link</a>
</div>
<div class="box">content</div>​

CSS:

.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink; 
     position:absolute; top:0; z-index:-10;}​

编辑 - 我想要实现的目标的图像:http://imgur.com/r9tYx

Answer 1

确保覆盖元素 (.box) 不位于文本内容的前面，如果它们是可选择的。这意味着以其他方式定位它们，而不是使用边距。此示例有效，因为框使用绝对定位:http://jsfiddle.net/2pPKz/

或者，如果背景要变成轮播，当它实际上是轮播时，你能不担心它，然后把它移到前面吗？