CSS中的position

最新推荐文章于 2024-07-24 13:52:24 发布

小白在努力！

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量57

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/giserhfbuie/article/details/114780707

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

position:fixed他是相对body来定位的，脱离文档流
position:relative它是相对于自身来变化的，而且不会脱离文档流
position:absolute脱离文档流，相对于position为非static的父标记定位

<html>
    <head>
        <title></title>
       
    </head>
    <body>
        <!--position:fixed他是相对body来定位的，脱离文档流-->
        <div style="border: 1px solid black;width: 300px;height: 300px;">
            <div class="in" style="width: 100px;height:100px;background-color: red;"></div>
            <div class="in" style="width: 100px;height:100px;background-color: yellow;"></div>
            <div class="in" style="width: 100px;height:100px;background-color: green;position:fixed;bottom: 20px;right:20px;">
            </div>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <!--position:relative它是相对于自身来变化的，而且不会脱离文档流-->
        <div style="border: 1px solid black;width: 300px;height: 300px;">
           <div class="in" style="width: 100px;height:100px;background-color: red;"></div>
           <div class="in" style="width: 100px;height:100px;background-color: yellow;"></div>
           <div class="in" style="width: 100px;height:100px;background-color: green;position:relative;bottom: 20px;left:20px;"></div>   
        </div>
        <!--position:absolute脱离文档流，相对于position为非static的父标记定位-->
        <div style="border: 1px solid black;width: 300px;height: 300px;">
            <div class="in" style="width: 100px;height:100px;background-color: red;"></div>
            <div class="in" style="width: 100px;height:100px;background-color: yellow;"></div>
            <div class="in" style="width: 100px;height:100px;background-color: green;position:absolute;bottom: 20px;left:20px;"></div>   
         </div>
    </body>
</html>

小白在努力！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的position

position:fixed他是相对body来定位的，脱离文档流 position:relative它是相对于自身来变化的，而且不会脱离文档流 position:absolute脱离文档流，相对于position为非static的父标记定位<html> <head> <title></title> </head> <body> <!--position
复制链接

扫一扫