css顯示display、可見性visibility、定位position
隱藏一個元素可以通過把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，那麼最後定位的元素將被顯示在前面。