CSS定位知识整理（三）

我不是女神ヾ 2022-10-29 07:58 207阅读 0赞

1.定位  
position：relative（相对）、absolute（绝对）、static（无定位）、fixed（固定）

2.position：relative 相对定位  
相对定位的偏移参考元素时元素本身，不会使元素脱离文档流，元素的初始位置占据的空间会被保留。  
示例：

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
    <div class="main">
       <div class="div1"></div>
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。 
    </div>
    </body>
    </html>

.main{
        
    	width: 600px;
    	height: 300px;
    	background-color: yellow;
    }
    .div1{
        
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	/* position: relative;
    	top:20px;
    	left: 30px; */
    }

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

将注释去掉后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]  
相对于以前位置的偏移，并且**红色区域以前位置没有被填充。**

3.绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么他的位置就相对与最初的包含块（如body）

position: absolution  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]  
相对于以前位置的偏移，并且**红色区域以前位置被填充。**（脱标流）

4.相对定位和绝对定位的区别：  
①参照物不同，相对定位的参照物是它本身。绝对定位的参照物是已定位的最先的祖先元素。  
②是否破坏文档流，相对定位不会，绝对定位会。

5.绝对定位和float都可破坏文档流，即脱标流。那么它们的区别是什么，实现浮动应该选择float还是绝对定位？  
float(不会产生重叠）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]  
而position：absolute会重叠。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]

6.固定定位：相对于浏览器窗口进行定位。（随滚动条滚动）  
pisition:fixed 演示div相对浏览器位置不改变的效果。

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
     <div class="div1">广告位</div>
     <div class="div2">
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
     	<p>
     		相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
       相对定位：相对定位的偏移参考元素是元素本身，不会使元素脱 离文档流。元素的初始位置占据的空间会被保留。<br> 
       绝对定位：相对于已定位的最近的祖先元素，如果没有已定位的 最近的祖先元素，那么它的位置就相对于最初的包含 块（如 ）。
     	</p>
    
     </div>
     <div class="div3">广告位</div>
    </body>
    </html>

.div1{
        
    	width: 5%;
    	height: 100px;
    	position: fixed;
    	top:200px;
    	left: 2%;
    	background-color: yellow;
    }
    .div2{
        
    	width: 80%;
    	position: relative;
    	left: 10%;
    }
    .div3{
        
    	width: 5%;
    	height: 100px;
    	position: fixed;
    	top:200px;
    	right: 2%;
    	background-color: yellow;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]  
7. z-index 相对于浏览器窗口进行定位（z-index参数越大越靠上，改变层叠的顺序，为了方便维护，尽量设置几十到几百）

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
    <div class="div0">
    	<div class="div1"></div>
    	<div class="div2"></div>
    	<div class="div3"></div>
    </div>
    </body>
    </html>

div{
        
    	width: 100px;
    	height: 100px;
    }
    .div1{
        
    	background-color: red;
    	position: absolute;
    	top:20px;
    	left: 100px;
    	z-index: 300;
    }
    .div2{
        
    	background-color: green;
    	position: absolute;
    	top:40px;
    	left: 120px;
    	z-index: 200;
    }
    .div3{
        
    	background-color: blue;
    	position: absolute;
    	top:60px;
    	left: 140px;
    	z-index: 100;
    }
    .div0{
        
    	height: 300px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]  
8.利用定位技术，完成下面的样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 7]

<!DOCTYPE html>
    <html>
    <head>
    	<title>练习2</title>
    	<link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
    	<div class="div0">
    		<div class="div1">
    			<div class="div2">5</div>
    			<img class="img1" src="image/cart.svg">
    		</div>
    	</div>
    </body>
    </html>

.div0{
        
    	width:500px;
    	height:300px;
    	background-color:#667766;
    	
    	position:relative;
    }
    .img1{
        
    	width:30px;
    	height:45px;
    	position:absolute;
    	bottom:10px;
    	right:50px;
    }
    .div1{
        
    	width:300px;
    	height:200px;
    	position:absolute;
    	background-color:red;
    	top:60px;
    	left:100px;
    }
    .div2{
        
    	width:30px;
    	height:45px;
    	background-color:blue;
    	border-radius:20px/30px;
    	text-align: center;
    	line-height:45px;
    	top:-10px;
    	left:-10px;
    	position:absolute;
    }

总结：相对定位和绝对定位一起使用时，相对定位作父一级，可以不设置top、left。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]: /images/20221024/36ad25e6b49c42a2b9185f23337dac18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]: /images/20221024/e964708aba1248168355073a4e8ac6fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]: /images/20221024/1dcbe6796a8f46df9c7ab879032dc4b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]: /images/20221024/6031c851b4f04d06be490d03c950677e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]: /images/20221024/e49d70711c724627992caffa5ca80887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]: /images/20221024/988abb99f2f04779ba6b913b1a693cb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]: /images/20221024/874a3a27917c411db276feb5d5c48c11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 7]: /images/20221024/3f14811e862a4b94af58abc8d66a45c4.png