css定位属性

• position
  设置元素的定位方式
• 属性值
  • static
    在文档流中默认的状态
  • relative 相对定位
    在文档流中占据原本的位置。
    根据原本的位置定位，用水平和垂直偏移量来改变元素的位置。
    不设置偏移量不改变位置。
    改变后的元素提高了一个层级

    position:relative;
    

  • absolute 绝对定位
    从文档流中脱离，原本的位置不保留
    不设置偏移量不改变位置。
    设置绝对定位的元素提高了一个层级，会覆盖下面的元素
    用水平和垂直偏移量来改变元素的位置。
    使元素的性质发生改变，行内元素变为块元素，块元素宽高被内容撑开
    根据包含块定位
    • 包含块
      离本元素最近的开启了定位的祖先元素
      如果都没开启，则包含块为浏览器的视口，也就是内容区的左上角
  • fixed 固定定位
    与绝对定位相似，同样以包含块定位
    同样脱离文档流
    • 不同点：
      它的包含块始终是浏览器的视口，也就是内容区的左上角
      他的位置不会随着浏览器滚动条的移动而变化。
      如果不设置水平与垂直偏移，它将始终处于原本的位置
  • sticky 粘滞定位
    以包含块定位，它的包含块始终为浏览器的视口。
    可以让元素到达某个位置后将其固定
    如果它为子元素，当到达父元素底部时，固定取消
• 水平与垂直的偏移量
  • 水平偏移量设置
    只用设置一个属性就可以
    • left 属性
      值为正时向右移动，负值向左移动
    • right 属性
      值为正时向左移动，负值向右移动
  • 垂直偏移量设置
    只用设置一个属性就可以
    • top 属性
      值为正时向下移动，负值向上移动
    • bottom 属性
      值为正时向上移动，负值向下移动

  top:100px;
  bottom:100px;
  left:100px;
  right:100px;