css position
<div id="parent">
<div id="sub1">sub1</div>
<div id="sub2">sub2</div>
</div>
1. Relative:相对定位是"相对于"元素在文档流中初始位置进行偏移. 当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移.
sub2的位置是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。
2. Absolute
(1)当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,此时sub1按照这个parent来进行定位。
(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位
如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位
sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,此时sub2将获得sub1的位置,它的文档流不再基于 sub1,
而是直接从parent开始。
2. fixed
fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。
4. static
position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。
5. 布局:
http://www.qianduan.net/css-position.html1. position:relative + position:absolute
如果给div-1设置relative定位,那么div-1内的所有元素都会相对于div-1定位,如果给div-1a设置absolute定位,就可以把div-1a移动到div-1的右上方
2. 两栏绝对定位
#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }
3. 两栏绝对定位定高
4. 浮动
我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。这主要用于图像,但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)
#div-1a { float:left; width:200px; }
下面是一个例子
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .main{ position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } .left{ position: absolute; top: 0; left: 0; right: 0; bottom: 42px; width: 270px; } .right{ position: absolute; top: 0; left: 270px; right: 0; bottom: 42px; border-left: 1px solid #cccccc; overflow-y:auto; } .foot{ position: absolute; bottom: 0; right: 0; left: 0; height: 31px; border-top: 1px solid #cccccc; } .title{ padding: 10px 10px 0 10px; width: 250px; overflow: hidden; text-overflow: ellipsis; } .titleContent{ overflow-y: auto; overflow-x: hidden; position: absolute; top: 40px; bottom: 0; width: 270px; } </style> <title></title> </head> <body> <div class="main"> <div class="left"> <div class='title' style='background-color:red;'> 444444444444444444444444555555555555555555555555555555555 </div> <div class='titleContent' style='background-color:green;'> 444444444444444444444444444444444444444444444<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br> </div> </div> <div class="right" style='background-color:blue;'> <div> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br> </div> </div> <div class="foot" style='background-color:grey;'></div> </div> </body> </html>