最近在系统学习css,看到了定位这一部分,发现之前对这些概念还有点模糊,所以觉得有必要在这里详细的记录一下。
定位可以分为广义上的定位和狭义上的定位,广义上的定位就是把元素放在某个位置,这种定位操作可以通过任何css规则来完成。这里要说的是狭义上定位操作,在css中有一个position属性,它包含4个值,下面分别列出来:
1、static:这是默认的属性值,就是盒子按照标准流布局,包括浮动方式。
2、relative:相对定位,定义了此属性的盒子通常以它在标准流布局中的位置为基准,以偏移量值移动指定的距离,此时此盒子还在标准流中,其他盒子还是以同样的态度对待它。
3、 absolute:绝对定位,盒子以包含它框为基准,移动偏移量值的距离,此时他已经脱离了标准流布局,其他的元素会当它不存在一样。
4、fixed:固定定位,和绝对定位类似,但是他是以浏览器窗口为基准进行定位,当拖动浏览器滚动条时,他也佁然不动。
这里static就不着重讲了,他就是按照文档流式布局,不会发生移动的效果。
一、下面讲讲relative相对定位,给出默认状况下的文档布局:
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<style type="text/css">