CSS之定位方式

最新推荐文章于 2024-09-28 15:35:33 发布

迷醉.

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量70

点赞数

分类专栏：前端文章标签： css 定位

本文链接：https://blog.csdn.net/qq_35270769/article/details/116891237

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS的五种定位方式

定位方式：static、relative、absolute、fixed、sticky

static：元素不会以任何特殊的方式定位，始终以页面的正常流进行定位。

<style>
        .static {
            position: static;
            background-color: green;
            width: 200px;
        }
</style>
<body>
    <div class="static">这个盒子的定位方式</div>
</body>

效果图：
在这里插入图片描述

relative: 元素相对于其正常位置进行定位

<style>
        div {
            border: 1px solid green;
        }
        div.static {
            position: relative;
            background-color: red;
            width: 250px;
            left: 50px;
        }
</style>
<body>
    <div>
        <div class="static">这个盒子的定位方式为relative</div>
    </div>
</body>

效果图：
在这里插入图片描述

absolute: 元素相对于最近的定位祖先元素进行定位

<style>
        .relative {
            border: 1px solid green;
            width: 200px;
            height: 100px;
        }
        .absolute {
            border: 1px solid green;
            position: absolute;
            top: 50px;
            left: 20px;
        }
</style>
<body>
   <div class="relative">
       <div class="absolute">这个元素为absolute定位</div>
   </div>
</body>

效果图：
在这里插入图片描述

fixed：元素相对于视口进行定位，即使滚动页面，也始终位于同一位置

<style>
       .fixed {
           border: 1px solid green;
           width: 200px;
           height: 200px;
           position: fixed;
           top: 50px;
           left: 50px;
       }
       .scroll {
           height: 1000px;
       }
</style>
<body>
       <div class="fixed">这个元素为fixed定位</div>
       <div class="scroll"></div>
</body>

效果图：
在这里插入图片描述
注：页面已经拉到最底下了，元素仍然在相对于视口的位置

sticky: 元素根据用户的滚动位置进行定位；根据滚定位置在相对(relative)和固定(fixed)之间切换

<style>
        .sticky {
            border: 1px solid green;
            width: 200px;
            height: 200px;
            position: sticky;
            top: 0px;
        }
        .scroll {
            height: 1000px;
        }
</style>
<body>
    <div>这是顶部的文字</div>
    <div class="sticky">这个元素为sticky定位</div>
<div class="scroll"></div>
</body>