学习布局（17） 特殊布局---定位布局

 特殊布局情况----- 定位布局

        HTML+CSS布局方式之中，最常见的两种布局模式是，浮动布局和定位布局当页面中出现多个元素

 定位-----position属性：

        为一个元素设置位置区域

position: static 默认值
position: absolute

•  生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
• 元素通过 left、top、right、bottom属性

position: fixed 

•    生成绝对定位的元素，相对于浏览器窗口进行定位
•    元素通过 left、top、right、bottom属性

position: relative 

• 生成相对定位的元素，相对于其正常位置进行定位

 定位对文档流的影响:

•  当一个元素设置了position:absolute 和 postion: fixed时, 该元素会脱离文档流，从而对父级以及兄弟级元素的布局造成影响。

• position: relative，不会脱离文档流，不会有布局上的问题

 

.wrap div {
            width: 200px;
            height: 200px;
            border: 2px solid red;
            background-color: #ff9999;
        }

        /**
           第一个div设置position:relative,也根据top等属性产生了位置偏差，而第二个div的位置没有受到任何影响，说明
           相对定位不会让一个元素脱离文档流
         */
        .wrap .box {
            position: relative;
            left: 20px;
            top: 50px;
            background-color: #3399ff;
        }

<div class="wrap">
        <div class="box">设置relative的div元素</div>
        <div>HTML5布局之路</div>
    </div>

 

        .wrap div {
            width: 200px;
            height: 200px;
            border: 2px solid red;
            background-color: #ff9999;
        }      
        .wrap .box1 {
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: #3399ff;
        }

 <div class="wrap">
         <div class="box1">设置absolute的div元素</div>
         <div>HTML5布局之路</div>
     </div>

 绝对定位的位置控制

 绝对定位的元素彼此之间不互相影响

       设置属性值为absolute会将对象脱离出正常的文档流，进行绝对定位，并不会考虑它周围内容的布局。假如其他定位对象

已经占据了给定的位置，它们之间不会相互影响，而会在同一个位置层叠。

  <div class="wrap">
        <div class="box1">设置absolute的div元素</div>
        <div>HTML5布局之路</div>
    </div>

 绝对定位激活：

   必须设置position: absolute, 且指定left right top bottom 中至少一个属性。

 绝对定位针对谁进行定位？

•    如果父级没有设置position属性，那么当前的absolute则结合 top,right,left,bottom属性则以浏览器左上角为原始点进行定位。
•    如果父级设置了position属性，且值为relative、absolute、fixed,则top,right,left,bottom针对父级的左上角为原始点进行定位

定位-----left属性：

    控制元素偏移的4种属性，top,right,left,bottom属性均可以设置为负值,单位可以选用绝对单位、或者是相对定位百分比。
    同时设置同方向的两个值，要基于元素是否存在固定宽高而分成两类
  绝对定位元素存在固定宽高:

•  在水平方向上，无论是先写left,还是先写right,都按照left的值进行渲染
•  在垂直方向上，不论先写top值,还是后书写bottom值，均按照了top值进行渲染

  绝对定位元素没有设置固定的宽高:

•  合理的left与right(或top与bottom)都会生效
•  元素宽度 = 父级宽度 - left值 - right值
•  如果计算得到的元素宽度为负值，会自动变为0像素

 层级覆盖关系

定位----- z-index属性

       在一个网页中存在多个定位的元素，当这些元素相互重叠时，就涉及到层叠的关系。定位元素默认的z-index值为0，数字越大，级别越高，数字越小，级别越低。如果将z-index设置为负值，那么层叠顺序会在HTML文档之后, 如果HTML文档设置了背景颜色，这个定位元素将不会被看见。

      z-index 只能针对同级的标签有效，针对两个绝对定位的元素进行层级比较时，首先比较其父级，再比较其子级

.demo {
            position: relative;
        }

        .box_1 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #3399ff;
            border: 1px solid salmon;
            z-index: 12;
        }

        .box_2 {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 180px;
            height: 180px;
            background-color: chocolate;
            border: 1px solid red;
            z-index: 5;
            text-align: right;
        }

固定定位 ：

     fixed可定位相对于浏览器窗口的指定坐标。这个元素的位置可通过left,right,top,bottom属性来规定不论窗口滚动与否，元素都会留在指定位置。
     该定位方法，在移动端极为常用，在pc端也会用于头部导航区，无论内容区的高度有多少，滚动条是否滚动，固定位置的元素始终显示在初始位置。

         .main {
            width: 400px;
            margin: 0 auto;
            padding-top: 40px;
        }

        .nav {
            position: fixed;
            top: 0px;
            width: 400px;
            height: 40px;
            background-color: #ff9999;
            text-align: center;
            line-height: 40px;
            color: white;
        }

        .box {
            height: 150px;
            border: 1px solid black;
        }

   <!-- 固定定位 -->
    <div class="main">
        <!-- 当滚动条滚动时，导航条始终显示在浏览器窗口的最顶端 -->
        <div class="nav">被固定定位的导航条</div>
        <!--
            由于导航条进行了固定定位，已经脱离了文档流，因此它之后的兄弟级元素在计算布局时会忽略到
         导航条，但导航条依旧占据着空间，并且位于所有的结构之上，通过为父元素设置一个padding-top值，并且
         让这个值等于导航条的高度，从而避免这个问题。
        -->
        <div class="box">内容块01</div>
        <div class="box">内容块02</div>
        <div class="box">内容块03</div>
        <div class="box">内容块04</div>
        <div class="box">内容块05</div>
    </div>