position:
position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。
-
static: 没有定位，正常状态下。可以快速取消定位，让top、right、bottom、left 失效
-
relative: 相对于其在正常流中的位置偏移，原本占据的空间依然会保留
-
absolute: 相对于第一个position属性不为static的父类定位，会脱离正常文档流，不占据空间位置。
-
fixed: 定位原点相对于浏览器窗口，而且不能变。
-
inherit: 从父类继承position属性的值，但是任何版本的IE都不支持该属性
-
sticky: 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置，这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。
-
最后说一点，z-index属性是针对以上定位属性而出现的，它只在定位元素上有效。
display
display属性取值：none、inline、inline-block、block、flex、inherit。
1、display:none和visiability: hidden 都可以隐藏div，前者不占据文档的空间，后者占据文档的位置。
2、 inline: 行内元素，以水平方式布局，垂直方向的margin和padding都是无效的，大小和内容一样，且无法设置宽高。
3、 block: 块元素，独占一行，可以使用margin来控制元素之间间距
4、 inline-block: 既具有block的宽度高度特性又具有inline的同行特性。
5、display: flex 意为”弹性盒布局模型”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目（flex item）。
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 前端培训面试题讲解-如何保持浮层水平垂直居中
下一篇: 大数据培训面试题讲解之Hive内部表与外部表的区别
