css中關于定位屬性position為fixed的使用記載
發(fā)布時間：2013-11-11 17:36:05 作者：佚名 
我要評論
我要評論當一個div想要定位時，我們第一反應是position屬性，而position屬性除了默認值外，還有absolute,relative和fixed，下面有個不錯的示例，不懂的朋友可以參考下
在html中，當一個div想要定位時，我們第一反應是position屬性，而position屬性除了默認值外，還有absolute,relative和fixed。當被設置成fixed時，可以通過設置left、right、top、bottom的值來相對于body定位。
代碼:
.my-fiexd{
position:fixed;
height:40px;
width:40px;
background-color:red;
border:0px;
}
可是當某個div隨著滾動條滾動時而被設置成fixed時（置頂，很多menu都會這樣），可能會發(fā)生一個小現(xiàn)象（可以說是bug吧）。具體代碼就不上了，就說下現(xiàn)象和解決辦法吧。
假如一個高度為100px的頁面有一個id為my-fixed的div，my-fixed的高度為20px，滾動條滾動到30px時，my-fixed被添加fiexd屬性，那么此時my-fixed就脫離了頁面，相對應的頁面高度也要減去20px，頁面高度為80px，可能正好此時滾動條所能滾動的最大高度已經小于30px，這個時候my-fixed就會一直在添加和不添加fixed之間不停閃爍，最后my-fixed并沒有被添加fixed。
解決辦法是，給my-fixed外層添加一個div并設置和my-fixed一樣的高度，這樣當my-fixed脫離時，頁面高度就不會減少，閃爍的現(xiàn)象就能很好的避免
ps:第一次寫博客，文字表達上可能不是很清楚，但大概意思應該是對的，歡迎提問，同時如果有人遇到同樣的問題，并有更好的解決辦法，請也告訴我
代碼:
復制代碼
代碼如下:.my-fiexd{
position:fixed;
height:40px;
width:40px;
background-color:red;
border:0px;
}
可是當某個div隨著滾動條滾動時而被設置成fixed時（置頂，很多menu都會這樣），可能會發(fā)生一個小現(xiàn)象（可以說是bug吧）。具體代碼就不上了，就說下現(xiàn)象和解決辦法吧。
假如一個高度為100px的頁面有一個id為my-fixed的div，my-fixed的高度為20px，滾動條滾動到30px時，my-fixed被添加fiexd屬性，那么此時my-fixed就脫離了頁面，相對應的頁面高度也要減去20px，頁面高度為80px，可能正好此時滾動條所能滾動的最大高度已經小于30px，這個時候my-fixed就會一直在添加和不添加fixed之間不停閃爍，最后my-fixed并沒有被添加fixed。
解決辦法是，給my-fixed外層添加一個div并設置和my-fixed一樣的高度，這樣當my-fixed脫離時，頁面高度就不會減少，閃爍的現(xiàn)象就能很好的避免
ps:第一次寫博客，文字表達上可能不是很清楚，但大概意思應該是對的，歡迎提問，同時如果有人遇到同樣的問題，并有更好的解決辦法，請也告訴我
相關文章
這篇文章主要介紹了CSS position屬性和實例應用演示,absolute（絕對定位）,relative（相對定位）,relative與absolute的結合使用以及fixed(固定定位),需要的朋友可以參考下2017-08-11
css position定位屬性_動力節(jié)點Java學院整理
這篇文章主要介紹元素的Position屬性，此屬性可以設置元素在頁面的定位方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-22css關于position屬性的用法詳解(絕對定位和相對定位的混淆)
下面小編就為大家?guī)硪黄猚ss關于position屬性的用法詳解(絕對定位和相對定位的混淆)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-08- 這篇文章主要總結了CSS的position定位屬性在使用的一些重點,包括對絕對定位和相對定位等的強調,需要的朋友可以參考下2016-05-31
- 這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點講解了相對定位和絕對定位在頁面布局中的作用,需要的朋友可以參考下2016-04-28
CSS：Table-cell屬性的妙用讓div也能享受table定位的好處
你要是用div的話，一會inline一會float很是蠻煩。怎么樣才能在使用div的時候也能享受的table定位的好處呢？下面有個好的方法2014-09-04采用CSS定位屬性實現(xiàn)Html中DIV層疊與懸浮
DIV沒有懸浮一說，更準確的應為層疊或者固定，下面為大家介紹的是通過CSS定位屬性來實現(xiàn)這一效果2014-05-18- CSS常用樣式包括定位、顯示、寬高和剪裁等屬性，這些都是我們大家經常使用到的，在本文做個總結，以備不時之需2014-04-18
使用CSS布局定位屬性輕松實現(xiàn)優(yōu)美站點布局
本文為大家介紹CSS布局定位屬性，熟練的使用可以輕松實現(xiàn)優(yōu)美站點布局，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-16- POSITION屬性用來決定元素在頁面上的位置，其定位屬性有多個，下面一一為大家介紹下，希望大家在使用過程中可以用到2013-09-09
