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

最新推荐文章于 2024-02-14 11:51:22 发布

VIP文章 Sin_lion

最新推荐文章于 2024-02-14 11:51:22 发布

阅读量1.4k

点赞数 2

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

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

版权

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

最低0.47元/天解锁文章

Sin_lion

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
html布局中关于相对定位的CSS实例position: relative

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

扫一扫