Question

我想把div放在一起。我创造了一个小提琴。我有三个div。每个div包含一个图像。我想定位div，使得具有最大图像的div位于底部，而具有最小图像的div位于顶部。

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

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

Answer 1

请使用：

#page1 div {
    position:absolute;
}

演示：http://jsfiddle.net/ZwyTY/

Answer 2

使用绝对位置和z-index。

使用下面的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 3

只需使用position : absolute;

即可

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

http://jsfiddle.net/w4WBk/

如果您想更改最重要的顺序，可以使用z-index

Answer 4

您可以使用z-index＆amp; position: absolute将元素视为图层。但是根据您的要求和元素顺序，简单的position: absolute就足够了

#page1 div {
    position:absolute;
}

Answer 5

难道你不能只改变div的顺序吗？无论是那个还是针对每一个与位置相对的人。

Answer 6

你只能在你的主div中定义绝对位置，它会自动调用HTML中的顺序或编码图像，这里不需要根据你的要求在你的CSS中使用z-index。

<强> CSS

#page1 div {
position:absolute;
}

但是，如果您要更改HTML代码中 #maximum，＃medium，#fittle div's 的顺序，则必须定义z-index属性以覆盖图像： -

<强> 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/

如何将div放在一起

6 个答案: