Html css.display属性 绝对定位与相对定位

一、display属性

1.none                         此元素不会被显示。
2.block                         此元素将显示为块级元素，此元素前后会带有换行符。
3.inline                         默认
4.inline-block               行内块元素。
5.list-item                     此元素会作为列表显示。
6.run-in                        此元素会根据上下文作为块级元素或内联元素显示。
7.table                          此元素会作为块级表格来显示
8.inline-table                此元素会作为内联表格来显示
9.table-row-group        此元素会作为一个或多个行的分组来显示
10.table-header-group 此元素会作为一个或多个行的分组来显示
11.table-footer-group   此元素会作为一个或多个行的分组来显示
12.table-row                 此元素会作为一个表格行显示
13.table-column-group 此元素会作为一个或多个列的分组来显示
14.table-column           此元素会作为一个单元格列显示
15.table-cell                 此元素会作为一个表格单元格显示
16.table-caption           此元素会作为一个表格标题显示
17.inherit                      规定应该从父元素继承 display 属性的值。

二、绝对定位与相对定位

position: absolute

绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。

position: relative

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。