css的几种定位方式

最新推荐文章于 2024-04-12 05:28:38 发布

枕頭說他不想醒

最新推荐文章于 2024-04-12 05:28:38 发布

阅读量464

点赞数 5

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

本文链接：https://blog.csdn.net/weixin_52984349/article/details/125937400

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、static（静态定位）：

默认值。没有定位，当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

代码演示：

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 500px;
            height: 200px;
            border: 5px solid black;
        }
        div.static {
            width: 130px;
            height: 50px;
            background-color: pink;
            line-height: 50px;
            text-align: center;
            position: static;  //开启静态定位
            top: 50px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">postiont: static;</div>
    </div>
</body>
</html>

图片展示：

2、relative（相对定位）：

定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。相对定位就是元素相对于自己默认的位置来进行位置上的调整，可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

代码演示：

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 500px;
            height: 400px;
            border: 1px solid black;
        }
        div.static {
            width: 140px;
            height: 70px;
            background-color: pink;
            line-height: 70px;
            text-align: center;
            position: relative;   //开启相对定位
            top: 35px;
            left: 20px;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: rgb(158, 29, 29);
            margin: 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: relative;</div>
        <p></p>
    </div>
</body>
</html>

图片展示：

可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移。

3、absolute（绝对定位）：

默认情况下依赖浏览器的左上角为定位基准;如果绝对定位的元素存在父、祖先元素且存在相对定位的时候该元素将依赖具备相对定位的元素来进行定位，而不是左上角。这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；

代码演示：

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        div.static {
            width: 150px;
            height: 50px;
            background-color: #e91694;
            line-height: 50px;
            text-align: center;
            position: absolute;    //开启绝对定位
            bottom: 10px;
            right: 5px;
        }
        p {
            width: 150px;
            height: 150px;
            background-color: rgb(231, 43, 43);
            margin: 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: absolute;</div>
        <p>枕头说他不想醒</p>
    </div>
</body>
</html>

图片展示：

4、fixed（固定定位）：

生成绝对定位的元素，相对于浏览器窗口进行定位。只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样。例如京东购物网站旁边的返回顶部按钮一样。

代码演示：

<!DOCTYPE html>
<html>
<head>
    <style>
        .fixed{
            height: 500px;
            width: 300px;
            
        }
        p {
            width: 150px;
            height: 50px;
            background-color:pink;
            line-height: 50px;
            position: fixed;      //开启固定定位
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p class="fixed">position: fixed;</p>
    </div>
</body>
</html>

图片展示：

5、sticky（粘性定位）：

粘性定位是static（没有定位）和固定定位fixed 的结合；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置，在昨天的博客当中，也有具体的案例显示，有兴趣的小伙伴可以去看一看哦

链接在此：

https://blog.csdn.net/weixin_52984349/article/details/125919144?spm=1001.2014.3001.5501