divsを互いの上に配置する方法

Question

divsを互いの上に配置したいと思います。私はフィドルを作りました。私には3つの部門がある。各divにはイメージが含まれています。私は最大の画像を持つdivが最下部にあり、最も小さい画像を持つdivが上になるようにdivを配置したいと思います。

http://jsfiddle.net/bobbyfrancisjoseph/7spcZ/2/

http://jsfiddle.net/bobbyfrancisjoseph/7spcZ/2/show/

Answer 1

使用位置です。あなたが唯一のorderdか、ここにあなたのHTMLでコーディングを使用するには、no-必要ではないとして、画像を自動的に呼び出しますあなたのメインのdivに絶対位置を定義することができ、CSS

#page-left { 
float: left; 
margin:5px; 
} 

#page-right { 
float: left; 
margin:5px; 
} 

#largest { 
position: absolute; 
    z-index: 1; 
} 
#medium { 
position: absolute; 
    z-index: 2; 
} 
#smallest { 
position: absolute; 
    z-index: 3; 
} 

http://jsfiddle.net/sannankhalid/sc8qE/

Answer 2

はこれを使用します。

#page1 div { 
    position:absolute; 
} 

デモ：http://jsfiddle.net/ZwyTY/

Answer 3

は、あなただけのdivのの順序を変更することができませんでしたか？どちらかというと、それぞれ相対的な位置関係でターゲットを設定します。

Answer 4

ちょうどあなたが上に来るものの順序を変更したい場合、あなたはあなたが要素を治療するためのz-index & position: absoluteを使用することができますz-index

Answer 5

を使用することができますposition : absolute;

#largest, #medium, #smallest{ 
    position: absolute; 
} 

http://jsfiddle.net/w4WBk/

を使用層として。しかし、あなたの要件と要素の順序に従って、簡単なposition: absoluteは、zインデックスを持つ絶対的に十分

#page1 div { 
    position:absolute; 
} 

Answer 6

以下

使用あなたの現在の要件に応じてあなたのCSSのZ - インデックス。

CSS

#page1 div { 
position:absolute; 
} 

しかし、あなたがカバーのためのz-indexプロパティを定義する必要がありますよりも、あなたが＃、最大＃メディア＃最小のdivのあなたのHTMLコード内の順序を変更する場合は

HTML

<div id ="page1"> 
      <div id = "smallest"> 
       <img src="http://ssl.gstatic.com/android/market/pongoproductions.Brad_Pitt_100100/hi-256-0-acd81f6f98299f7b230fc5014a9eb18c536adc8a"/> 
      </div>         
      <div id = "medium"> 
       <img src="http://www.picgifs.com/celebrities/b/brad-pitt/celebrities-brad-pitt-179755.jpg"/> 
      </div>    
      <div id = "largest"> 
       <img src="http://www.moviespad.com/photos/brad-pitt-poster-392f6.jpg"/> 
      </div> 
     </div> 

- ：として画像をアップ

CSS

#page1 div { 
position: absolute; 
} 

#largest { 
    z-index: 1; 
} 
#medium { 
    z-index: 2; 
} 
#smallest { 
    z-index: 3; 
} 

http://jsfiddle.net/9cg3h/