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