css定位

1.网页布局时经常用到的定位方法：
absolute：绝对定位，相对于static定位以外的第一个父元素进行定位。素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative：相对定位，相对于其正常位置进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed： 绝对定位，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
对于这些定义已经很熟悉了，但是在实际开发过程中还是会有混乱和试错，原因之一是对这些定位所造成的影响不够熟悉，所以通过实践操作对它们进行一下梳理和总结。
有一点需要事先说一下的就是关于margin，许多文章里把它作为一种定位方法进行总结，我个人认为虽然margin可以作为一种辅助定位方法，但是它本质还是盒模型的外边距，大的布局定位还是应该考虑上述三种定位方法，margin可以用来进行微调或者达到某些效果使用。

1. 正常文档流
   如果我们只写三个div，并没有position设置，它们是按如下排列的。
   

    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>

        .div1{
            background-color: red;
            width: 100px;
            height: 110px;

        }
        .div2{
            background-color: blue;
            width: 100px;
            height: 110px;
        }
        .div3{
            background-color: green;
            width: 100px;
            height: 110px;

        }

1. relative定位
   relative相对于元素本身的正常位置进行移动，而它本身应有的占位空间是不会变的，所以，简单的相对定位效果如下：

   

   可见，蓝色块由于相对定位，位置较它本来的位置进行了偏移，但是它原本的占位空间是保留的，所以绿色块的位置不变。

   relative定位与margin的结合其实没什么好解释的，就是先画出有外边距的div，然后相对定位。很多文章解释为，定位结果为偏移属性值和外边句累加效果，从效果上看确实如此，但是我觉得这样很容易混淆margin的本质意义，使我们在定位的时候错误地把margin当成一种定位方法来使用。

2. absolute定位
   绝对定位会相对于第一个定位为absolute或者relative的父元素进行定位，如果没有，则以body元素为参照进行定位。绝对定位元素会脱离文档流！！！

蓝色块absolute定位后脱离文档流，原本的占位空间不保留，所以绿色div会挨住红色div。

同理，absolute定位使用margin时也没什么好解释的，就是一个脱离的文档流的有外边距的div，对它进行绝对定位。有的文章中总结为，如果偏移属性值和margin属性值移动方向相反，则偏移属性值有效，反方向的margin属性值无效。正确的解释是，都有效啊！如下图所示，右外边距是有的。从定位效果上看，div只是右移了30px，而在这里，margin-right的作用就是添加右外边距，所以说margin属性值无效是不准确的。

当div设置了固定width和height，absolute定位的left和right都有设置时，以left和top为准。当div没有设置宽高时，div的宽高为四个偏移值形成的区域。

1. 居中与定位
   居中是经常用到的定位效果，这时margin就要在定位方面派上用场了。下面分别就relative和absolute两种定位下的居中做个讨论。
   正常文档流下，设置红色div属性margin:0 auto，这个红色div就位置居中了。
   

绝对定位时，设置黄色div的position: relative，作为绝对定位的参考父元素。设置绿色div的position:absolute, 绿色div脱离文档流。

    <div class="div4">
        <div class="div5"></div>
        <div class="div6">
            <!-- <div class="div61"></div> -->
        </div>
        <div class="div7"></div>
    </div>

        .div4{
            background-color: yellow;
            width: 200px;
            height: 250px;
            position:relative;
        }
        .div5{
            background-color: red;
            width: 100px;
            height: 50px;
        }
        .div6{
            background-color: green;
            width: 70px;
            height: 70px;
            position: absolute;

        }

这时，因为绿色div脱离文档流，所以对它设置margin:0 auto;是无效的。所以，absolute定位的居中可以通过left和margin的配合来实现，设置left:50%; margin-left: -halfdivwidth;

        .div6{
            background-color: green;
            width: 70px;
            height: 70px;
            position: absolute;
            left: 50%;
            margin-left: -35px;
        }

关于text-align: center;属性，它只能使包含的文本内容居中，而对子div无效。设置黄色div属性text-align: center;，效果如下：

需要注意的点：
1. absolute定位因为脱离文档流，是无法撑开父元素的。
2. absolute定位，ie下参照物需设置宽度或高度bottom和right属性才可以正确定位(未验证)。
3. div的width属性不包括padding和margin和border。可通过设置：box-sizing: border-box，使width属性包括border和padding。
4. 文字在div中垂直居中可以设置line-height等于div的高。
5. float也经常用于页面布局，但是float本质上不是一个定位属性，float是一个元素属性，最开始也是最根本是用在图片上，使文字环绕图片。浮动会使元素脱离文档流。
float与position的属性相结合时，position为relative时，元素在浮动的位置基础上，按相对定位移动。position为absolute时，浮动失效。
6.设置了背景图片no-repeat时，设置background-size:100%可使背景图片平铺充满div。
7.使div高度为设备高度，html, body,.container {height: 100%; }