HTML絕對定位、相對定位和固定定位的方法

發(fā)布時(shí)間：2022-03-05 15:51:00 來源：億速云閱讀：305 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下HTML絕對定位、相對定位和固定定位的方法的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1、絕對定位

絕對定位指的是通過規(guī)定HTML元素在水平和垂直方向上的位置來固定元素，基于絕對定位的元素不會(huì)占據(jù)空間。

絕對定位的位置聲明是相對于已定位的并且包含關(guān)系最近的祖先元素。如果當(dāng)前需要被定為的元素沒有已定位的祖先元素作為參考值，則相對于整個(gè)網(wǎng)頁。

position：absolute；

1 <!DOCTYPE html>

2 <html lang="en">

 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>定位和布局</title>
 9 </head>
10 <style>
11     .big {
12         width: 900px;
13         height: 600px;
14         background-color: black;
15         position: relative;
16     }
17 
18     .box4 {
19         width: 150px;
20         height: 100px;
21         background-color: blue;
22          position: absolute;
23         top: 150px;
24         left: 200px; 
25     }
26 </style>
27 <body>
28     <div class="big">

29         <div class="box4"></div>
30     
31     </div>
32 </body>
33 
34 </html>

藍(lán)色的盒子是相對于整個(gè)大盒子而言的，但是，當(dāng)藍(lán)色盒子外層沒有設(shè)置有定位的大盒子包裹，則藍(lán)色盒子會(huì)的絕對定位會(huì)相對與整個(gè)屏幕。

2、相對定位

position：relative；

相對定位與絕對定位的區(qū)別在于它的參照點(diǎn)不是左上角的原點(diǎn)，而是該元素本身原先的起點(diǎn)位置。并且即使該元素偏移到了新的位置，也仍然從原始的起點(diǎn)處占據(jù)空間。

<!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>

此時(shí)我們以第三個(gè)盒子，黃色的盒子為例，此時(shí)我們將它的相對定位注釋掉，它的運(yùn)行結(jié)果是這樣的。

HTML絕對定位、相對定位和固定定位的方法

當(dāng)我們給他加上相對定位，position：relative；運(yùn)行結(jié)果是這樣的，它以自身原先的位置為參照物向上向右移動(dòng)，但是當(dāng)它移動(dòng)之后，它原本下面的綠色盒子沒有往上移動(dòng)，占據(jù)它的位置，也就是說，使用相對定位會(huì)占據(jù)位置，而固定定位不會(huì)，以剛剛那個(gè)黃色盒子和綠色盒子為例，如果黃色盒子使用絕對定位給他定位，當(dāng)黃河盒子移走之后，綠色盒子會(huì)往上移，占據(jù)之前黃色盒子的位置。

HTML絕對定位、相對定位和固定定位的方法

3、固定定位

position：fixed；

固定定位永遠(yuǎn)都會(huì)相對于瀏覽器窗口進(jìn)行定位，固定定位會(huì)固定在瀏覽器的某個(gè)位置，不會(huì)隨滾動(dòng)條滾動(dòng)。最常用的就是電腦里面是不是彈出的小廣告，如果你不差掉它，當(dāng)時(shí)滑動(dòng)鼠標(biāo)查看網(wǎng)頁時(shí)，小廣告一直會(huì)在那里，還有常用的就是網(wǎng)站或者APP的導(dǎo)航欄和底部的選擇欄。

以上就是“HTML絕對定位、相對定位和固定定位的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

HTML絕對定位、相對定位和固定定位的方法

1、絕對定位

2、相對定位

3、固定定位

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

HTML絕對定位、相對定位和固定定位的方法

1、絕對定位

2、相對定位

3、固定定位