不知道,看我寫前端知識的程式設計師們,有沒有跟我一樣的感覺,我每次寫完html結構,然後寫css樣式內容時,心裡有個樣子,但是實現後,ctrl+save確實是另一個樣子,心裡真是不爽啊。
對於position這個屬性,我每次設定他的時候,都會或多或少有點意外。
面試過兩三次,但是卻沒有被問到這個,心裡還是有僥倖的心理的。
position
這個屬性一共有四個值。
static 靜態定位
預設佈局。如果是區塊級元素就會在頁面中自上而下的堆疊起來。如果是行內元素就會在一行內由左至右延續,如果裝不下就會換行,裝下了繼續。
relative 相對定位
使得該元素相對於他原來在文件中的位置進行定位。透過top、left、bottom、left這四個屬性值,來改變它的位置。
以上還很好理解。
“ 不好理解在這裡:為元素進行相對定位,會保留該元素原來佔據的文檔流空間。當對該元素進行相對定位時,例如top:20px;使得該元素距離距離他原來佔據的空間頂部20px。 ##absolute
要注意的是:這裡寫過絕對定位可以將行內元素變成區塊級元素的表現形式。但確定就是一旦將行內元素進行絕對定位後,該元素的位置不好掌握,(原因:如果該元素沒有設定內外邊距,且前後左右也沒有絕對定位元素,那麼該元素會暫時停留在自己原來的位置,但是如果該元素設定了外邊距,那麼該元素會暫時停留在距原來位置一個外邊距的距離。會尋找最上面一個不是絕對定位的元素下面。
定位上下文的理解:相對於另一個元素移動該定位元素的位置,那麼「另一個元素」即為該元素的定位上下文。
如果其祖先元素都沒有設定相對定位的,那麼該絕對元素的預設定位上下文為body。絕對定位也是完全移除文件流。但是他的定位上下文為視口,即瀏覽器視窗。fixed 固定定位
1.
2. css線上手冊
#以上是深入了解css中的position屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!