21.固定定位

當(dāng)元素的position屬性設(shè)置fixed時(shí),則開(kāi)啟固定定位

固定定位也是一種絕對(duì)定位,它的大部分特點(diǎn)都和絕對(duì)定位一樣

不同的是:
  1. 固定定位永遠(yuǎn)都會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
  2. 固定定位會(huì)固定在瀏覽器窗口某個(gè)位置,不會(huì)隨滾動(dòng)條滾動(dòng)
  3. IE6不支持固定定位
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">

            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                
                position: fixed;

                left: 0px;
                top: 0px;

            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }
            .box4{
                width: 300px;
                height: 300px;
                 background-color: orange;
                 position: relative;
            }

        </style>

    </head>
    <body style="height: 5000px;">

        <div class="box1"></div>
        <div class="box4">
            <div class="box2"></div>
        </div>

        <div class="box3"></div>
    </body>
</html>

預(yù)覽:

2020-02-19 20.39.21.gif
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • day01-_起源和結(jié)構(gòu) 結(jié)構(gòu):Xhtml xml 表現(xiàn):CSS 行為:DOM ECMAScript 以上都屬于W...
    Sakura_明妃閱讀 1,327評(píng)論 0 1
  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過(guò)程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,365評(píng)論 0 1
  • CSS 定位 CSS有三種基本的定位機(jī)制:普通流,浮動(dòng),絕對(duì)定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,973評(píng)論 0 15
  • 當(dāng)在這一個(gè)頁(yè)面上實(shí)現(xiàn)布局和定位有幾種不同的技術(shù)。使用哪種技術(shù),很大程序上取決于內(nèi)容和目標(biāo)頁(yè)面,因?yàn)橛泻芏嗉夹g(shù)比別人...
    lulu_c閱讀 1,221評(píng)論 0 5
  • 快速排序是冒泡排序的一種改進(jìn)。(冒泡排序是比較相鄰的數(shù),并使小的在前大的在后)核心思想為:每一趟排序都選取一個(gè)基準(zhǔn)...
    CPPZWW閱讀 3,825評(píng)論 0 0

友情鏈接更多精彩內(nèi)容