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/

或者，如果背景要成为旋转木马，当它实际上是旋转木马时你不能担心它，然后将它移到前面吗？

Answer 2

这是因为标题的下边距位于文本上方。我鼓励你改变你在这里做事的方式。你为什么不把元素放在bg盒子里？

<div id="bg">
  <div id="header" class="box">header</div>
  <p>Cannot highlight this text <a href="javascript:void();">Cannot click on this link</a></p>
  <div class="box">content</div>
</div>

有静态位置？即使你想使用绝对定位，你也可以拥有bg div中的所有内容，并将其与position：relative放在一起，这样内部的元素就会被定位为绝对定位。

Answer 3

我刚看到你的照片，我就是这样做的。

<div id="bg">
    <div id="container">
        Cannot highlight this text
        <br>
        <a href="javascript:void();">Cannot click on this link</a>
    </div>

</div>
<div id="header" class="box">header</div>
<div class="box">content</div>

对于CSS，请注意我在容器周围放置边框以显示它的位置以及宽度和高度是多少

.box{
    width:150px;
    height:150px;
    z-index:2;
    position:absolute;
    background: cyan;
    top:150px;
    left:20px;
}

#bg{
    background-color:pink; 
    width:200px; 
    height:170px;
    position:absolute;
    top:0px;
}
#header{
    position:absolute;
    width:150px;
    height:50px;
    left:20px;
    top:20px;          
    z-index:2;
    background: cyan;
}
#container{
    width:100%;
    position:relative;
    border:1px solid black;
    margin-top:100px;
}

唯一剩下的就是你玩你的维度了。 Actualy我把所有绝对的东西都放在了容器里。

Answer 4

不幸的是，做你想做的事情的唯一方法是拆分滑块的背景和文本内容。

这意味着每张幻灯片都需要一个绝对位于内容后面的背景div，以及一个绝对位于其他内容前面的内容div。

无法在Z-Index / Position Div中选择文本

4 个答案: