css的position:static是什么意思?有什么作用?


css的position:static是什么意思?

position是css的定位屬性,規定元素的定位類型。static是position屬性的值,static指的是默認值,也就是沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。舉例如下:

范如樂設置了兩個div元素,每個div元素里面分別添加了一個p元素:

<div class="juli1">
<p>這里是沒有使用position:static;屬性值的位置效果:</p>
</div>

<div class="juli2">
<p>這里是使用了position:static;屬性值的位置效果:</p>
</div>

然后通過類選擇器給命名為juli2的樣式設置了如下的值:

.juli2 {position:static;}

從截圖可以看到,兩個div元素不管是否設置了position:static;值,兩個div元素的定位都是一樣的:

css的position:static是什么意思?

也就是說,所有元素的定位默認值都是position:static;,寫不寫上position:static;都一樣。

既然寫不寫都一樣,那css的position:static有什么作用?

如果全部元素都被定位了,而某些特定元素不需要被定位,那么寫上position:static;就不會受到top, bottom, left, right 或者 z-index 聲明的影響,定位不會發生變化。

為了讓新手網友更容易理解,范如樂還是拿上面的案例舉例說明,我把div設置了一個相對定位為向元素左邊的位置添加50像素的值,寫法如下:

div {position:relative;left:50px;}

效果如圖:

css的position:static有什么作用

樣式juli1受到div {position:relative;left:50px;}影響,位置向左移動了50像素,而樣式juli2使用了position:static;屬性值,位置沒有發生改變。

如需了解更多定位屬性的用法,詳情點擊:《css的position屬性值有哪些?有何區別?》。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/css/8119.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: