欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、承德ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的承德網(wǎng)站制作公司

1、絕對定位

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

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

position：absolute；

 1    <!DOCTYPE html> 

2  <html lang="en">

3
 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)色的盒子是相對于整個大盒子而言的，但是，當(dāng)藍(lán)色盒子外層沒有設(shè)置有定位的大盒子包裹，則藍(lán)色盒子會的絕對定位會相對與整個屏幕。

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>

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

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

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

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

 3、固定定位

position：fixed；

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

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

標(biāo)題名稱：HTML絕對定位、相對定位和固定定位的方法
網(wǎng)頁URL：http://chinadenli.net/article12/jhjdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、品牌網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)