CSS定位

CSS定位属性

1. 先了解标准流

1.1 标准流（Normal Flow ）

css 标准流 说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动 从左往右，从上往下 的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

• 从左到右、从上到下按顺序摆放好
• 默认情况下，互相之间不存在层叠现象

1.2 标准流下的margin、padding

• 在标准流中，可以使用margin、padding对元素进行定位
  其中margin还可以设置负数

• 比较明显的缺点是

• 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
  不便于实现元素层叠的效果

2. position属性

2.1 position属性的取值

• static：静态定位
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位

！！当position不是static时，可以设置left 、right、top、bottom，这些值代表的是距离，而不是向哪里移动多少！！

2.1.1 static

• position属性的默认值
• 元素按照normal flow布局
• left 、right、top、bottom没有任何作用

2.1.2 relative

• 元素按照normal flow布局
• 可以通过left、right、top、bottom进行定位
  • 定位参照对象是元素自己原来的位置
• left、right、top、bottom用来设置元素的具体位置,如下图

• 相对定位的应用场景
  • 在不影响其他元素位置的前提下，对当前元素位置进行微调
  • 常用来子绝父相 （父元素设置为相对定位,因为父元素不会脱离标准流）
• 只改变自己的位置，不改变原来占据的空间（原来的空间还在那里），不会影响其他元素位置
• 视觉上会发生层叠（可以把文字设置在图片上面）

2.1.4 absolute

• 元素脱离normal flow（脱离标准流、脱标）
• 可以通过left、right、top、bottom进行定位
  • 定位参照对象是最邻近的定位祖先元素(最近的position属性不是static的元素)
  • 如果找不到这样的祖先元素，参照对象是视口
• 定位元素（positioned element）
  • position值不为static的元素
  • 也就是position值为relative、absolute、fixed的元素

2.1.4 fixed

• 元素脱离normal flow（脱离标准流、脱标）
• 可以通过left、right、top、bottom进行定位
  • 定位参照对象是视口（viewport）
• 当画布滚动时，固定不动

3. 脱标元素的特点

当我们的position为fixed 和 abosulte 时元素会脱标 ,那脱标元素有哪些特点呢

• 可以随意设置宽高
• 宽高默认由内容决定
• 不再受标准流的约束
• 不再给父元素汇报宽高数据（父元素不会撑开了,不占据以前的位置）
• 别的元素不知道你的存在了

4. position总结

5. 视口的介绍（viewport）

我们在设置定位的时候有时候参考系是视口 那么视口是什么呢！

• 浏览器窗口可以进行放大缩小,我们所能看到的窗口大小就是视口
• 可视化窗口，pc端就是浏览器的窗口，手机端就是手机浏览器的窗口

6. 元素的层叠关系

6.1 z-index(当都是定位元素时)

• z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
  • 取值可以是正整数、负整数、0
• 比较原则
  • 如果是兄弟关系
    • z-index越大，层叠在越上面
    • z-index相等，写在后面的那个元素层叠在上面
  • 如果不是兄弟关系
    • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
    • 而且这2个定位元素必须有设置z-index的具体数值

x相等，写在后面的那个元素层叠在上面

• 如果不是兄弟关系
  • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
  • 而且这2个定位元素必须有设置z-index的具体数值