css中的绝对定位

最新推荐文章于 2024-08-11 10:27:53 发布

I am the sun?

最新推荐文章于 2024-08-11 10:27:53 发布

阅读量5.9k

点赞数 6

分类专栏： CSS 文章标签： CSS 绝对定位父元素浏览器定位祖先元素

本文链接：https://blog.csdn.net/fighting_dream/article/details/113095441

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

今天来讲css中绝对定位：
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
{position:absolute;}

1. 情况一：没有父盒子，即父盒子就是浏览器
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="absolute.css">
</head>
<body>
    <!-- 情况一：没有父盒子，即父盒子就是浏览器 -->
    <div class="alone"></div>
</body>
</html>

css(absolute.css)代码如下：

/* 清除浏览器的内外边距 */
* {
    margin: 0;
    padding: 0;
}
/* <!-- 情况一：没有父盒子，即父盒子就是浏览器 --> */
.alone {
    width: 300px;
    height: 300px;
    background-color: blueviolet;
    /* 绝对定位：距离顶部0px，距离右边0px */
    position: absolute;
    top: 0px;
    right: 0px;
    }

运行结果如下：
在这里插入图片描述
2. 情况二:有父盒子但是父盒子没有定位
html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="absolute.css">
</head>
<body>
    <!-- 情况二:有父盒子但是父盒子没有定位 -->
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

css（absolute.css）代码如下：

/* 清除浏览器的内外边距 */
* {
    margin: 0;
    padding: 0;
}
/* 情况二：有父盒子但是父盒子没有定位 */
.father {
    width: 300px;
    height: 300px;
    background-color: darkturquoise;
}
.son {
    width: 20px;
    height: 20px;
    background-color: blueviolet;
    /* 绝对定位，距离上30px，距离右50px */
    position: absolute;
    top: 30px;
    right: 50px;
}

在这里插入图片描述
3.情况三：有父盒子并且父盒子有定位（无论是相对定位还是绝对定位还是固定定位）
html代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="absolute.css">
</head>

<body>
    <!-- 情况三：有父盒子并且父盒子有定位（无论是相对定位还是绝对定位还是固定定位） -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

css（absolute.css）代码如下：

/* 清除浏览器的内外边距 */
* {
    margin: 0;
    padding: 0;
}

/* <!-- 情况三：有父盒子并且父盒子有定位（无论是相对定位还是绝对定位还是固定定位） --> */
.father {
    width: 300px;
    height: 300px;
    margin: 100px;
    /* 父级盒子有了绝对定位咯 */
    position: absolute;
    background-color: brown;
}
.son {
    width: 30px;
    height: 30px;
    /* 绝对定位：距离左边50px，距离下边50px */
    position: absolute;
    left: 50px;
    bottom: 50px;
    background-color: chartreuse;
}

运行结果如下：
在这里插入图片描述
4.情况四：有父盒子但是父盒子没有定位而爷爷盒子有定位，则在爷爷盒子的范围内定位
html代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="absolute.css">
</head>

<body>
     <!-- 情况四：有父盒子但是父盒子没有定位而爷爷盒子有定位，则在爷爷盒子的范围内定位 -->
     <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

</html>

css（absolute.css）代码如下：

/* 清除浏览器的内外边距 */
* {
    margin: 0;
    padding: 0;
}
.grandfather {
    width: 800px;
    height: 800px;
    /* 爷爷有定位 */
    position: absolute;
    background-color: darkturquoise;
}
/* 爸爸无定位 */
.father {
    width: 400px;
    height: 400px;
    background-color: deeppink;
}
/* 那此时孙子就向爷爷看齐 */
.son {
    width: 200px;
    height: 200px;
    background-color: dimgrey;
    position: absolute;
    top: 500px;
    left: 500px;
}