Web前端学习—基础篇(22)_css定位机制是什么？position定位属性、属性特性都有哪些、如何使用

4.12、定位

css定位机制：普通流、浮动、定位

4.12.1、定位原理

css的定位属性允许相对于元素本身，相对于父元素，相对于浏览器窗口位置调整
网页中 覆盖关系

• 定位偏移属性
  left属性|right属性
  top属性|bottom属性
  属性值：auto|数值|inherit

  定位偏移属性不能单独使用，必须与position属性配合使用，否则无效

4.12.2、定位属性

• position: static; 默认值
  静态定位，相当于没有定位，元素出现在正常文档流中
  静态定位，不会受定位偏移属性的影响

• position: relative; 相对定位

  • 相对于元素本身的位置调整，占位空间依然存在
  • 使用
    元素的微调；子绝父相；改变层级（组合属性）
  • 特性
    • 不影响元素本身的特性
    • 不会让元素脱离正常文档流——占位
    • 如果有定位偏移属性，相对于元素本身发生位置的改变；如果没有定位偏移属性，对元素没有影响
    • 提升层级

• position: absolute; 绝对定位

  • 相对于父元素定位
  • 特性
    • 让元素脱离正常文档流——不占位
    • 如果没有定位父级相对于整个文档定位；如果有定位父级，相对于定位父级定位
    • 能让没有设置宽度的块级元素宽度自适应；能让行级元素支持宽度和高度
    • 提升层级
  • 绝对定位的使用步骤
    • 为要做特殊定位的盒子（定位盒），添加：position: absolute; 绝对定位，设置定位偏移属性：
      top:0; | bottom:0;
      left:0; | right: 0;
    • 为定位盒的父级盒（定位父级，设置固定宽、高度），添加position: relative;相对定位
    • 回到定位盒，通过定位偏移属性，对元素进行精确位置调整

• position: fixed; 固定定位

  • 相对于浏览器窗口定位
  • 特性
    • 让元素脱离正常文档流——不占位
    • 始终相对于浏览器窗口的四个角定位，不会随着页面内容的滚动而滚动
    • 可以让没有设置宽度的块级元素宽度自适应；能让行级元素支持宽度和高度
    • 提升层级
  • 固定定位的绝对居中——水平居中、垂直居中

  .box{
      width:;
      height:;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
  }
  

4.12.3、定位技巧——绝对居中

方法一：

​ 使用margin:auto;实现具有width属性和height属性的绝对定位元素的居中

.box{
    width:;
    height:;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

方法二：

​ 使用margin负间距实现具有width属性和height属性的绝对定位元素的居中

.box{
    width:;
    height:;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -元素本身宽度的一半;
    margin-top: -元素本身高度的一半;
}

4.12.4、层级问题

• 标签加定位，可以覆盖在页面的其他标签上

• 后面加载的定位元素默认会覆盖前面添加的定位元素

• z-index属性 设置元素的叠放次序

  • 属性值没有单位
  • 属性值越大层级越高
  • 属性值取值：正整数、0、负整数
  • 属性值相同，按照结构的书写顺序，后写的层级高

  z-index属性不能单独使用，必须与position属性组合使用（属性值可以是relative|absolute|fixed）

4.12.5、浮动和定位对比

css2中可以脱离正常文档流的属性

• float: left|right;
  • 脱离文档流，但不脱离文本流
• position: absolute|fixed;
  • 既脱离文档流，又脱离文本流

所有元素都能使用上方的属性
元素脱离正常文档流之后，不再区分块级和行级元素，都具有相同的属性，如果不设置宽度，由内容撑开；可以设置盒模型相关的属性

区分

• 如果同时具有margin: 0 auto;和float: left|right; 则float有效
• 如果同时具有float:left|right;和position:absolute|fixed; 则position有效