css中绝对定位和固定定位的区别

最新推荐文章于 2023-10-21 09:42:12 发布

I am the sun?

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量306

点赞数

分类专栏： CSS 文章标签：定位 css html

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

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

首先我们制作两个标准块级元素，代码如下：

<!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>
        div {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div></div>
    <p>为中华之崛起而读书！！！</p>
</body>
</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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
</body>
</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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
</body>
</html>

在这里插入图片描述
运行结果如下：

咦，难道浮动的元素不会压住标准流盒子吗？

如上图，浮动的盒子是会压住标准流盒子的，但是不会压住标准流的文字（图片）o ~
我在复制多一些文字，效果更明显，你们看：
代码如下：

<!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>
        div {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
    <p>为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！为中华之崛起而读书！！！</p>
</body>
</html>

运行效果如下：
在这里插入图片描述
是不是很神奇，浮动为什么不会压住文字呢，其实浮动存在的最初是为了做文字环绕效果的，让文字围绕浮动元素！

I am the sun?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中绝对定位和固定定位的区别

首先我们制作两个标准块级元素，代码如下：<!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>
复制链接

扫一扫