首页 > 代码库 > html中相对(relative)，绝对(absolute)位置以及float的学习和使用案例 （转）
html中相对(relative)，绝对(absolute)位置以及float的学习和使用案例 （转）
这几天着手于CSS的研究，研究的原因主要是工作需要，最近发现如果做前端仅仅会javascript很难尽善尽美，当然懂样式和html在一定程度上可以让我们更近一步。
css较为简单，由于个人擅长编写代码，所以很少研究，偶然发现如果会做界面给自己带来的巨大好处，我开始了CSS的学习。
css三大选择器：id选择器，class选择器元素选择器，美工一般只用class选择器。所以我这里也只采用class选择器。（备注：id一般用于编程人员书写脚本，
在编程过程中尽量减少在代码通过class获取元素对象，相应的id选择器也应该尽量少的用于样式中，id的命名一般都属于编程人员分类的事）。
简单页面：
<body>
<div id="left" class="left widhei">1</div>
<div id="right" class="right widhei">2</div>
<div id="down" class="down widhei">3</div>
</body>
在布局开始时一般需要取出标签的边距，不知道为什么设计者会设计这个边框：
body {color: #000;background: #fff;margin: 0;padding: 0;}这个可以理解为对页面的初始化
在html中默认标签布局为线性布局，从上而下，例如：
<style type="text/css">
body {color: #000;background: #fff;margin: 0;padding: 0;}
.left{ background:#606060;}
.right{ background:#123456; left:70px;top:0px;}
.down{background:#321321;left:100px;top:-40px;}
.widhei{width:40px;height:40px}
</style>
</head>
down widhei，其中样式可以叠加的功能在很大程度上减少了代码的冗余。以上的效果如下图：
那么我们如何随心所欲的将各个div按照自己的想法进行布局呢？这里我们需要采用布局，布局有相对位置：relative，和绝对位置：absolute两种方式，
相对布局是相对前一个div进行布局，绝对布局是对于整个body中而言，下面我们将结束一下相对布局的效果：
.right{ background:#123456; left:60px;top:10px;position:relative;}
.down{background:#321321;left:120px;position:relative;}
效果如下图：
可以看出相对布局是相对于前一个元素，如果我们修改样式中的top元素将会更加明显.
如果我们通过相对位置将所有div水平布局，那么我们只需要修改top属性：
.right{ background:#123456; left:60px;top:-40px;position:relative;}
.down{background:#321321;left:120px;position:relative;top:-80px}
效果如图所示：
关于绝对位置，需要改动的仅仅是position:absolute还需要将上面的top修改，在绝对位置中top和left,right等都是大于0的。（来自于个人总结）
.right{ background:#123456; left:60px;top:-20px;position:absolute;}
.down{background:#321321;left:120px;position:absolute;top:-30px}
这种修改的结果是只能显示一个div原因在于top小于0的部分将被隐藏，效果图如：
如果将top熟悉去掉，那么会出现什么样的效果呢，html中网页布局默认是相对布局的，也就是说结果就是后两个div的top属性是相对于div1而言,由于后
两个div被定义布局为relative所以他们的top默认为40，都是相对应div1而言的。效果如图：
如果将top改为0那么三个div的效果与3.png一样,这就是类似于被强行放置于该位置。
最后再补充一下关于float的运用：float翻译为浮动层，不占据页面空间，很多广告都是使用的浮动层，也方便后台进行信息推送。
.left{ background:#606060;}
.right{ background:#123456; float:left;top:0;position:absolute}
.down{background:#321321;float:left;top:0;position:absolute}
.widhei{width:40px;height:40px}
如果将样式修改为如上所示，将使得最后一个div覆盖前面的所有div,也可以通过left等属性将浮动层定位，那么浮动层将不受body影响。
当然要想做好一个网页界面还要改有很强的审美观，这点我是很难做到的。
下面再写一个关于float的案例：
.left{ background:#606060;float:right;top:0;}
.right{ background:#123456;left:0px;position:absolute}
.down{background:#321321;left:60px;position:absolute}
.widhei{width:40px;height:40px}
这样会看到div1显示在页面右边，其他两个div在其对应位置处。
关于css的学习很大程度需要实际操作，这个确实很简单，但是要做好一个看上去还行的页面并不是很容易，再此勉励
转：http://blog.163.com/wujicaiguai@126/blog/static/170171558201392201158263/
html中相对(relative)，绝对(absolute)位置以及float的学习和使用案例 （转）