2

ロゴを表す div と、スライド ショーを表す別の div があります。スライド ショーの div はロゴの div の下にあり、その下とその後ろに配置したいと考えています。

これは私が持っているものです:

HTML

  <div id="site-container">
    <div id="header-container">
    <div id="logo"></div>
    </div>
    
    <div id="slide"></div>
    </div>

CSS

#logo {
   background:url(img/logo.png) no-repeat left top;
   width:259px;
   height:147px;
   float:left;
}

#slide {
   background:url(img/slide.png) no-repeat left top;
   width:776px;
   height:437px;
   float:left;
}

z 位置を使用しようとしましたが、使用したくないものになりました。正しい位置を移動せずにロゴ div を最上位レイヤーにする理由は何ですか?

4

5 に答える 5

4

以下を試してください: CSS

  #Behind{
    width:100%;
    background-color:orange;
    position: absolute;
    z-index: -1;
    padding:50px;
   }
  #TopOne{ 
    position: absolute;
    top:70px;
    left:50px;
    background-color:wheat;
    padding:20px; 
    }

そしてhtmは単に

    <div id="Behind"></div>
    <div id="TopOne">This is Just Testing :)</div>

これは JSFiddle リンクでも ある JSFiddle

于 2014-02-27T11:15:35.180 に答える
4

divの上に置きたい場合は、を使用する必要がありますz-index。#logoandを変換して属性#slideを持たせる必要があり、位置を上下に移動する div に適用する必要があります。positionz-index

于 2013-08-13T09:55:47.750 に答える
1

私はこれらを使用しました：

#logo {
   background:url(img/logo.png) no-repeat left top;
   width:259px;
   height:147px;
   float:left;
   position:absolute;
   z-index:1;
}

#slide {
   background:url(img/slide.png) no-repeat left top;
   width:776px;
   height:437px;
   float:left;
   position:relative;
}

スライドショーは本来あるべきときですが、左側にとどまる必要がある間、ロゴdivは右側に浮かんでいます...私の英語の文法がわからない場合は申し訳ありません笑

于 2013-08-13T10:10:02.830 に答える