概念：将元素固定在布局的某一位置。

特点：元素固定在某一位置，不会影响其他盒子位置。

组成：定位=定位模式+边偏移

定位模式：决定元素的定位方式。

position：static | relative | absolute | fixed ；

边偏移：top、bottom、left、right。盒子移动的最终位置。

定位模式详解：

/* 共用属性 */
<style>
  .divStatic {
    width: 200px;
    height: 200px;
    background-color:antiquewhite;
    border: 1px solid black;
    margin-bottom: 10px;
   }
  .bigDiv {
   height: 300px;
  }
  .bigBorder {
    border: 1px solid black;
  }
</style>

• static：静态定位，按照标准流特性摆放位置，没有边偏移。这个就不写示例了。

相对定位

• relative：相对定位，在元素移动位置时，参照元素原来的位置进行移动定位。

特点：不脱标，继续保留元素原来的位置。

<div class="bigDiv">
  <h3>相对定位</h3>
  <div class="divStatic">原来的盒子位置</div>
</div>

<div class="bigDiv">
  <h3>相对定位</h3>
  <div class="divStatic divRelative">
      相对定位后的盒子位置：
      position: relative;<br>
      top: 50px;<br>
      left: 50px;
   </div>
</div>

.divRelative {
  position: relative;
  top: 50px;
  left: 50px;
}

绝对定位

关键词：absolute。

如果没有父元素或祖先元素，则参照浏览器位置进行移动定位。

如果存在父元素或祖先元素，则参照其最近一级有定位的父元素或祖先元素进行移动定位。

特点：脱标，不再保留元素原来的位置。

• 没有父元素的绝对定位

<h3>绝对定位</h3>
        <div class="bigDiv">
            <h5>没有父级元素的绝对定位</h5>
            <div class="divStatic divAbsoluteNf">
                参考浏览器位置定位。<br>
                position：absolute；<br>
                top:350px；<br>
                left：300px；
            </div>
        </div>

.divAbsoluteNf {
  position:absolute;
  top: 350px;
  left: 300px;
}

• 有定位父元素的绝对定位

<h5>有定位的父级元素绝对定位</h5>
        <div class="bigBorder divAbsoluteOFather">
            <div class="divStatic divAbsoluteOf">
                参考有定位的父元素位置定位。<br>
                position: absolute;<br>
                top: 0;  <br>
                right: 0;
            </div>
        </div>

.divAbsoluteOFather {
  position: relative;
  width: 350px;
  height: 350px;
}
.divAbsoluteOf {
  position: absolute;
  top: 0;  
  right: 0;
}

• 最近一级有定位父元素的绝对定位

<div class="bigDiv bigBorder divAbsolutegP">
  <div class="bigBorder divNoAFather">
    <h5>最近一级有定位的父元素绝对定位</h5>
		<div class="divStatic divAbsolutegPoF">
      参考最近一级有定位的父元素定位。<br>
      position：absolute；<br>
      bottom:0；<br>
      left：0；
    </div>
   </div>
</div>

.divAbsolutegP {
  position: relative;
  width: 350px;
  height: 350px;
}
.divNoAFather {
  width: 300px;
  height: 200px;
}
.divAbsolutegPoF {
  margin: 0;
  position: absolute;
  left: 0;  
  bottom: 0; 
}

固定定位

关键词：fixed

参考浏览器可视区域进行定位，在浏览器页面滚动时其位置不变。

特点：跟父元素没有任何关系，不随浏览器滚动条滚动，不占有原先的位置。

<div>
  <div class="divStatic divFixed">
    固定定位：<br>
    存在浏览器的可视区域。<br>
    不随滚动条滚动。<br>
    position: fixed;<br>
    top: 50%;<br>
    right: 0;
  </div>
</div>

.divFixed {
  position: fixed;
  top: 50%;
  right: 0;
}

粘性定位

关键词：sticky

相对定位和固定定位的混合。以浏览器可视区域为参照点定位。

特点：占有原先的位置。必须添加四个方位中任意一个属性才生效。

<div>
  <div class="divStatic divSticky">
    粘性定位:
    position:sticky;
    top: 0;
    left: 50%;
  </div>
</div>

.divSticky {
  position:sticky;
  left: 50%;
}

学成在线定位示例

• 右上角小图标：包含在liHocer的li标签中。

<ul class="liHover clearF">
  <li>
     <img src="./images/Jp1.png" alt="">
     <img src="./images/hot.png" alt="" class="hot">
       <a href="#">
       <p class="fS14 fC050505">Think PHP 5.0 博客系统实战项目演练</p>
       <p class="fS12 pT0">
         <span class="fCff7c2d">高级</span>
           ·
          <span class="fC999999">1125人在学习</span>
        </p>
       </a>
    </li>
    <li>
       <img src="./images/Jp2.png" alt="">
       <img src="./images/new.png" alt="" class="new">
       <a href="#">
         <p class="fS14 fC050505">Android 网络图片加载框架详解</p>
         <p class="fS12 pT0">
           <span class="fCff7c2d">高级</span>
            ·
            <span class="fC999999">1125人在学习</span>
         </p>
        </a>
     </li>
</ul>

.liHover li {
    width: 228px;
    background-color: white;
    margin-right: 12px;
    margin-left: 2px;
    position: relative;
}
.liHover .hot,
.liHover .new {
    width: 40px;
    height: 24px;
    position: absolute;
    top: 5px;
    right: -4px;
}

• 左侧竖导航：包含在main模块中。

<div class="divFix bGw">
  <ul class="fS14">
      <li><a href="#">编程入门</a></li>
      <li><a href="#">数据分析师</a></li>
      <li><a href="#">机器学习工程师</a></li>
      <li><a href="#">前端开发工程师</a></li>
      <li><a href="#">人工智能工程师</a></li>
      <li><a href="#">全栈工程师</a></li>
      <li><a href="#">IOS工程师</a></li>
      <li><a href="#">VR开发者</a></li>
      <li><a href="#">深度学习</a></li>
      <li><a href="#">商业预测分析师</a></li>
      <li><a href="#">Android开发工程师</a></li>
    </ul>
</div>

.main {
    position: relative;
}
.divFix {
    width: 183px;
    height: 475px;
    position: absolute;
    top: 390px;
    left: -220px;
}
.divFix ul {
    padding: 20px 25px;
}
.divFix li {
    width: 133px;
    height: 40px;
    line-height: 40px;
}
.divFix a:hover {
    color: #00a5fe;
}

子绝父相：子元素绝对定位，其父元素需要有相对定位。