CSS3笔记之定位篇（一）relative

知识点1：relative和absolute

•   relative: 相对自身，并会限制内部absolute元素层叠
•   absolute: 相对容器，并受到父类容器relative的影响，比如：overflow:hidden/scroll
•   fixed: 不受relative限制，只受z-index的限制

知识点2：定位

•   相对自身
•   无侵入: relative的元素只会改变自己本省的定位，不会影响其他元素，比如：巧妙应用自定义拖拽
•   top/bottom left/right 对立属性： 对于已经relative的元素设置top/bottom时，top属性有效，设置left/right属性时，left有效

知识点3：z-index层级

•   提高层叠上下文 

//给元素没有添加定位之前，图片2默认会覆盖图片1
//添加定位之后，无论图片2如果设置位置，都不会覆盖图片1
<div>
  <img src="图片1" style="position: relative">
  <img src="图片2">
</div>

•   z-index=具体数据 position=relative 产生层叠上下文
•   z-index=0 position=relative 不产生层叠上下文，不会有限制内部absolute元素层叠的问题

//外层div不加定位前，内div1的层级低于内div2的层级
//外层div添加定位和z-index=数值时，外层div1的层级高于外层div2的层级，从而使得内div1高于内div2（IE6.7失效）
//外层div只加定位和z-index=0/auto，不会影响内部div的层级关系
<div>
  <div style="position: relative; z-index: 3">
    外层div1
    <div style="z-index:1">内div1</div>
  </div>
  <div style="position: relative; z-index: 2">
    外层div2
    <div style="z-index:3">内div2</div>
  </div>
</div>

知识点4：最小化影响原则

• 最小化影响原则是指尽量降低relative布局对其他元素或布局的潜在影响

  案例一 将div中多个元素中的其中一个定位在左上角

//左上角常用方案
<div style="position: relative">
    <img src="" alt="" style="top:0px; left:0px">
    <div></div>
    <div></div>
    <div></div>
</div>
//左上角推荐方案
<div>
    <img src="" alt="" style="position: absolute;">
    <div></div>
    <div></div>
    <div></div>
</div>

  案例二：将div中多个元素中的其中一个定位在右上角

//右上角常用方案
<div style="position: relative">
    <img src="" alt="" style="position:absolute; top:0px; right:0px">
    <div></div>
    <div></div>
    <div></div>
</div>
//右上角推荐方案
<div style="positon:relative">
    <img src="" alt="" style="position: absolute;top:0px; right:0px">
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
</div>