CSS_定位position&配合z-index元素层级使用

柔情只为你懂 2023-10-06 16:58 27阅读 0赞

定位(position)
    		-定位是一种更加高级的布局手段
    		-通过定位可以将元素摆放到页面的任意位置
    		使用position属性来设置定位
    		可选值: 
    			-static
    				默认值，元素是静止的没有开启定位
    			-relative
    				开启元素的相对定位
    			-absolute
    				开启元素的绝对定位
    			-fixed
    				开启元素的固定定位
    			-sticky
    				开启元素的粘滞定位

## 一、相对定位position:relative; ##

> 相对定位参考点是其本身的位置，并且`移动后的参考点还是原本的位置`；  
> 当元素的position属性值设置为relative时则开启了元素的相对定位

相对定位的特点:  
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化  
2.相对定位是参照于元素在文档流中的位置进行定位的  
3.相对定位会提升元素的层级  
4.相对定位不`会使元素脱离文档流`  
5.相对定位不会改变元素的性质块还是块，行内还是行内

-偏移量(offset)
    		-当元素开启了定位以后，可以通过偏移量来设置元素的位置
    			top
    				-定位元素和定位位置上边的距离
    			bottom
    				-定位元素和定位位置下边的距离
    				-定位元素垂直方向的位置由top和bottom两个属性来控制
    					通常情况下我们只会使用其中
    				-top值越大，定位元素越向下移动
    				-bottom值越大，定位元素越向上移动
    			left
    				-定位元素和定位位置的左侧距离
    			right
    				-定位元素和定位位置的右侧距离
    				-定位元素水平方向的位置由left和right两个属性控制
    					通常情况下只会使用一个
    				-left越大元素越靠右
    				-right越大元素越靠左

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			body{
          
    				font-size: 60px;
    			}
    			
    			.box1{
          
    				width: 200px;
    				height: 200px;
    				background-color: aquamarine
    			}
    			.box2{
          
    				width: 200px;
    				height: 200px;
    				background-color: bisque;
    				position:relative;
    				left:200px;
    				top: -200px;
    			}
    			.box3{
          
    				width: 200px;
    				height: 200px;
    				background-color: #ff0000;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1">1</div>
    		<div class="box2">2</div>
    		<div class="box3">3</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

## 二、绝对定位position: absolute; ##

> 绝对定位的位置声明相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个页面。

当元素的position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位的特点:  
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化  
2.开启绝对定位后，元素会从文档流中脱离  
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开  
4.绝对定位会使元素提升一一个层级  
5.绝对定位元素是相对于其包含块进行定位的

包含块( containing block )  
\-正常情况下:  
包含块就是离当前元素最近的祖先块元素  
\-绝对定位的包含块:  
包含块就是离它最近的开启了定位的祖先元素，  
如果所有的祖先元素都没有开启定位则根元素就是它的包含块  
\-html (根元素、初始包含块)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			body {
          
    				font-size: 60px;
    			}
    
    			.box1 {
          
    				width: 200px;
    				height: 200px;
    				background-color: aquamarine
    			}
    
    			.box2 {
          
    				width: 200px;
    				height: 200px;
    				background-color: bisque;
    				 position: absolute; 
    				 left: 0;
    				 top: 0;
    			}
    
    			.box3 {
          
    				width: 200px;
    				height: 200px;
    				background-color: #ff0000;
    			}
    			
    			.box4 {
          
    				width: 400px;
    				height: 400px;
    				background-color: #00ff00;
    				position: relative;
    			}
    			
    			.box5 {
          
    				width: 300px;
    				height: 300px;
    				background-color: #ffffff;
    				position: relative;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1">1</div>
    		<div class="box4">4
    			<div class="box5">5
    				<div class="box2">2</div>
    			</div>
    		</div>
    		<div class="box3">3</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]  
绝对定位元素的位置

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.box1 {
          
    				width: 500px;
    				height: 500px;
    				background-color: #bfa;
    				position: relative;
    			}
    
    			.box2 {
          
    				width: 100px;
    				height: 100px;
    				background-color: orange;
    				position: absolute;
    				margin-left: auto;/* 水平居中 */
    				margin-right: auto;/* 水平居中 */
    				margin-top: auto;/* 垂直居中 */
    				margin-bottom: auto;/* 垂直居中 */
    				/* margin: auto; 或直接用*/
    				left: 0;/* 水平居中 */
    				right: 0;/* 水平居中 */
    				top:0;/* 垂直居中 */
    				bottom: 0;/* 垂直居中 */
    				/* 
    				水平布局 
    					left+margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right=包含快的宽度
    				当我们开启了绝对定位后:
    					水平方向的布局等式就需要添加left和right 两个值
    						此时规则和之前一样只是多添加了两个值:
    							当发生过度约束:
    								如果9个值中没有auto 则自动调整right值以使等式满足
    								如果有auto,则自动调整auto的值以使等式满足
    						-可设置auto的值
    							margin width left right 
    						-因为left和right的值默认是auto,所以如果不知道left和ri ght
    							则等式不满足时，会自动调整这两个值
    						-垂直方向布局的等式的也必须要满足
    						top + margin-top/bottom + padding-top/ bottom + border-top/bottom + height=包含块的高度
    					*/ 
    			}
    		</style>
    
    	</head>
    	<body>
    		<div class="box1">
    			<div class="box2"></div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 2]

## 三、固定定位 position: fixed; ##

> 固定定位永远参照于浏览器的视口进行定位

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {
          
                font-size: 60px;
            }
            
            .box1 {
          
                width: 200px;
                height: 200px;
                background-color: aquamarine
            }
            
            .box2 {
          
                width: 200px;
                height: 200px;
                background-color: bisque;
                /* 
    				固定定位: 
    					-将元素的position属性设置为fixed则开启了元素的固定定位
    					-固定定位也是一种绝对定位， 所以固定定位的大部分特点都和绝对定位一样
    						唯一不同的是固定定位永远参照于浏览器的视口进行定位
    						固定定位的元素不会随网页的滚动条滚动
    				*/
                position: fixed;
                left: 0;
                top: 0;
            }
            
            .box3 {
          
                width: 200px;
                height: 200px;
                background-color: #ff0000;
            }
            
            .box4 {
          
                width: 400px;
                height: 400px;
                background-color: #00ff00;
            }
            
            .box5 {
          
                width: 300px;
                height: 300px;
                background-color: #ffffff;
            }
        </style>
    </head>
    
    <body>
        <div class="box1">1</div>
        <div class="box4">4
            <div class="box5">5
                <div class="box2">2</div>
            </div>
        </div>
        <div class="box3">3</div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_11_color_FFFFFF_t_70_g_se_x_16]

## 四、粘滞定位 ##

兼容性不好  
例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

### 五、元素层级 ###

> 开启定位的元素，z-index值越大，层级越高，元素的层级一样，则优先选择后写的元素  
> z-index:9999

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210323101529777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210323102535103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021032310395844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/04a77aad705443f987f9373635494fce.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_11,color_FFFFFF,t_70,g_se,x_16