#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
7. 浮动
对于可变高度的列来说,绝对定位就不起作用了,以下是另外一个方案。
我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。这主要用于图像,但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。
#div-1a {
float:left;
width:200px;
}
8. 浮动列
如果我们把一个元素向左浮动,并且把第二个元素也向左浮动,they will push up against each other。
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
9. 清除浮动列
在浮动元素之后,我们可以清除浮动来使其他元素正确定位。
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
糖伴西红柿说:虽然我一直用浮动布局,但是掌握好 position 也是必须的,其实也没那么难的。。。
原文来自经典的:Learn CSS Positioning in Ten Steps
补充说明:
之前老弄不明白,只能凭借一点短期内
“虐出来的经验”制作需要的效果,后来仔细研究了一下Hutia的XScroller,并且仔细
看了文档,才知道这个position属性其实是指本体对上级的定位。如果这么理解,就好
办了。
默认的属性值都是static,静态。就不用多说了。最关键的是
relative(相对)以及absolute(绝对)。
往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的
“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的
。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无










