2

我正在尝试创建一个网站，其中我有几个 div 使用z-index和放置在背景 div 的前面position:absolute。此背景 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

4

4 回答 4

2

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

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

于 2012-09-12T18:29:59.803 回答
1

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

<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;
}

唯一剩下的就是你玩你的维度。实际上，我把所有东西都放在了容器之外。

于 2012-09-12T18:44:05.363 回答
1

这是因为 Header 的下边距在文本之上。我建议你改变你在这里做事的方式。你为什么不把元素放在 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 一起使用，因此里面的元素将被绝对尊重地定位。

于 2012-09-12T18:30:47.267 回答
0

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

这意味着每张幻灯片都需要由一个绝对位于内容后面的背景 div 和一个绝对位于其他所有内容前面的内容 div 组成。

于 2012-09-12T18:28:20.120 回答