写三个同等级的box，宽高都是200px，颜色

定位

• 定位是一种比较高级（灵活）的布局手段
• 通过定位可以将一个元素摆放到页面中的任意位置
• 使用position属性来设置元素的定位
• 可选值
  • Static 默认值
    • Relative 开启元素相对定位
    • Absolute 开启元素的绝对定位
    • Fixed 开启元素的绝对固定
      当元素position设置relative时，则开启了元素的相对定位

相对定位特点

1.当元素开启相对定位而不设置其他属性，元素不会发生任何变化
语法position：relative
2.相对定位的元素不会脱离文档流，元素的性质不会发生变化，块还是块，行内还是行内
3.参照的是自身在文档流中原来的位置定位
4.会提升元素的层级，盖住没有开启定位的元素
5.当元素开启了定位，可以通过四个偏移量来改变元素的位置
Top 表示当前元素上侧离定位位置上侧的距离
Left 表示当前元素左侧离定位位置左侧的距离
Bottom 表示当前元素下侧离定位位置下侧的距离
Right表示当前元素右侧离定位位置右侧的距离
（注意：通常情况下四个值只需要两个，就可以确定该元素的位置，就是水平和垂直两个位置，上左，上右 下左，下右）
Top:100px，会往上移，
在移动一个元素不会影响其他元素，因为没有脱离文档流，还是独占一行，

难点在于搞清楚参照物

绝对定位

1.开启绝对定位，如果不设置其他属性元素的位置不会发生变化
2.开启绝对定位，元素会脱离文档流，元素性质会发生变化
（行内变成块，块的宽高被撑开）
3.绝对定位会提升元素层级
4.绝对定位元素参照离他最近的开启了祖先元素定位的
5.如果所有的祖先元素都没开启定位，则元素参照于根元素（HTML）定位
通常情况下，为一个元素开启了绝对定位，同时也会为父元素开启相对定位
练习：写个span，背景色，行内，宽高不生效

• image.png
• 绝对定位后
• image.png
  
  

  Left：0
  Top:0
  Right:0
  Bottom:0
  对于元素来说，参照窗口定位的，body的外边HTML

• image.png
  
  

  给box2套个祖先，在外边套一个box4，

• image.png
  
  祖孙三代
  Box4宽高400，颜色；box5宽高300，颜色
• image.png

让box2的结构更加复杂
开启2的绝对定位，还是参照根元素定位的

给box4，box5相对定位，给box2，right：0

• image.png
• Box5相对定位取消，box2，right：0
• image.png

固定定位

当元素的属性值设置为fixed时，则开启了元素的固定定位
注意：固定定位大部分特点都和绝对定位一样，比如脱离文档流，改变元素性质，不设置偏移量位置不会变好，唯一不同点总是参照于视口（viewport）进行过定位，视口就是浏览器窗口
元素会固定在视口的某一个位置，不会随网页一起滚动
视口>html>body

• image.png
  
  

  语法Position：fixed,网页会滚动，视口是不会动的

层级

练习

• 写三个同级的box，宽高都一样
• image.png
  
  

  1设绝对，2设固定，3设相对后

• image.png
  
  三种定位都会提升元素层级，并且层级一样的
  层级一样时，层级样式靠下的会盖住靠上的
  可以通过z-index来改变元素层级
  x轴 水平
  y轴 垂直
  z轴 距离人眼的距离
  z-index值越大，元素距离人眼越近，层级越高，层级越高越优先显示
  z-index需要整数作为参数，层级越高优先靠下的
  只有开启了定位的元素才能拿设置z-index

包含块

1包2结构，样式1宽高500*400，颜色，2设20%，100px,颜色，2是参考1计算
2开绝对定位，这时候参照根元素的20%

• image.png
  
  当我们使用百分比作为单位时，元素的样式值会参照于包含块的指定值去计算包含块（containing block）
  1.通常情况下包含块是离他最近的祖先块元素
  2.对于绝对定位元素来说，包含块是离他最近的开启了定位的祖先元素，通常情况下都是父元素
  3.如果所有的祖先元素都没有开启定位，则包含块就是初始包含块（HTML根元素）
  4.对于固定定位元素包含块就是浏览器窗口，也就是视口

水平居中

写个box1，样式宽800，高400，边框：1 red solid
Box2,宽高100，颜色，设置margin：0 auto；

• image.png
  
  

  元素可见框的大小，由左边框，左内边距，内容区，右内边距，右边框，共同决定了可见框宽度
  可见框的高度
  上边框，上内边距，内容区，下内边距，下边框
  可见框的大小不是元素的实际大小
  元素实际大小应该计算外边距
  元素实际宽度
  左右外边距+左右边框+左右内边距+内容区

在盒子模型中，元素的实际宽度必须等于其包含块内容区的宽度
本例中：
box2的实际宽度必须强制等于box1的内容区宽度，如果等式不满足，浏览器会自动修正右外边距的值，以使等式满足
七个值中三个可以设置为auto（width margin-left/right）
三个值中某个值为auto时，浏览器会调整该值的大小满足等式
如果有外边距和宽度同时设置为auto，则外边距auto自动重置为0
如果两个外边距同时设置为auto，则两侧的外边距会设置为相对的值
0+auto+0=800
500+auto+0=800
auto+200+0=800
auto+200+auto=800
这是居中的原理

之所以无法通过margin来实现垂直居中，原因就是处置方向没有一个等式需要强制满足，所以无法通过margin来实现垂直居中
当设置元素的绝对定位后，水平方向等式依然强制满足，只不过值由七个变成九个

增加了left和right两个值
可以设置为auto的值
auto+0+200+0+auto=800
总是调最右边的值
注意：当开启绝对定位，垂直方向的等式也变成强制满足

上下左右都设0，margin设auto，得到水平垂直居中

• image.png
• 让一个定位元素在包含块中水平居中
  • left：0
  • right：0
  • margin：0
  • width：xxx

image.png