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>
posted @ 2013-03-13 16:35  海边菩提  阅读(219)  评论(1)  编辑  收藏  举报