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