<xmp id="os0kq"></xmp>

css定位布局方式有那幾種怎么設(shè)置屬性

css定位方式有那幾種，css定位怎么用都有那些不同之處，如何讓塊狀居中定位布局屬性怎么寫能實(shí)現(xiàn)

目錄: 1position: fixed窗口固定位置定位; 2position: absolute絕對(duì)定位; 3position: relative相對(duì)定位; 4position: static靜態(tài)定位

position: fixed窗口固定位置定位

position: fixed; 的元素是相對(duì)于窗口定位的，這意味著即使?jié)L動(dòng)頁面，它也始終位于同一位置

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">

        <title>通高科技</title>

        <style>

            .footer{

                width: 100%;

                height: 40px;

                position: fixed;

                bottom: 0;

                right: 0;

                background-color:#73AD21;

            }



            }

        </style>

    </head>

    <body>

        <div class="footer">

            position: fixed 窗口固定位置，不受頁面滾動(dòng)影響

        </div>



    </body>

</html>

position: absolute絕對(duì)定位

絕對(duì)定位的特點(diǎn)：（務(wù)必記?。?/p>

如果沒有父元素沒有定位，則以瀏覽器為準(zhǔn)定位（Document 文檔）。

如果父元素有定位（相對(duì)、絕對(duì)、固定定位），則以最近一級(jí)的有定位祖先元素為參考點(diǎn)移動(dòng)位置。

絕對(duì)定位不再占有原先的位置。（脫標(biāo)）所以絕對(duì)定位是脫離標(biāo)準(zhǔn)流的。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>通高科技</title>

        <style>

            .num2{

                width: 400px;

                height: 400px;

                position: relative;

                left:100px;

                border: 3px solid #73AD21;

            }

            .num3{

                width: 200px;

                height: 200px;

                position: absolute;

                right:100px;

                top: 20px;

                background:red;

                border: 3px solid #73AD21;

            }

        </style>

    </head>

    <body>

        <div class="num2">

            這個(gè) 元素設(shè)置了 position: relative;



            <div class="num3">

                absolute定位向右100px,距離頂部20PX

            </div>

        </div>



        <div class="num3">

            absolute沒有父元素定位，默認(rèn)定位body為父元素，向右100px,距離頂部20PX

        </div>



    </body>

</html>

運(yùn)行實(shí)例：

position: relative相對(duì)定位

使用position:relative，就需要top,bottom,left,right4個(gè)屬性來配合，確定元素的位置。是爭對(duì)原來位置進(jìn)行偏移的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>通高科技</title>

        <style>

            .num2{

                width: 200px;

                height: 200px;

/*              position: relative; */

                /* left:100px; */

                border: 3px solid #73AD21;

            }

            .num3{

                width: 200px;

                height: 200px;

                position: relative;

                left:100px;

                top: 20px;

                background:red;

                border: 3px solid #73AD21;

            }

        </style>

    </head>

    <body>

        <div class="num2">

            position: 沒有使用relative定位

        </div>

        <div class="num3">

            relative定位向左100px,距離頂部20PX

        </div>

    </body>

</html>

運(yùn)行結(jié)果：

position: static靜態(tài)定位

position: static; 的元素不會(huì)以任何特殊方式定位；它始終根據(jù)頁面的正常流進(jìn)行定位：靜態(tài)定位的元素不受 top、bottom、left 和 right 屬性的影響。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>通高科技</title>

        <style>

            .num2{

                width: 300px;

                height: 300px;

                position: static;

                border: 3px solid #73AD21;

            }

        </style>

    </head>

    <body>

        <div class="num2">

            position: static定位

        </div>

    </body>

</html>