昨天基本上就把float方式定位講完了，今天就來說說position定位，據說這個用到的不多，但是感覺應該還是有用的，而且好像更有用才對
其實我們在書寫標簽的過程中都有設置position屬性的，一般都是默認的static
一、static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
二、position: relative／absolute
1.relative 相對定位。
定義：相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
也就是說此時的標簽並沒有飄
2.absolute 絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
和relative正好反過來，他已經飄在文檔流之上了。
三、position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
簡單通俗的說就是很多培訓班網站右下角一直都飄着一個聊天窗口讓你去咨詢，其實都是寫好的回答
四、僅使用margin屬性布局絕對定位元素
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖中，使用margin屬性布局相對定位元素。
層級關系為：
<div ——————————— position:relative;
<div—————————-沒有設置為定位元素，不是參照物
<div———————-沒有設置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
今天的內容就是這么多了，然后呢是一些針對上面的練習，草草的寫了一下，不過最近感覺之前的知識忘的太多了，計划從明天開始復習一下，目標就是之前沒有徹底完成的選課系統。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .div1{ width: 200px; height: 100px; background-color: beige; } .div2{ width: 200px; height: 100px; background-color: rebeccapurple; /*position: relative;*/ position: absolute; left: 100px; top: 100px; } .div3{ width: 200px; height: 200px; background-color: green; /*position: relative;*/ /*top:-100px;*/ /**/ } .div4{ width: 200px; height: 200px; background-color: yellow; } .outer{ position: relative; } .returnTop{ width: 80px; height: 50px; position: fixed; bottom: 20px; right: 5px; background-color: gray; color: white; text-align: center; line-height: 50px; } </style> </head> <body> <div style="height: 200px;background-color: aqua"></div> <div class="outer"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </div> <div style="height: 2000px;background-color: darkgoldenrod"></div> <div class="returnTop">返回頂部</div> </body> </html>
今天的內容就是這些了，最近工作應該會很忙，正好復習不用看視頻，拜拜！！！
慶賀一下，今天我有一個文章閱讀突破40了，撒花~~~