關於Position屬性的相關使用及踩坑

記錄一下常常使用的position相關屬性，以及一些關於使用中遇到的坑css

固定定位fixed：相對於瀏覽器窗口進行固定位置

position:fixed;
複製代碼

元素的位置相對於瀏覽器窗口是固定位置，即便窗口是滾動的它也不會移動。Fixed定位使元素的位置與文檔流無關，所以不佔據空間。 Fixed定位的元素和其餘元素重疊。html

相對定位relative：相對於他本來的位置進行移動

position:relative;
top:10px;
left:20%;
複製代碼

若是對一個元素進行相對定位，它將出如今它所在的位置上。而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動。在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。用top,left,right,bottom屬性去改變元素的位置瀏覽器

絕對定位absolute：相對於他的父元素進行移動

position:absolute;
複製代碼

粘性定位sticky：先是相對於他本來的位置進行移動，而後在超出目標區域後，固定在目標位置，即先按照relative定位方式定位，而後按照fix定位方式定位。

position:sticky;
複製代碼

元素先按照普通文檔流定位，而後相對於該元素在流中的flow root（BFC）和 containing block（最近的塊級祖先元素）定位。然後，元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位。bash

默認定位Static：

position:Static;
複製代碼

默認值。沒有定位，元素出如今正常的流中（忽略top, bottom, left, right 或者 z-index 聲明）。markdown

inherit:

position:inherit;
複製代碼

規定應該從父元素繼承position 屬性的值。佈局

關於position:relative absolute fixed定位和佈局的踩坑心得

關於absolute定位：子元素使用absolute進行定位的時候，會一層一層地向上去找本身的父元素中有沒有設置position:relative屬性的父元素，若是找到了，那麼全部的偏移量例如top:10px這種都是相對於父元素的位置來進行偏移，若是本身的全部父元素都沒有設置position:relative,那麼absolute定位的時候會相對於根元素也就是body元素來進行偏移flex

<html>
	<head>
		<style> .grandFather { width:700px; height:500px; background-color:blue; margin:200px auto; } .father { width:200px; height:100px; background-color:red; } .son { width:50px; height:50px; background-color:green; } </style>
	</head>
	
	<body>
		<div class="grandFather">
			<div class="father">
				<div class="son"></div>
			</div>
		</div>
	</body>
</html>
複製代碼

如圖，咱們聲明瞭3個嵌套的div，按父元素到子元素的順序分別取名爲爺爺、爸爸、兒子，尺寸分別爲700x500,200x100,50x50，設置了三個顏色以後，而且咱們爲了實驗的效果，用margin屬性將div的位置調到了瀏覽器的居中位置，效果以下：spa

如今，咱們給兒子設置一個position:absolute;再讓他top:30px來進行向下30px的偏移

top:30px;
複製代碼

咱們發現，兒子並無相對於爸爸或者爺爺向下偏移30px，而是相對於瀏覽器的根元素body向下偏移了30px，可是若是咱們此時設置了爸爸具備position:relative屬性

.father
{
	width:200px;
	height:100px;
	background-color:red;
	position:relative;
}
複製代碼

可見，兒子向上找到了relative的爸爸，而後相對於爸爸的位置向下偏移了30px, 若是咱們把爸爸的relative去掉，設置爺爺爲relative

.grandFather
{
	width:700px;
	height:500px;
	background-color:blue;
	margin:200px auto;
	position:relative;
}
複製代碼

能夠發現，兒子仍然來到了剛纔的位置，因而可知，兒子向上找，發現爸爸不是relative，再向上找，發現爺爺是relative，從而以爺爺的位置做爲參考進行了偏移，只不過因爲咱們的爸爸和爺爺的起始位置同樣，才形成了相同的效果

咱們會發現position屬性不少時候會改變網頁的佈局，而且在瀏覽器大小發生變化的時候不可以自適應的變化，因此下一篇文章介紹流式佈局flex屬性，如何實現基本的自適應佈局方式。code