2

z-indexとを使用して、背景のdivの前に複数のdivを配置するWebサイトを作成しようとしています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

これは、ヘッダーの下余白がテキストの上にあるためです。私はあなたがここで物事をしている方法を変えるようにあなたに勧めます。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 に答える
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 に答える
0

残念ながら、あなたがやろうとしていることをする唯一の方法は、スライダーの背景とテキストコンテンツを分割することです。

つまり、各スライドは、コンテンツの後ろに絶対的に配置される背景divと、他のすべての前に絶対に配置されるコンテンツdivで構成する必要があります。

于 2012-09-12T18:28:20.120 に答える