css四种定位方式介绍

最新推荐文章于 2024-09-03 08:51:36 发布

裤兜丶

最新推荐文章于 2024-09-03 08:51:36 发布

阅读量92

点赞数

文章标签： css 定位

本文链接：https://blog.csdn.net/qq_44239383/article/details/102989063

版权

position属性

属性值

static 静态定位
默认值，是文档流的一部分，不会动。
relative 相对定位
相对于自身原本的位置进行移动，不会脱离文档流，保留原位置空间
absolute 绝对定位
相对于外部父元素以及祖级元素中，第一个非static定位的元素进行定位，如果都是，就相对于html页进行定位，会脱离文档流，不保留原位置
fixed 固定定位
相对于根元素，页就是html页进行定位，会脱离文档流，所以，就是文档过长，需要向下滚动，它还是相对html页在一个固定的地方

示例：
html页：

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>

css页：

div{
    width: 200px;
    height: 200px;
}
.red{
   background-color: red; 
}
.green{
    background-color: green;
}
.blue{
    background-color: blue;
}

运行图：
在这里插入图片描述
对第绿色块进行相对定位
css的改变

.green{
    background-color: green;
    position: relative;
    top:100px;
    left:100px;
}

运行图：
在这里插入图片描述
对绿色块进行绝对定位
css代码的改变：

.green{
    background-color: green;
    position: absolute;
    top:100px;
    left:100px;
}

运行图：
在这里插入图片描述
对绿色块进行固定定位
html页的改变：

	<div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <!-- 100行p标签 -->
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>

css页：

.green{
    background-color: green;
    position: fixed;
    top:100px;
    left:100px;
}

运行图：
在这里插入图片描述

裤兜丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css四种定位方式介绍

position属性属性值static 静态定位默认值，是文档流的一部分，不会动。relative 相对定位相对于自身原本的位置进行移动，不会脱离文档流，保留原位置空间absolute 绝对定位相对于外部父元素以及祖级元素中，第一个非static定位的元素进行定位，如果都是，就相对于html页进行定位，会脱离文档流，不保留原位置fixed 固定定位相对于根元素，页...
复制链接

扫一扫