定位的类型与应用

浮动的本质

浮动本质是为了解决图文并排显示的问题
浮动要解决的两个问题：
1.浮动元素的高度对于它的包含块不可见
2.浮动元素可以BFC块使它不影响到后面的元素布局
左浮动：float:left; 右浮动：float:right;
清除浮动：clear:both;

定位的种类

定位的属性是position
定位类型：静态定位static,相对定位relative,绝对定位absolute,固定定位fixed。

1. 静态定位，”position:static” 是默认定位
2. 相对定位：relative 相对于该元素在文档流中的原始位置进行偏移
   不脱离文档流，原来位置留下空白，如果想要盒子偏离自己原本的位置，却保留在文档流中，可以使用relative
3. 绝对定位：absolute 相对于它的祖先中离它最近的‘定位元素’的位置发生偏移。会脱离文档流

• 定位元素：只要这个元素中有position：relative 或者 position：absolute就称为定位元素
• 如果祖先中没有定位元素，就参考根元素html定位
  如果我们想实现一个子元素，在父元素内部水平居中，那么父元素可以设置为relative，子元素设置为absolute

1. 固定定位：position:fixed 绝对定位的一个特例,参考对象是浏览器。当需要一个元素在固定不变的位置时，就是用固定元素。

模态框案例

2. lang="en">
4. charset="UTF-8">
5. name="viewport" content=">

11. php中文网

12. 消息
14. class="modal">
15. class="modal-backdrop">