CSS 之 position定位

最新推荐文章于 2023-11-27 14:47:36 发布

ShaoWeiY

最新推荐文章于 2023-11-27 14:47:36 发布

阅读量130

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/ShaoWeiY/article/details/105280868

版权

定位属性

1.static：静态定位（默认定位方式）
2.relative：相对定位，相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。如下所示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: gray;
            position: relative;
            left: 200px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在这里插入图片描述
由此可见，灰色相对定位，原来所占空间仍然保留着

3.absolute：绝对定位，元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中另一个元素或者是视窗本身（当子元素为absolute且祖先元素有定位时，其包含块是祖先元素）
如下所示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
            left: 100px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: gray;
            position: absolute;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>
</html>

在这里插入图片描述
上图所示灰色是绝对定位，红色是相对定位子绝父相，包含块为红色，即灰色是相对红色定位

4.fixed：固定定位，类似于absolute，不过其位置相对于视图本身如图所示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.box1{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    background-color: red;*/
        /*    position:fixed;*/
        /*    right: 0;*/
        /*    bottom: 0;*/
        /*}*/
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            position:absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
    <div class="box2"></div>
<!--    <div class="box1"></div>-->
</body>
</html>

如下，fixed和absolute的区别是

fixed定位是固定的，如图，当内容很多要滚轮下滑时，元素位置始终在右下角
在这里插入图片描述
而absolute当内容较多有滚轮时，元素是在一开始视图的右下角，滚轮往下滑时，元素并不会一直处于右下方

ShaoWeiY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 之 position定位

定位属性1.static：静态定位（默认定位方式）2.relative：相对定位，相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。如下所示：<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> ...
复制链接

扫一扫