27

「box-left-mini」を下にある の前に行かせようとしてdivいます。

<div class="box-left-mini">
   this div is infront
    <div style="background-image:url(/images/hotcampaigns/campaign-sample.png);height:100px;width:100px;">
        this div is behind
    </div>
</div>

の CSSbox-left-miniは次のとおりです。

.box-left-mini {
    float:left;
    background-image:url(website-content/hotcampaign.png);
    width:292px;
    height:141px;
}
4

5 に答える 5

20

http://jsfiddle.net/f2znvn4f/

HTML

<div class="box-left-mini">
    <div class="front"><span>this is in front</span></div>
    <div class="behind_container">
        <div class="behind">behind</div>        
    </div>
</div>

CSS

.box-left-mini{
    float:left;
    background-image:url(website-content/hotcampaign.png);
    width:292px;
    height:141px;
}

.box-left-mini .front {
    display: block;
    z-index: 5;
    position: relative;
}
.box-left-mini .front span {
    background: #fff
}

.box-left-mini .behind_container {
    background-color: #ff0;
    position: relative;
    top: -18px;
}
.box-left-mini .behind {
    display: block;
    z-index: 3;
}

非常に多くの異なる回答が得られるのは、何をしたいのかを正確に説明していないためです. コードで得られる答えはすべてプログラム的に正しいものですが、それはすべてあなたが達成したいこと次第です

于 2013-10-24T09:17:08.483 に答える
10

z-index上の div には正の数を、下の div には負の数を指定して、divに追加する必要があります。

例

于 2013-10-24T09:14:42.487 に答える
5

一般的な方法で質問に答えるには：

を使用z-indexすると、これを制御できます。csstricks の z-index を参照してください。

上位z-indexの要素は、下位の要素の上に表示されますz-index。

たとえば、次の HTML を見てみましょう。

<div id="first">first</div>
<div id="second">second</div>

次の CSS があるとします。

#first {
    position: fixed;
    z-index: 2;
}

#second {
    position: fixed;
    z-index: 1;
}

#firstの上になり#secondます。

しかし、具体的にはあなたの場合：

div要素は、div前に置きたいの子です。これは論理的に不可能です。

于 2013-10-24T09:12:16.073 に答える
0

1つの可能性は次のようになります。

HTML

<div class="box-left-mini">
    <div class="front">this div is infront</div>
    <div class="behind">
        this div is behind
    </div>
</div>

CSS

.box-left-mini{
float:left;
background-image:url(website-content/hotcampaign.png);
width:292px;
height:141px;
}
.front{
    background-color:lightgreen;
}
.behind{
    background-color:grey;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    z-index:-1;
}

http://jsfiddle.net/MgtWS/

しかし、実際には div 要素のレイアウトに依存します。つまり、それらがフローティングであるか、絶対配置されているかなどです。

于 2013-10-24T09:17:09.993 に答える
0 
container can not come front to inner container. but try this below :

Css :
----------------------
.container { position:relative; }
    .div1 { width:100px; height:100px; background:#9C3; position:absolute; 
            z-index:1000; left:50px; top:50px; }
    .div2 { width:200px; height:200px; background:#900; }

HTMl : 
-----------------------
<div class="container">
    <div class="div1">
       Div1 content here .........
    </div>
    <div class="div2">
       Div2 contenet here .........
    </div>
</div>
于 2013-10-24T09:21:00.400 に答える