position 屬性介紹css
(1)position 屬性自 CSS2 起就有了,該屬性規定元素的定位類型。全部主流瀏覽器都支持 position 屬性。html
(2)position 的可選值有四個:static、relative、absolute、fixed。下面分別進行介紹。(其實還有個 inherit,不過這個是 IE 特有的,這裏就不作討論)vue
<h3 id="position: static(默認值)"> position: static(默認值)</h3>node
1,基本介紹
(1)static 是默認值。表示沒有定位,或者說不算具備定位屬性。
(2)若是元素 position 屬性值爲 static(或者未設 position 屬性),該元素出如今正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。react
2,使用樣例git
css:github
<style> div { width: 200px; height: 100px; background-color: #C9FFFF; } </style>
html:web
<div></div> <input type="text"/>
咱們不設置元素的 postion 屬性值,那麼默認的顯示效果以下:小程序
<div class="position-static"></div> <input type="text"/>微信小程序
<h3 id="position: relative(相對定位)"> position: relative(相對定位)</h3>
1,基本介紹
(1)relative 生成相對定位的元素,相對於其正常位置進行定位。
(2)相對定位完成的過程以下:
首先按默認方式(static)生成一個元素(而且元素像層同樣浮動了起來)。 而後相對於之前的位置移動,移動的方向和幅度由 left、right、top、bottom 屬性肯定,偏移前的位置保留不動。
2,樣例代碼
下面代碼將文本輸入框 position 設置爲 relative(相對定位),而且相對於默認的位置向右、向上分別移動 15 個像素。
css:
div { width: 200px; height: 100px; background-color: #C9FFFF; } input { position: relative; left: 15px; top: -15px; }
html:
<div></div> <input type="text" />
運行效果以下:
詳情見個人博客: https://alex-0407.github.io/b...
1,基本介紹
(1)absolute 生成絕對定位的元素。
(2)絕對定位的元素使用 left、right、top、bottom 屬性相對於其最接近的一個具備定位屬性的父元素進行絕對定位。
(3)若是不存在這樣的父元素,則相對於 body 元素,即相對於瀏覽器窗口。
2,樣例代碼
下面代碼讓標題元素相對於它的父容器作絕對定位(注意父容器 position 要設置爲 relative)。 同時經過 top 屬性讓標題元素上移,使其覆蓋在父容器的上邊框。 最後經過 left 和 margin-left 配合實現這個絕對定位元素的水平居中。
css:
#box { width: 200px; height: 100px; -webkit-box-flex:1; border: 1px solid #28AE65; border-radius:6px; padding: 20px; position: relative; font-size: 12px; } #title { background: #FFFFFF; color: #28AE65; font-size: 15px; text-align: center; width: 70px; height: 20px; line-height: 20px; position: absolute; top: -10px; left: 50%; margin-left: -35px; }
html:
<div id="box"> <div id="title">標題</div> 歡迎訪問個人博客 </div>
運行效果以下,標題元素雖然是在邊框容器的內部。但因爲其使用絕對定位,並作位置調整,最後顯示效果就是覆蓋在父容器邊框上。
詳情見個人博客: https://alex-0407.github.io/b...
1,基本介紹
(1)fixed 生成絕對定位的元素,該元素相對於瀏覽器窗口進行定位。
(2)固定定位的元素不會隨瀏覽器窗口的滾動條滾動而變化,也不會受文檔流動影響,而是始終位於瀏覽器窗口內視圖的某個位置。
2,樣例代碼
(1)下面代碼讓輸入框位於瀏覽器窗口的底部。
css:
input { position: fixed; bottom: 10px; }
html:
<ol> <li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li> <li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li> <li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li> <li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li><li>數據</li> </ol> <input type="text" />
(2)能夠看到無論滾動條如何滾動,輸入框始終處於窗口的最下方。
詳情見個人博客: https://alex-0407.github.io/b...
更多angular1/2/4/五、ionic1/2/3/四、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目,請掃一掃下面的二維碼關注微信公衆號——全棧弄潮兒。
福利專區:掃碼關注,免費領取淘寶天貓內部優惠券