整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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>

          絕對定位和相對定位的區別

          1. 相對定位的參照物是參照物本身。
            絕對定位的參照物就是父級元素,當父級元素中不存在相對定位,那么它的參照物就是body
          2. 相對定位,設置后,原來的位置始終保留著
            絕對定位,設置后,原來的位置會被后面的內容占據

          原文鏈接:https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741

          作者:我一個超級無敵可愛的人鴨

          出處:CSDN

          次我們來說一下,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://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          用了fixed的效果展示。

          以上的代碼樣式只對兔子圖片起作用,我沒有給貓添加任何樣式,貓圖片只是作為參照物。

          對定位

          position:

          absolute

          特性:

          1、脫離文檔流,定位元素占據的位置會釋放

          2、原點計算:如果該元素做了定位,那么就去找它做了定位的父元素(找最近的)作為原點基準,如果父元素都沒做定位,則以瀏覽器(0,0)作為原點基準。

          3、對內嵌元素定位后,設置寬高屬性就會有效果

          應用場景:

          一般情況下,絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景

          相對定位

          position:

          relative

          1、不脫離文檔流,定位元素占據的位置不會被釋放/

          2、原點計算:以父級元素作為原點基準,若沒有父級元素則以瀏覽器(0,0)為基準。

          一般的應用:父相子絕

          3、父元素為相對定位,子元素為絕對定位,文檔元素不會受影響。

          4、父元素提供相對定位后,子元素以父元素為基準來進行定位。

          應用場景:

          相對定位一般情況下很少自己單獨使用,都是配合絕對定位使用,為絕對定位創造定位父級而又不設置偏移量

          固定定位

          position:

          fixed

          1、脫離了文檔流

          2、原點計算:以瀏覽器(0,0)作為原點基準,盡管父元素做了定位也不會影響它的原點

          基準。

          應用場景:

          一般在網頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等

          注意:使用定位后會激活如下5個屬性

          left | right | top | bottom | z-index

          z-index

          改變定位后的疊放順序

          取值范圍:-1~9999

          其他:

          設置網頁元素的透明度

          opacity: 0~1;

          filter: opacity(0.2) | contrast(0.2)

          絕對定位(absolute)代碼案例:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8" />

          <title>絕對定位</title>

          <style type="text/css">

          /*絕對定位:

          *1、脫離文檔流,做了定位后它占據的位置會釋放。

          *2、原點計算:如果該元素做了定位,那么就去找它做了定位的父元素(最近)作為原點基準,若果父元素

          * 都沒做定位,則以瀏覽器(0,0)作為原點基準。

          *3、對內嵌元素做了定位后,它的寬度高度屬性就會有效。

          */

          *{

          padding: 0px;

          margin: 0px;

          }

          .box-father{

          width: 500px;

          height: 500px;

          margin-left: 500px;

          background-color: yellow;

          position: absolute;

          }

          .son{

          width: 400px;

          height: 400px;

          margin-left: 20px;

          background-color: black;

          position: absolute;

          }

          .box{

          width: 300px;

          height: 300px;

          background-color: blue;

          /*絕對定位*/

          position: absolute;

          /*激活4個屬性*/

          left: 150px;

          /*right: ;*/

          top: 100px;

          /*bottom: ;*/

          }

          .box2{

          width: 400px;

          height: 400px;

          background-color: red;

          }

          span{

          width: 200px;

          height: 200px;

          background-color: green;

          /* position: absolute;*/

          float: left;

          }

          </style>

          </head>

          <body>

          <div class="zx"> <!-- 祖先 :定位-->

          <div class="box-father"> <!-- 爺爺 :定位-->

          <div class="son"> <!-- 兒子:定位-->

          <div class="box"> <!-- 孫子:如果孫子做了定位,它就去找接近它定位最近的父元素來做為基準 -->

          </div>

          </div>

          </div>

          </div>

          <div class="box2">

          </div>

          <span>我是span</span>

          </body>

          </html>


          主站蜘蛛池模板: 一区二区三区亚洲| 骚片AV蜜桃精品一区| 波多野结衣一区在线| 无码少妇一区二区三区芒果| 国内精品一区二区三区最新| 无码欧精品亚洲日韩一区夜夜嗨| 亚洲av片一区二区三区 | 国产高清在线精品一区二区三区| 午夜精品一区二区三区在线观看| 红杏亚洲影院一区二区三区| 久久精品国产亚洲一区二区| 中文字幕日韩精品一区二区三区 | 精品国产一区二区三区免费看| 国产激情一区二区三区四区| 日韩精品无码一区二区三区AV| 久久精品国产一区| 亚洲av永久无码一区二区三区| 日韩美一区二区三区| 亚洲一区精品无码| 免费无码一区二区三区蜜桃大| 精品成人av一区二区三区| 精品视频一区二区三三区四区 | 国产天堂在线一区二区三区| 久久国产午夜精品一区二区三区| 精品深夜AV无码一区二区| 国产一区二区精品久久岳√| 久久久久久免费一区二区三区| 国内精品视频一区二区三区八戒| 一区二区三区人妻无码| 99国产精品欧美一区二区三区| 国产免费一区二区三区不卡 | 无码精品人妻一区二区三区人妻斩 | 手机看片一区二区| 亚洲AV无码一区二区三区久久精品| 一区二区在线免费视频| 亚洲av无码成人影院一区| 日韩精品一区二区三区大桥未久| 国产精品免费视频一区| 亚洲福利一区二区三区| 国产在线精品一区二区夜色| 狠狠做深爱婷婷久久综合一区|