html布局中关于相对定位的CSS实例position: relative

最新推荐文章于 2024-10-09 11:16:57 发布

Sin_lion

最新推荐文章于 2024-10-09 11:16:57 发布

阅读量1.4k

点赞数 2

分类专栏：前端那些事文章标签： css html 定位 relative 网页

本文链接：https://blog.csdn.net/qq_18947751/article/details/100161390

版权

本文探讨了CSS中的相对定位`position: relative`，通过实例解析其工作原理和应用。相对定位不会影响标准流中的其他元素，元素会相对于其原始位置偏移指定距离。了解这些理论能帮助开发者更好地掌握网页布局中`position: relative`的使用。

摘要由CSDN通过智能技术生成

position在CSS中是一个相对狭义的概念，真正的实现定位仅仅靠它是无法完成的，翻译为“定位参考”可能更直观点。
有四个常用的参数可以赋给position，分别是static、relative、absolute、fixed，今天主要是研究下相对定位relative。
在这之前先说一下static，静态定位。

position: static;

所有html元素默认的就是 static，所以编写css的时候加上也是没什么变化的。
下面这是只有一个子元素的模型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>position</title>
</head>
<body>
    <style>
        .father{
            background: #96b9a2;
            margin-top: 50px;
            border: red 2px solid;
            padding: 15px;
        }
        .son1{
            background: #eee;
            border: blue 2px dotted;
            pa