CSS之定位相关

###为什么要使用定位

• 当需要修改元素出现的位置, 则需要使用定位
  ###定位分类
• 浮动定位 float: left/right
• 普通流定位 position: static (默认), 静态定位
• 相对定位 position: relative
• 绝对定位 position: absolute
• 固定定位 position: fixed
  ###浮动定位
• 什么是浮动定位
  • 将元素摘离普通流,元素在页面中不占用普通流空间
  • 浮动元素会放在父容器的左侧或右侧,但依然包含在父容器内
• 浮动定位的特点
  • 浮动元素外边缘不会超过父容器的外边缘
  • 浮动元素默认不会重叠
  • 浮动元素只能左右浮动,不能上下浮动
  • 对于所有元素,若是设置为浮动元素,则默认转换为块级元素
• float: none(默认)/left/right;
  • 注意: 若在一个容器内存在浮动元素,则尽可能让容器内的元素全部浮动起来。
• A Problem
  • 父容器内的元素被float之后,父容器的高度会变为0(若父容器未设置高度)
  • 解决方案有如下4种:
    • 在父容器末尾添加标签并使之清除浮动(此法浏览器兼容性好,但语义不准确,不推荐)

      <div style="clear:both"></div>或<br style="clear:both"/>

    • 为父元素设置:after伪元素(此法浏览器兼容性较好,且语义准确无污染,故推荐使用)

      .parentContainer:after{
      content: ‘’;
      display: block;
      clear: both;
      }

    • 为父元素设置overflow:hidden/auto;(此法语义不准确,且会造成页面污染,极不推荐)
    • 让父元素也浮动起来,这利用了浮动的一个特性——浮动元素会闭合浮动元素(此法语义不准确,且会造成页面污染,极不推荐)
      ###普通流定位
• 即文档流,网页中默认的定位方式
  ###相对定位
• 什么是相对定位
  • 相对元素本该出现的位置偏移某距离
• 使用场合
  • 通过操作(鼠标移入), 实现元素位置的微变
  • 配合绝对定位一起使用
    ###绝对定位
• 参考物
  • 该元素外层的非static(relative,absolute,fixed)定位的元素或者window
• 使用场合
  • 弹出菜单
    ###固定定位
• 什么是固定定位
  • 将元素固定在网页的某个位置处, 不随滚动条滚动
• 使用场合
  • 小广告
  • 返回顶部
• 多数都相对于window实现固定定位