首頁 > web前端 > css教學 > 主體

深入了解css中的position屬性

零下一度
發布: 2017-05-04 17:33:34
原創
2025 人瀏覽過

不知道,看我寫前端知識的程式設計師們,有沒有跟我一樣的感覺,我每次寫完html結構,然後寫css樣式內容時,心裡有個樣子,但是實現後,ctrl+save確實是另一個樣子,心裡真是不爽啊。
對於position這個屬性,我每次設定他的時候,都會或多或少有點意外。
面試過兩三次,但是卻沒有被問到這個,心裡還是有僥倖的心理的。

  • position
    這個屬性一共有四個值。

    • static 靜態定位
      預設佈局。如果是區塊級元素就會在頁面中自上而下的堆疊起來。如果是行內元素就會在一行內由左至右延續,如果裝不下就會換行,裝下了繼續。

    • relative 相對定位
      使得該元素相對於他原來在文件中的位置進行定位。透過top、left、bottom、left這四個屬性值,來改變它的位置。
      以上還很好理解。
      不好理解在這裡:為元素進行相對定位,會保留該元素原來佔據的文檔流空間。當對該元素進行相對定位時,例如top:20px;使得該元素距離距離他原來佔據的空間頂部20px。 ##absolute

      絕對定位
    • 絕對定位會完全從文件流中拿出來,元素之前佔據的空間也被回收啦。絕對定位元素的定位依賴於其定位上下文。

      要注意的是:這裡寫過絕對定位可以將行內元素變成區塊級元素的表現形式。但確定就是一旦將行內元素進行絕對定位後,該元素的位置不好掌握,(原因:如果該元素沒有設定內外邊距,且前後左右也沒有絕對定位元素,那麼該元素會暫時停留在自己原來的位置,但是如果該元素設定了外邊距,那麼該元素會暫時停留在距原來位置一個外邊距的距離。會尋找最上面一個不是絕對定位的元素下面。

      定位上下文的理解:相對於另一個元素移動該定位元素的位置,那麼「另一個元素」即為該元素的定位上下文。

      絕對定位元素的任何祖先元素都可以成為他的定位上下文,只需把對應的祖先元素設定為position:relative;即可。
      如果其祖先元素都沒有設定相對定位的,那麼該絕對元素的預設定位上下文為body。




      fixed  固定定位
      絕對定位也是完全移除文件流。但是他的定位上下文為視口,即瀏覽器視窗。
    • 固定定位不常用,最常見的情況是,用它創建不隨網頁而滾動而移動的
    • 導航



      我在做練習是,最習慣的就是將父元素進行相對定位,然後對要其子元素需要定位的進行絕對定位。
    • 雖然有些網頁也有父元素絕對定位,子元素相對父元素再絕對定位,我不太喜歡這樣寫,因為父元素的位置還需要再定位一遍。
【相關推薦】


1. 

免費css線上影片教學

2. css線上手冊

#3. php.cn獨孤九賤(2)-css影片教學

#

以上是深入了解css中的position屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!