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>

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

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

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

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

出處：CSDN

SS定位

CSS定位屬性允許您定位元素。它還可以將元素放在另一個元素之后，并指定當元素的內容太大時應該發生什么。

可以使用頂部，底部，左側和右側屬性定位元素。但是，除非首先設置position屬性，否則這些屬性將不起作用。根據定位方法，它們的工作方式也不同。

有三種定位方式：靜態、固定、相對定位。

靜態定位

HTML元素默認為靜態。靜態定位元件總是根據頁面的正常流動來定位。靜態元素不受top bottom left right的影響。

固定定位 fixed

具有固定位置的元素相對于瀏覽器窗口定位，即使滾動窗口也不會移動。

可以使用頂部，右側，底部和左側的一個或多個屬性指定位置。

相對定位 relative

相對定位的元件相對于其正常位置定位。頂部，右側，底部和左側的屬性可用于指定元件如何移動。

絕對定位 absolute

相對于具有position屬性設置的父對象的偏移量，不占用原頁面空間。

若所有的父對象都沒有設置position屬性，則以body即瀏覽器窗口為參照進行定位。

一般，將父元素position設置為relative,子元素設置為absolute，這樣子元素可以相對于父元素進行定位，而父元素保持原位（不設置父元素偏移量的話）

理解定位，首先要了解文檔流是什么。

文件流：指盒子按照html標簽編寫的順序，從上到下，從左到右排列，塊元素占一行，從左到右排列，每一行元素在一行中從左到右排列，先寫的先，后寫的排在后面，每個盒子都占據自己的位置。

位置可以使方框脫離文檔流，就好比將元素分割成幾層，沒有位置的在一層，定位在沒有定位的上面一層。

你可以用Z-index設置等級，Z-index越大，顯示的就越向前。在創建網頁彈框時，通常將其設置為最大。

我們可以使用css的position屬性來設置元素的定位類型，postion的設置項如下：

relative生成相對定位元素，元素所占據的文檔流的位置保留，元素本身相對自身原位置進行偏移。

absolute生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。

fixed生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位。

static默認值，沒有定位，元素出現在正常的文檔流中，相當于取消定位屬性或者不設置定位屬性。

<!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>
    <style>
        .con1,.con2,.con3,.con4,.con5{
            border: 1px solid #000;
            margin: 10px;
            height: 400px;
        }
        /* 這個div屬于它下屬div的父元素，如果沒有設置浮動，當下屬div設置absolute時，相對于body偏移*/
        .con3{
            position: relative;  
        }
        .no_pos_1,.no_pos_2{
            height: 100px;
            width: 400px;
            margin :10px;
            font-size: 16px;
        }
        .no_pos_1{
            background-color: red;
        }
        .no_pos_2{
            background-color: gold;
        }

        .relative_1,.relative_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .relative_1{
            background-color: red;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .relative_2{
            background-color: gold;
        }

        .absolute_1,.absolute_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .absolute_1{
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .absolute_2{
            background-color: gold;
        }
        .fixed_1,.fixed_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .fixed_1{
            background-color: red;
            position: fixed;
            left: 50%;
            margin-left: -200px;  /* 設置水平垂直居中*/
            top: 50%;
            margin-top: -50px;
            z-index: 9999;   /*  彈框一般設置足夠大的值 */
        }
        
         /* 彈框效果 */ 
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;      /* 設置透明度 */
            z-index: 9998;   /* 一般比彈框設置的值小1*/
        }
        .fixed_2{
            background-color: gold;
        }
        .static_1{
            height: 100px;
            width: 400px;
            margin-top :10px;
            background-color: gold;
            position: static;
        }
</style>
</head>
<body>
    <div class="mask">

    </div>
    <div class="con1">
        <div class="no_pos_1">
            沒有使用定位
        </div>

        <div class="no_pos_2">
            沒有使用定位
        </div>
    </div>
    <div class="con2">
        <div class="relative_1">
            relative 生成相對定位元素，元素所占據的文檔流的位置保留，元素本身相對自身原位置進行偏移
        </div>
        <div class="relative_2">
            
        </div>
    </div>
    <div class="con3">
        <div class="absolute_1">
            absolute 生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于上一個設置了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位
        </div>
        <div class="absolute_2">
            
        </div>
    </div>
    <div class="con4">
        <div class="fixed_1">
            fixed 生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位。
        </div>
        
        <div class="fixed_2">

        </div>
    </div>
    <div class="con5">
        <div class="static_1">
            static 默認值，沒有定位，元素出現在正常的文檔流中，相當于取消定位屬性或者不設置定位屬性。
        </div>
    </div>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143復制代碼類型：[html]

制作一個彈框效果：

「鏈接」

在線咨詢

上一篇：CSS這樣處理HTML列表，三個簡單的CSS屬性，美化你的頁面
下一篇：JavaScript中裝載XML文檔

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS定位 實操代碼掌握固定定位、絕對定位與相對定位子絕父相

定定位