web前端入門到實戰:css絕對定位和相對定位、固定定位

一、絕對定位

position:absolute; css

絕對定位指的是經過規定HTML元素在水平和垂直方向上的位置來固定元素,基於絕對定位的元素不會佔據空間。絕對定位的位置聲明是相對於已定位的而且包含關係最近的祖先元素。若是當前須要被定爲的元素沒有已定位的祖先元素做爲參考值,則相對於整個網頁。html

<!DOCTYPE html> 
 <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位和佈局</title>
</head>
<style>
    .big {
        width: 900px;
        height: 600px;
        background-color: black;
        position: relative;
    }

    .box4 {
        width: 150px;
        height: 100px;
        background-color: blue;
         position: absolute;
        top: 150px;
        left: 200px; 
    }
</style>
<body>
    <div class="big">
        <div class="box4"></div>

    </div>
</body>

</html>

web前端入門到實戰:css絕對定位和相對定位、固定定位

如圖所示,藍色的盒子是相對於整個大盒子而言的,可是,當藍色盒子外層沒有設置有定位的大盒子包裹,則藍色盒子會的絕對定位會相對與整個屏幕。前端

二、相對定位

position:relative;web

相對定位與絕對定位的區別在於它的參照點不是左上角的原點,而是該元素自己原先的起點位置。而且即便該元素偏移到了新的位置,也仍然從原始的起點處佔據空間。瀏覽器

專門創建的學習Q-q-u-n: 784-783-012 ,分享學習的方法和須要注意的小細節,不停更新最新的教程和學習技巧
(從零基礎開始到前端項目實戰教程,學習工具,全棧開發學習路線以及規劃)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位和佈局</title>
</head>
<style>
    .big {
        width: 900px;
        height: 600px;
        background-color: black;
        position: relative;
    }

    .box1 {
        width: 150px;
        height: 100px;
        background-color: aqua;
        position: relative;
        left: 100px;
        top: 10px;
    }

    .box2 {
        width: 150px;
        height: 100px;
        background-color: red;
        /* position: relative; */
        left: 130px;
        bottom: 50px;
    }

    .box3 {
        width: 150px;
        height: 100px;
        background-color: yellow;
        /* position: relative; */
        left: 170px;
        bottom: 100px;
    }

    .box4 {
        width: 150px;
        height: 100px;
        background-color: blue;
        position: absolute;
        top: 150px;
        left: 200px;
    }

    .box6 {
        width: 150px;
        height: 100px;
        background-color: rgb(27, 173, 83);
    }
</style>

<body>

    <div class="big">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</body>

</html>

此時咱們以第三個盒子,黃色的盒子爲例,此時咱們將它的相對定位註釋掉,它的運行結果是這樣的。ide

web前端入門到實戰:css絕對定位和相對定位、固定定位

當咱們給他加上相對定位,position:relative;運行結果是這樣的,它以自身原先的位置爲參照物向上向右移動,可是當它移動以後,它本來下面的綠色盒子沒有往上移動,佔據它的位置,也就是說,使用相對定位會佔據位置,而固定定位不會,以剛剛那個黃色盒子和綠色盒子爲例,若是黃色盒子使用絕對定位給他定位,當黃河盒子移走以後,綠色盒子會往上移,佔據以前黃色盒子的位置。工具

web前端入門到實戰:css絕對定位和相對定位、固定定位

三、固定定位

position:fixed;佈局

固定定位永遠都會相對於瀏覽器窗口進行定位,固定定位會固定在瀏覽器的某個位置,不會隨滾動條滾動。最經常使用的就是電腦裏面是否是彈出的小廣告,若是你不差掉它,當時滑動鼠標查看網頁時,小廣告一直會在那裏,還有經常使用的就是網站或者APP的導航欄和底部的選擇欄。學習

相關文章
相關標籤/搜索