相对定位，绝对定位和固定定位

最新推荐文章于 2023-05-26 23:12:28 发布

Mir ㅤ

最新推荐文章于 2023-05-26 23:12:28 发布

阅读量360

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_45995139/article/details/121909798

版权

1. 相对定位relative：参考自身原本的位置，新位置不占文档流，原来的位置仍然占用文档流

2. 绝对定位absolute: 脱离文档流, 自身变为行内块，其位置参考有相对定位（或固定定位）的父元素（兄弟元素的相对定位不可以）

3. 固定定位fixed: 位置参考浏览器，会变成行内块元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位和绝对定位和固定定位</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            background-color: plum;
        }

        p {
            margin: 30px;
            background-color: lightpink;
        }

        .box3 {
            /* 固定定位会脱离文档流，下面的相对定位会看不到他，会压住固定定位所在的区域 */
            position: fixed;
            background-color: lightgreen;
            /* 可以参考浏览器的边框在页面左下方显示 */
            bottom: 0px;
            left: 0px;

            width: 400px;
            height: 100px;

            z-index: 1;
        }

        .box1 {
            position: relative;
            /* 不会变成行内块元素
            width: 300px;
            height: 100px; */
            background-color: yellowgreen;
            /* 相对自身原本的位置进行定位 */
            right: -90px;
            bottom: -800px;
            z-index: 0;
        }

        .box2 {
            position: absolute;
            background-color: yellow;
            /* 位置会参考相对定位（有多个相对定位的话就参考最近的父元素的相对定位） */
            right: 30px;
            top: 30px;
            /* 变成行内块元素 */
            width: 300px;
            height: 100px;
        }

        .box4 {
            position: relative;

            width: 500px;
            height: 500px;
            bottom: -300px;
            right: -600px;
            background-color: turquoise;
        }
    </style>
</head>

<body>
    <span class="box3">固定定位fixed:位置参考浏览器，会变成行内块元素</span>
    <span class="box1">
        相对定位relative：参考自身原本的位置，原来的位置仍然占用文档流;
        <br>
        对兄弟元素的绝对定位不起作用
    </span>
    <div class="box4">
        相对定位relative：参考自身原本的位置，原来的位置仍然占用文档流
        <span class="box2">
            绝对定位absolute:脱离文档流,自身变为行内块，需要相对定位
        </span>
    </div>

    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>

    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>
    <p>wertyuiosdfghjkxcvb</p>

</body>

</html>

Mir ㅤ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相对定位，绝对定位和固定定位

1. 相对定位relative：参考自身原本的位置，新位置不占文档流，原来的位置仍然占用文档流2. 绝对定位absolute: 脱离文档流,自身变为行内块，其位置参考有相对定位（或固定定位）的父元素（兄弟元素的相对定位不可以）3. 固定定位fixed: 位置参考浏览器，会变成行内块元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta .
复制链接

扫一扫