定位

最新推荐文章于 2024-09-26 14:56:13 发布

hello_xujj

最新推荐文章于 2024-09-26 14:56:13 发布

阅读量130

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/xjj19999272/article/details/116793295

版权

CSS 专栏收录该内容

18 篇文章

订阅专栏

定位

相对定位

相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位。

left 向右移动；right向左移动；top 向下移动；bottom 向上移动，值可以为负数，即往规定方向相反移动。

相对定位的性质

相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 40px auto;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <h3>我是三级标题</h3>
        <ul>
            <li>列表</li>
            <li>列表</li>
            <li>列表</li>
        </ul>
    </div>
</body>
</html>

网页效果如下：
在这里插入图片描述

可以看到相对原来的位置向下向右移动了100px。

相对定位的用途

相对定位用来微调元素位置

相对定位的元素，可以当做绝对定位的参考盒子。

绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。left 到左边的距离；right到右边的距离；top到上边的距离； bottom到下边的距离，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            bottom: 300px;
            right: 200px;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>