position

position默认值是static，此时 top, right, bottom, left 和 z-index 属性无效。
相对定位元素：relative
绝对定位元素：absolute和fixed
relative: 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白。
absolute：元素会被移出正常文档流，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设外边距（margins），且不会与其他边距合并。
fixed：元素会被移出正常文档流，通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

display

display: none;

表示将dispaly设置为none的元素从可访问性树(accessibility tree)中移除，这会导致该元素及其所有子代元素不再被屏幕阅读技术访问。
如果只是想从视觉上隐藏，推荐使用visibility: hidden;

display: flex;

flexbox弹性盒模型

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。
主轴由 flex-direction 定义，可以取四个值：

• row
• row-reverse
• column
• column-reverse

交叉轴垂直于主轴
flex-wrap属性默认为nowrap。这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

如果我们将flex-wrap属性设置为wrap，当元素太多无法显示在一行中时，就会换行显示。

在 flex 容器中添加flex-direction属性(默认是row)可以让我们更改 flex 元素的排列方向。