css中绝对定位和固定定位的区别

傷城~ 2022-10-24 13:21 188阅读 0赞

**首先我们制作两个标准块级元素，代码如下：**

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
现在给第一个块级元素添加绝对定位，我们来看看效果：  
代码如下:

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
**总结：盒子添加了绝对定位，则绝对定位会压住下面标准流所有的内容**  
***那我们来看看浮动的效果，我现在把绝对定位换成浮动：***

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]  
运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
**咦，难道浮动的元素不会压住标准流盒子吗？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]  
**如上图，浮动的盒子是会压住标准流盒子的，但是不会压住标准流的文字（图片）o ~**  
我在复制多一些文字，效果更明显，你们看：  
代码如下：

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div {
 
 width: 300px;
 height: 300px;
 background-color: cornflowerblue;
 float: left;
 }
 </style>
 </head>
 <body>
 <div></div>
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！
 </body>
 </html>

运行效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]  
是不是很神奇，浮动为什么不会压住文字呢，其实浮动存在的最初是为了做文字环绕效果的，让文字围绕浮动元素！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/2295b8fbbab146978b78a9bfa891bb38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/37bde513031d4b76b6c2b0826fcf9282.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/5b6c7b15fb8f4d7aaf0ebe0b880a5f4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/8412ac0764274d27b52337ca4e55773e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 4]: /images/20221024/44fe7fd6c373462ea09da74018f9dc7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 5]: /images/20221024/b7e943a7ec594335ab0015fb9d73130e.png