css中定位问题处理

最新推荐文章于 2024-04-28 15:44:40 发布

长安代号007

最新推荐文章于 2024-04-28 15:44:40 发布

阅读量257

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_67656219/article/details/127333589

版权

一个元素在网页上的位置布局，一般来讲常用的有：

1、relative (相对定位)

2、absolute(决定定位)

3、fixed(固定定位)

4、sticky(粘性定位)

一、relative (相对定位)

相对定位：相对于默认位置进行偏移，不脱离标准文档流。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
        .box001{
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
        .box002{
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div class="box001"></div>
<div class="box002"></div>
</body>
</html>

效果图：