站長資訊網
        最全最豐富的資訊網站

        CSS定位屬性之固定fixed屬性詳解

        本篇文章給大家帶來了關于css的相關知識,其中主要介紹了關于CSS定位屬性中fixed 定位的相關問題,fixed定位表示元素的位置相對于瀏覽器窗口是固定位置,即使窗口是滾動的它也不會移動,下面一起來看一下,希望對大家有幫助。

        CSS定位屬性之固定fixed屬性詳解

        (學習視頻分享:css視頻教程、html視頻教程)

        CSS定位屬性之固定fixed屬性詳解

        fixed定位

        元素的位置相對于瀏覽器窗口是固定位置。

        即使窗口是滾動的它也不會移動:

        固定定位是元素固定于瀏覽器可視區的位置。主要使用場景:在瀏覽器頁面滾動時元素的位置不會改變。

        語法:

        選擇器{position:fixed;}

        說明

        • 固定定位是元素固定在瀏覽器可視區的位置。固定定位也可以算是一種特殊的絕對定位。

        • 使用場景為當瀏覽器頁面滾動時,元素的位置不會改變。

        固定定位的特點

        • 以瀏覽器的可視窗口為參考點的移動元素。

        • 和父元素無關。

        • 不要隨滾動條滾動。

        • 固定定位不占用原位置。固定定位也是脫標的。

        fixed是position屬性的屬性值。當元素的position屬性設置為fixed時,這個元素就被固定了,被固定的元素不會隨著滾動條的拖動而改變位置。在視野中,固定定位的元素的位置是不會改變的。

        fixed固定定位和absolute絕對定位比較類似,它們都能夠讓元素產生位移,并且脫離文檔流。

        語法:

        position:fixed; top:像素值; bottom;像素值; left:像素值; right:像素值;

        “position:fixed;”是結合top、bottom、left和right這4個屬性一起使用的,其中“position:fixed;”使得元素成為固定定位元素,接著使用top、bottom、left和right這4個屬性來設置元素相對瀏覽器的位置。

        top、bottom、left和right這4個屬性不一定全部都用到。注意,這4個值的參考對象是瀏覽器的4條邊。

        示例如下:

        <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <style type="text/css">             h2.pos_abs {                 position: fixed;                 left: 100px;                 top: 120px             }             p{                 height: 100px;                 background-color: palegoldenrod;             }             p.p2{                 margin-top:120px ;             }         </style>     </head>       <body style="height: 1200px;">         <h2 class="pos_abs">這是帶有固定定位的標題</h2>         <p>相對于瀏覽器窗口來對元素進行定位</p>         <p class="p2">相對于瀏覽器窗口來對元素進行定位</p>     </body>   </html>

        輸出結果:

        CSS定位屬性之固定fixed屬性詳解

        擴展知識

        如何定位在主內容的右側

        • 首先我們先讓固定定位的盒子left:50%,走到瀏覽器可是區域的一般位置。

        • 然后再讓固定定位的和字margin-left:主要內容設置寬度的一般,這樣我們就可以看到固定定位的和字在版心的右側了

        注意:

        當我們沒將固定的盒子放在最上面的時候,他將會被其他的div覆蓋,一定要將固定盒子放在最上面

        (學習視頻分享:css視頻教程、html視頻教程)

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品 一区 在线| 国产69精品久久久久9999| 国产精品无码国模私拍视频| AAA级久久久精品无码区| 亚洲av无码精品网站| 国产精品美女久久久m| 国产99视频精品免视看7| 国产精品国产精品国产专区不卡| 性色精品视频网站在线观看| 精品人妻一区二区三区毛片 | 日本精品一区二区三区在线视频一| 亚洲国产精品成人网址天堂| 亚洲精品无码久久一线| 99热精品在线观看| 精品国产午夜肉伦伦影院| 综合在线视频精品专区| 国产精品爱啪在线线免费观看| 中文字幕久久精品| 国产精品三级在线| 日韩国产精品无码一区二区三区 | 亚洲精品无码久久千人斩| 久久精品无码免费不卡| 精品人妻系列无码天堂| 51久久夜色精品国产| 亚洲AV日韩精品一区二区三区| 国产精品成人无码久久久久久| 99久久精品免费观看国产| 欧美精品在线一区| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 亚洲永久永久永久永久永久精品| 精品国精品国产| 青青草97国产精品免费观看| 99re6这里有精品热视频| 亚洲AV无码国产精品麻豆天美| 亚洲热线99精品视频| 亚洲精品国精品久久99热一| 伊人久久大香线蕉精品不卡| 在线精品视频一区二区| 日韩精品真人荷官无码| 久久99精品久久久久久久久久| 久久se精品一区二区影院|