整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次我們來說一下，HTML網頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中，我們的各種樣式，標簽，圖片等東西都是出現在網頁的各個位置，網頁看起來很美觀，各種盒模型擺放合理，這是因為在HTML中有定位的能力，今天我們就來學習一下。
position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進行定位，但保留自己原來的位置，別的元素無法占用），absolute（絕對定位：相對于有定位的父級進行定位，如果沒有則相對于文檔進行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。
我們說完了position，接下來我們就說說他是怎么進行定位的，我們有left，top，right，bottom，五個屬性分別對應 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。
我們來通過代碼和結果來看一下：
沒有定位的樣式
加了relative
加了relative的結果
上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]
我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。
加了absolute
加了absolute的結果
這個結果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置
加了fixed
代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用，我沒有給貓添加任何樣式，貓圖片只是作為參照物。
iv+css是現在比較流行網頁排版技術，其中css的靈活運用是不可缺少的部分。在完成一些復雜的頁面排版都是由最簡單的排版方式演變而來的，應讀者的要求今天給大家講解一下css最基礎的布局元素對齊，在css中我們可以用多種屬性來實現對齊元素，如果你是技術大牛的話這篇文章就可以直接忽略了，不喜勿噴！
css中元素對齊方式有哪些？
1、塊元素的對齊
塊元素默認占一行，如果一行內已經出現了塊元素，再添加其他塊元素會自動換行的。塊元素也可以嵌套其他的塊元素使用，塊元素一般是作為容器出現的，比如說HTML中常出現的div，塊元素和行元素是可以通過css相互轉換的。塊元素可以使用“margin” 屬性來水平對齊，可通過將左和右外邊距設置為 "auto"，來對齊塊元素。比如.nav{margin-left:auto;margin-right:auto;width:70%;}，如果寬度是100%則對齊沒有效果，我們可以把這段代碼改成.nav{margin:0 auto;}來實現導航板塊內容的水平對齊。塊元素存在一個外邊距處理方面的 BUG會在個別瀏覽器出問題，使用的時候一定要注意這個問題。
2、使用 position
對齊元素的方法之一是使用絕對定位，比如說這段代碼：.nav{position:absolute;right:0px;width:300px;}。但是在使用position水平對齊元素時會出現兼容問題，使用IE8之前瀏覽器，如果容器設置了明確寬度，忘記聲明！DOCTYPE左右兩側會增加十七像素的外邊距。為了避免這樣問題使用 position對齊元素，一定不要忘記 !DOCTYPE聲明。
3、使用float
對齊元素的另一種方法是使用 float 屬性，如這段代碼.right{float:right;width:300px;}，這樣對齊元素也會出現瀏覽器兼容，，使用IE8之前瀏覽器，如果使用了使用 float 屬性時，忘記聲明！DOCTYPE左右兩側會增加十七像素的外邊距，這一點和position是一樣的，為了避免這樣問題使用 position對齊元素，也一定不要忘記 !DOCTYPE聲明。
關于“css中的元素對齊”先聊到這。每天學習一個知識點，每日寄語”不管有多少面墻阻擋，總還有一道屬于你的明媚陽光。”如轉載清標明出處。
position:fixed;用我自己的話來說，就是讓你想要固定的東西固定。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
}
.photo{
width: 600px;
height: 600px;
position: fixed;
left: calc(50%-300px);
top: calc(50%-300px);
}
</style>
</head>
<body>
10月7日，昆凌在社交平臺曬出自己蕩秋千的美照。
照片中，昆凌長發披肩，頭戴假日風草帽，
穿一襲白裙在海邊蕩著秋千，回眸甜笑，宛若仙子。
<div id="box1">
<img src="img/kunling.jpg" class="photo">
</div>
</body>
</html>
對了，在這里說一下，我目前是在職web前端開發，如果你現在正在學習前端，了解前端，渴望成為一名合格的web前端開發工程師，在入門學習前端的過程當中有遇見任何關于學習方法，學習路線，學習效率等方面的問題，都可以隨時關注并私信我：前端，我都會根據大家的問題給出針對性的建議，缺乏基礎入門的視頻教程也可以直接來找我，我這邊有最新的web前端基礎精講視頻教程， 還有我做web前端技術這段時間整理的一些學習手冊，面試題，開發工具，PDF文檔書籍教程，都可以直接分享給大家。
當我下拉時，圖片的位置是不會動的。即使下滑到了最底部，圖片的位置也是固定的。對比下面這張圖：
子絕父相就是指子元素設置絕對定位，而父元素設置相對定位。換句話說：如果要對一個子元素使用定位的話，讓子元素（絕對定位）以其父元素（相對定位）為標準來定位。
實操代碼理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 300px;
height: 300px;
background-color: coral;
position: relative;
border: solid 3px red;
}
#son1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 20px;
top: 50px;
}
#son2{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
left: 40px;
top: 90px;
}
</style>
</head>
<body>
<div id="father">
I am father
</div>
<div id="son1">
I am son1
</div>
<div id="son2">
I am son2
</div>
</body>
</html>看圖：在father這個容器設置了相對定位之后，son1和son2都設置了絕對定位，我們的子類這時其實不是在body中絕對定位（absolute），而是在其父類的范圍中絕對定位（absolute）。
position: absolute;查找定位的參照物方法：
從當前元素開始往上找，直到找到一個具有定位屬性的元素為準，以這個元素為參照進行定位。
如果沒有一個元素有定位屬性,最終就參照body進行定位。（我一直理解的就是絕對定位就是你想定哪里定哪里）
定位的時候：結合top left right bottom 這四個方向屬性進行配合定位。但是要注意：不能同時選擇left喝right
注意：這里要區別于相對定位，在使用相對定位時，無論是否進行移動，原來的位置就沒有了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
background-color: salmon;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="box1">
我是box1，我采用了絕對定位
</div>
</body>
</html>position: relative;相對定位是相對于元素在文檔中的初始位置——首先它出現在它所在的位置上（即不設置position時的位置，然后通過設置垂直或水平位置，讓這個元素“相對于”它的原始起點進行移動；
注意，在使用相對定位時，無論是否進行移動，原來的位置始終保留著。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
left: 300px;
top: 300px;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
</html>原文鏈接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者：我一個超級無敵可愛的人鴨
出處：CSDN
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
