一、CSS定位:改变元素在页面上的位置

二、CSS定位机制:

    普通流:元素按照其在HTML中的位置顺序决定排布的过程

    浮动

    绝对布局

三、CSS定位属性:

    1. position    把元素放在一个静态的、相对的、绝对的、或固定的位置中

       四个属性:

        static     静态(偏移量对它不起效果)

        relative    相对定位

        absolute    绝对定位

        fixed     固定(不随滚动条滚动而滚动)

        偏移量:        

            top    元素向上的偏移量

            left    元素向左的偏移量

            right    元素向右的偏移量

            bottom    元素向下的偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position1"></div>
    <script>
        for(var i=0; i<100; i++){
            document.write(i+"<br/>");
        }
    </script>
</body>
</html>
#position1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 100px;
    top: 100px;
}

     

     2. z-index    设置元素的堆叠顺序

#position1{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 100px;
    top: 100px;
    z-index: 2;
}

#position2{
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: relative;
    left: 110px;
    top: 70px;
    z-index: 1;
}

   z-index:值  谁的值大谁就在前面显示

   这个值没有限制,可以随便设置,但是尽量在100以内

   不单单相对布局存在这个问题,绝对布局也是存在的 


    3. overflow    设置元素溢出区域发生的事情

    4. clip    设置元素显示的形状

    5. vertical-align    设置元素垂直对齐方式