div盒子的相对定位（position:relative）和绝对定位（position:absolute）

 

有一说一，在做搜索框，鼠标触发事件的时候要用到盒子的相对和绝对定位。

在CSS中，position:absolute;当position的值为absolute时，这个盒子就是开启了绝对定位模式。

引用来自W3C的权威解读：https://www.w3school.com.cn/css/css_positioning_absolute.asp（内容如下图）

做个例子：

• 列出四个盒子，标记不同颜色，不做任何定位操作。

html部分

<div id="main">
		<div id="box1">box1</div>
		<div id="box2">box2</div>
		<div id="box3">box3
			<div id="box4">box4</div>
		</div>
	</div>

css部分 

body{
	margin: 50px;
    }
#main{
    width: 400px;
	height: 150px;
	background-color: #888;/*灰色*/
	}
#box1{
	width: 50px;
	height: 50px;
	background-color: #FFA939;/*橘色*/
	}
#box2{
	width: 50px;
	height: 50px;
	background-color: #F9F3EE;/*米白*/
    }
#box3{
	width: 100px;
	height: 50px;
	background-color: #70CDE5;/*浅蓝*/
	}
#box4{
	width: 50px;
	height: 50px;
	background-color: #009CC6;/*天蓝*/
	}

 页面效果如图：

给box4加上一个相对于box3的绝对定位并设置一定的偏移量。由于box4没有已定位的祖先元素，所以它的位置相对于最初的包含块也就是浏览器窗口定位。（绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。）：

css部分

#box4{
	    	width: 50px;
	    	height: 50px;
	    	background-color: #009CC6;/*天蓝*/
	    	position: absolute;/*添加绝对定位*/
	    	left: 200px;/*相对浏览器左边偏移200px*/
	    }

在CSS中，position:relative;当position的值为relative时，这个盒子就是开启了相对定位模式。

引用来自W3C的权威解读：https://www.w3school.com.cn/css/css_positioning_relative.asp（内容如下图）

如果祖先元素开启了定位，则相对于祖先元素进行定位。我们现在把最近的元素box3定位设定为box4的祖先元素，使box4相对于box3进行偏移。

#box3{
	width: 100px;
	height: 50px;
	background-color: #70CDE5;/*浅蓝*/
	position: relative;/*添加相对定位*/
	 }
#box4{
	width: 50px;
	height: 50px;
	background-color: #009CC6;/*天蓝*/
	position: absolute;/*添加绝对定位*/
	left: 100px;/*相对浏览器左边偏移100px*/
	top:-50px;/*相对于box3的位置向上的反方向偏移50px*/
}

由效果图可以看出，当box4相对于box3决定定位时，会脱离上一步相对于浏览器窗口的偏移转为相对于box3的位置进行偏移。