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,那麼最後定位的元素將被顯示在前面。