【前端学习笔记 07-CSS布局，定位总结

布局

• 正常流布局
• 正常布局流 (normal flow) 是指在不对⻚⾯进⾏任何布局控制时，浏览器默认的 HTML 布局⽅式。
• 正常留布局原理：块元素⾃动占满 100% 宽度，垂直排列。内联元素宽度由内容撑开，⽔平排列。
  HTML实例：
  

定位

定位 (positioning) 能够让我们把⼀个元素从它原本在正常布局流 (normal flow)
中应该在的位置移动到另⼀个位置。定位(positioning)
并不是⼀种⽤来给你做主要⻚⾯布局的⽅式，它更像是让你去管理和微调⻚⾯中的⼀个特殊项的位置。

相对定位 (Relative positioning)

• 相对定位 (Relative positioning) 允许我们相对于 元素在正常的⽂档流中的位置移动它——包括将 两个元素叠放在⻚⾯上。

 #two {
    position: relative;
  	top: 20px;
    left: 20px;
    background: blue;
  }

绝对定位 (Absolute positioning)

• 绝对定位 (Absolute positioning) 将元素完全从⻚⾯的正常布局流(normal layout flow) 中移出，类似将它单独放在⼀个图层中。
• 我们可以将元素相对于⻚⾯的 html 元素边缘固定，或者相对于该元素的最近被定位的祖先元素。
• 绝对定位在创建复杂布局效果时⾮常有⽤，例如通过标签显示和隐 藏的内容⾯板或者通过按钮控制滑动到屏幕中的信息⾯板。

#four{
            position: absolute;
            top: 30px;
            left: 30px;
            background: lightblue;
      }

固定定位 (Fixed positioning)

• 固定定位 (Fixed positioning)。⽣成固定定位的元素，相对于浏览器窗⼝进⾏定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进⾏规定。

 .box4{
        background: pink;
        position: fixed;
        bottom: 80px;
        right: 20px;
      }

z-index

z-index 属性设定了⼀个定位元素及其后代元素的展示 order。 当元素之间重叠的时候， z-index 较⼤的元素会覆盖较⼩的元素在上层进⾏显示。
默认状态：z-index 均为 auto，按元素先后顺序覆盖,设置z-index后：