隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"，但是这两种方法会产生不同的结果。
display:none隐藏某个元素，且隐藏的元素不会占用任何空间，即该元素不但被隐藏了，而且原本占用的空间也会从页面布局中消失。
visibility:hidden隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，即该元素虽然被隐藏了，但仍然会影响布局。
块元素：占用全部宽度在前后都是换行符，如<div>、<h1-h6>、<p>、<li>等
内联元素：只占用必要的宽度，不强制换行，如<span>、<a>等
将块元素显示为内联元素：display:inline;例如li {display:inline;}会将列表横向显示
将内联元素显示为块元素：display:block;例如span {display:block;}会将多个span内容换行显示
position属性指定了元素的定位类型
1.static：静态定位即没有定位，为默认值，静态定位的元素不会受到 top、bottom、left,、righ的t影响
2.fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口滚动元素也不会移动
fixed定位的元素不占据空间，因此可能与会其他元素重叠
例如p.pos_fixed{ position:fixed; top:30px; right:5px; }会使该段落显示在距离页面上端20px、右段5px的位置，且不岁窗口滚动而滚动
3.relative：相对定位，会按照元素的原始位置对该元素进行移动，而其原本所占的空间不会变化，即如果向上移动了，其下面的元素并不会向上占据其原本的空间
例如h2.pos_right{position:relative;left:20px;}表示从元素的原始位置左侧增加20px，即向右移动20px
而h2.pos_right{position:relative;left:-20px;}表示从元素的原始位置左侧减去20px，即向左移动20px
4.absolute：绝对定位，相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>
absolute定位的元素不占据空间，因此可能与会其他元素重叠
例如h2 { position:absolute; left:100px; top:150px; }
5.sticky：粘性定位，位置依赖于用户的滚动，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是top、right、bottom、left 之一，换言之指定top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
例如
div.sticky {position: sticky;top: 0;background-color: #cae8ca;border: 2px solid #4CAF50;}会将div中sticky选择器的内容设置为粘性定位，在内容不超过上边距时，会随着鼠标的移动而位置上移，当移动到最上面时，则固定位置不变。
不占据空间的定位元素，即fixde和absolute定位的元素，由于可能与其他元素重合，可以通过z-index:n;表示重叠时的显示顺序，即哪个显示在前面哪个显示在后面，n为负值表示该定位元素显示在后面，正值则表示显示在前面。
如果两个定位元素重叠而没有指定z - index，那么最后定位的元素将被显示在前面。