html中相對(duì)位置與絕對(duì)位置的具體使用
我要評(píng)論用戶在瀏覽網(wǎng)站時(shí)經(jīng)常會(huì)看到左側(cè)有一種宣傳欄，它不會(huì)隨著鼠標(biāo)滾動(dòng)而不被用戶看到，它會(huì)始終以頁(yè)面的中心為參照物始終保持在左側(cè)一個(gè)固定的位置，今天我們來(lái)做一下這個(gè)小例子，讓我們先了解一下盒模型和相對(duì)丶絕對(duì)位置的前端知識(shí)。
盒模型分為兩種一種是標(biāo)準(zhǔn)模型，另一種是IE模型，它的組成由外向里是margin，border，padding，content，如下兩個(gè)圖所示。
標(biāo)準(zhǔn)模型，寬高均為內(nèi)容（content）的寬高
IE模型，寬高為內(nèi)容(content)+填充(padding)+邊框(border)的總寬高。
通常情況我們計(jì)算盒模型寬高是計(jì)算IE模型的寬高，利用上面的公式我們計(jì)算一下這個(gè)css代碼中的寬高，div{ width: 200px; height: 200px; /*只給出一個(gè)數(shù)值表面盒模型的邊框大小相同*/ border: 10px solid black; /*如果給出四個(gè)數(shù)值順序?yàn)樯嫌蚁伦?，如果三個(gè)是上（左右）下， 如果兩個(gè)是（上下）（左右），如果一個(gè)則大小相同*/ padding: 10px 20px 30px; margin: 10px 20px;
}
寬為：200+10*2+20*2=260px，高為：200+10*2+10+30=260px，要注意的是邊框（border）和填充（padding）要各計(jì)算兩次，如果有content的值也要加上。
在用CSS+DIV進(jìn)行布局定位的時(shí)候，一直對(duì)position的四個(gè)屬性值relative,absolute,static,fixed分的不是很清楚，以致經(jīng)常會(huì)出現(xiàn)讓人很郁悶的結(jié)果。這里我們?cè)诖丝偨Y(jié)一下：
先看下position各個(gè)屬性值的定義：
1、static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。
2、relative：生成相對(duì)定位的元素，通過(guò)top,bottom,left,right的設(shè)置相對(duì)于其正常位置進(jìn)行定位?？赏ㄟ^(guò)z-index進(jìn)行層次分級(jí)，relative作為參照物，absolute來(lái)定位，relative保留原來(lái)的位置進(jìn)行定位。
3、absolute：生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定?？赏ㄟ^(guò)z-index進(jìn)行層次分級(jí)，absolute會(huì)相對(duì)與最近的父級(jí)的定位來(lái)定位，如果父級(jí)沒有定位則會(huì)相對(duì)與文檔定位也就是說(shuō)脫離原來(lái)的位置進(jìn)行定位。
4、fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)"left","top","right"以及"bottom"屬性進(jìn)行規(guī)定，利用該屬性來(lái)制作我們今天的例子，可通過(guò)z-index進(jìn)行層次分級(jí)。
注意：z-index是數(shù)學(xué)模型中的z軸，也就是說(shuō)電腦屏幕離我們面部的距離遠(yuǎn)近，該值默認(rèn)為0可以改變數(shù)值的大小來(lái)改變這個(gè)距離從而分成不同的層。
回顧下上面的內(nèi)容就可以著手做我們的廣告欄了，首先在html文件中新建一個(gè)<div></div>，為了顯示效果在<div>下生成多個(gè)換行標(biāo)簽<br>
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="D:\各類型文檔\css\lesson2.css"> </head> <body> <div>愛國(guó)敬業(yè)文明民主和諧...</div> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> </body> </html>
下面是css的代碼：
*{
margin: 0;
padding: 0;
}
div{
position: fixed;
width: 50px;
height: 200px;
left: 0;
top: 300px;
background-color: green;
}
可以看到css代碼首先將填充和外邊距設(shè)置為0，這也是我們?cè)陂_發(fā)前端css代碼時(shí)首先做的事情將默認(rèn)的數(shù)值清0，接下來(lái)設(shè)置的是div的屬性fixed屬性將盒模型定位，盒模型是一個(gè)緊貼瀏覽器左側(cè)距離上部300px的長(zhǎng)方形，下圖是瀏覽器中的展示效果：
這樣我們就實(shí)現(xiàn)了鼠標(biāo)滾動(dòng)而廣告欄不隨著移動(dòng)定位在固定位置的效果。
擴(kuò)展：利用position的absolute屬性可以實(shí)現(xiàn)奧運(yùn)五環(huán)的效果，absolute是相對(duì)父級(jí)的位置來(lái)定位的，首先可以寫一個(gè)<div></div>來(lái)作為五環(huán)的畫布也就是父級(jí)<div>，這個(gè)父級(jí)標(biāo)簽是居中的設(shè)置它的left和top屬性均為相對(duì)于頁(yè)面的50%大小，margin-left和margin-top也需要調(diào)整對(duì)應(yīng)的負(fù)數(shù)像素，這樣不管瀏覽器是否縮放與全屏父級(jí)標(biāo)簽均保持在屏幕正中央，同時(shí)父級(jí)標(biāo)簽也不能隨著鼠標(biāo)滾輪的滾動(dòng)而改變位置設(shè)置position屬性為fixed。
畫圓的時(shí)候?qū)A角的彎曲程度改為50%即為正圓，五環(huán)的上面三個(gè)圓高寬相同，相隔距離相同，相對(duì)于父級(jí)邊框的位置不同，即兩圓之間向隔一個(gè)圓的寬度加上一定的像素，這里我設(shè)置的圓的寬高為170px，間隔為50px則兩圓的圓心距離為220px。下面的兩個(gè)圓與上面的三個(gè)圓高度不同具體高度可以自行設(shè)置margin-top并將z-index的屬性設(shè)為1，表明下面的兩個(gè)圓覆蓋在上面的三個(gè)圓上，五個(gè)圓都在畫布父類中故position屬性為absolute相對(duì)與父類的位置。
html代碼如下：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="D:\各類型文檔\css\lessone3.css"> </head> <body> <div class="wrapper"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div> </body> </html>
css代碼如下:
*{
margin: 0;
padding: 0;
}
.wrapper{
position: fixed;
left: 50%;
top: 50%;
border: 2px;
width: 1000px;
height: 700px;
background-color: #999;
margin-left: -500px;
margin-top: -350px;
}
.box1{
position: absolute;
margin-left: 200px;
margin-top: 200px;
width: 170px;
height: 170px;
border: 10px solid #006;
border-radius: 50%;
}
.box2{
position: absolute;
margin-left: 420px;
margin-top: 200px;
width: 170px;
height: 170px;
border: 10px solid black;
border-radius: 50%;
}
.box3{
position: absolute;
margin-left: 640px;
margin-top: 200px;
width: 170px;
height: 170px;
border: 10px solid #B00;
border-radius: 50%;
}
.box4{
position: absolute;
margin-left: 310px;
margin-top: 300px;
width: 170px;
height: 170px;
border: 10px solid yellow;
border-radius: 50%;
z-index: 1;
}
.box5{
position: absolute;
margin-left: 530px;
margin-top: 300px;
width: 170px;
height: 170px;
border: 10px solid green;
border-radius: 50%;
z-index: 1;
}
頁(yè)面效果如下：
到此這篇關(guān)于html中相對(duì)位置與絕對(duì)位置的具體使用的文章就介紹到這了,更多相關(guān)html相對(duì)位置與絕對(duì)位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html+css實(shí)現(xiàn)滾動(dòng)到元素位置顯示加載動(dòng)畫效果
這篇文章主要介紹了html+css實(shí)現(xiàn)滾動(dòng)到元素位置顯示加載動(dòng)畫效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-07-27
HTML頁(yè)面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)的實(shí)現(xiàn)
這篇文章主要介紹了HTML 頁(yè)面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2021-04-14HTML中img標(biāo)簽只顯示圖片中心位置的方法(三種方法)
html中 img標(biāo)簽顯示圖片中心的方法目前知道三種，下面小編把他分享到腳本之家平臺(tái)，需要的朋友參考下2017-04-13