CSS定位介绍

最新推荐文章于 2024-10-14 09:20:17 发布

绘梨衣的Sakura

最新推荐文章于 2024-10-14 09:20:17 发布

阅读量179

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Azhongpu/article/details/109901177

版权

CSS定位

css定位分为四种不同的类型：static（静态定位）， relative（相对定位），absolute（绝对定位），fixed（固定定位）。

1、static（静态定位）

static（静态定位）：一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2、relative（相对定位）

relative（相对定位）：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级

<!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>
        .box-wrap{
           width: 300px;
           height: 300px;
           border: 5px solid;
           position: relative;
           top: 50px;
           left: 50px; 
        }
    </style>
        
</head>
<body>
    <div class="box-wrap">
        
    </div>
</body>
</html>

没定位前
在这里插入图片描述
定位后

3、absolute（绝对定位）

absolute（绝对定位）：绝对定位将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。

<!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>
        .box-wrap{
           width: 300px;
           height: 300px;
           border: 5px solid;
           position: relative;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: green;
            position: absolute;
            right: 0;
            bottom: 10px;
        }
    </style>
        
</head>
<body>
    <div class="box-wrap">
        <div class="box"></div>
    </div>
</body>
</html>

没定位前
在这里插入图片描述
定位后

4、 fixed（固定定位）

fixed（固定定位）：固定定位直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

<!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>
        body{
            height: 5000px;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: green;
            position:fixed;
            right:10px;
            bottom:600px;
        }
    </style>
        
</head>
<body>
        <div class="box"></div>
</body>
</html>