定位方案有四种：静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。
在这四种方案中，静态和相对定位不会影响整个文档的布局，而绝对和固定定位会与文档分开，因此页面不会为这两种类型的定位元素保留空间。 在默认状态下，所有元素都是静态放置的，即元素从上到下以及从左到右的顺序排列。
只要为元素设置了“ position”属性，就可以使用“ top”，“ right”，“ bottom”和“ left”属性精确定义其位置。
扩展资料：
相对定位中的“top”，“right”，“bottom”和“left”用于设置距元素原始位置的偏移量，但是绝对定位的四个属性不同。
在绝对定位中，“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说，已定位元素的边距和包含块的边界将影响top的值，进而影响绝对定位元素的位置，但包含块的填充将不起作用。
在相对定位中，“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”，是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离，“left”和“right”也是如此。
分类: 电脑/网络 >>程序设计 >>其他编程语言问题描述:
我写了段CSS，但是左边的和右边的是在同一行，但右边的跑下边一行了，请教了
CSS代码 ---------------------------------
#icon_left {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
float: left
}
#icon_middle {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
margin-right: auto
margin-left: auto
}
#icon_right {
height: 72px
width: 60px
font-family: Verdana, Arial, Helvetica, sans-serif, "宋体"
font-size: 12px
font-weight: normal
text-align: center
line-height: 20px
float: right
}
DIV代码 -----------------------------------
<div id="icon_left"><img src=images/icon1.gif /><br />
战略&秘籍</div>
<div id="icon_middle"><img src=images/icon1.gif /><br />
地图下载</div>
<div id="icon_right"><img src=images/icon1.gif /><br />
任务下载</div>
解析:
试验了很久没搞出来，估计是float这个属性在块的行分布的计算上存在BUG，你看看这篇文章：
sace/members/persons/lpj/blog/CSS%2CFloat%2C01/
其中有一段：
“如果居左的浮动被放置在其容器的左上脚，并且其后跟随一个同向的浮动，该浮动会被放置在容器右上脚，然后移动到左侧，边界延伸到第一个浮动的右侧时停止。”
“最后的一种行为让我们创建整行的floats，每个都被放置在前一个的右侧（或者左侧，如果使用{float:right}). 同样，当一行中没有足够的空间时，多出来的floats绕到下一行，非常像行内元素那样。这对于制作可点击的图像“简略图”非常方便，因为矩阵会自动调整到屏幕的尺寸，只是简单地在需要时进行回绕。”
似乎说明了你的要求无法实现的原因……
如果你坚持采用这样的页面布局，可以考虑用表格，用表格要快的多了……
哈，参考了这篇文章:
ziyihome/bbs/dispbbs?boardid=13&id=498&page=1
搞出来了，你得把处于中间的那个块在代码中放在最后面……
