CSS定位知识整理

最新推荐文章于 2024-07-12 20:49:16 发布

置顶 monkeyfly007

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量339

点赞数 1

分类专栏： css 文章标签： css 相对定位-绝对定位

本文链接：https://blog.csdn.net/tel13259437538/article/details/78955611

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

CSS定位知识梳理图

注：

因图片较长，无法以原始比例查看。（可保存到本地查看）
【手机端】可能无法正常观看，目前还没有找到解决方法。
【PC端】建议右击鼠标选择“在新标签页中打开”，然后按ctrl + +（加号键）放大至合适的大小进行图片预览。
恢复页面的初始缩放比例的快捷键为Ctrl+0。

CSS定位

相对定位与绝对定位的区别：（见上图）

relative

相对定位，标准文档流，可定义偏移属性。（top、bottom、left、right）。
给一个元素设置相对定位时，它依然在原位保持不动（依然占据空间，其他元素不会顶上去）。
设置偏移属性时是相对于自身的原始位置进行移动。无论是否偏移，原来的位置空间仍然保留。

absolute

绝对定位，脱离标准文档流（此时元素不占据空间），可定义偏移属性。参照物是距离自身最近的已设置定位的祖先元素。如果没有定位的祖先元素，可一直回溯到body。
当一个元素设置了相对定位后，原来的位置就不复存在了（此时还没有设置偏移属性，相当于它在最上面飘着，并且会覆盖它下面的元素）。
处于标准文档流的元素就自动认为这个元素已经不存在了，位于它后面的元素就直接顶上去占据了它的原始位置。
设置偏移属性时，是相对于距离自身最近的并且已经设置了定位的祖先元素来进行定位的。

认真看完下面的代码和效果演示图就明白了，理解了才能真正的记住。此外，必须自己动手实践一下。在自己理解的基础上，自己做一个小的demo去完成自己所认为的相对定位和绝对定位的区别，也许做的过程中还会发现一些新的问题呢。最好看完后自己总结一下，否则多看无益！到头来还是不会。

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
        .div1{
            width: 500px;
            height: 300px;
            background-color: red;
        }
        .div2{
            position: relative;
            width: 300px;
            height: 150px;
            background-color: #10D610;
            top:-150px;
        }
        .div3{
            width: 300px;
            height: 100px;
            background-color: #999;
        }
        .div8{
            width:600px;
            height:400px;
            border:1px dashed #f40;
            position: relative;
            font-weight: 700;
        }
        .div4{
            width: 300px;
            height: 150px;
            background-color:gold;
            position: absolute;
            font-weight: normal;
        }
        .div5{
            width: 400px;
            height: 150px;
            background-color: skyblue;
            text-align: right;
            font-weight: normal;
        }
        .div6{
            width: 200px;
            height: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: orange;
            font-weight: normal;
        }
        .div7{
            width: 200px;
            height: 100px;
            background-color: #f40;
            font-weight: normal;
        }
        p{
            width:730px;
            line-height: 1.5;
            background-color:pink;
            text-indent: 2em;
        }
        span{
            color:red;
            font-weight:700;
        }
    </style>
</head>
<body>
    <p>设置相对定位时，并未脱离标准文档流，原始位置依然会被保留。设置偏移属性时是相对于自身的原始位置进行移动。</p>
    <div class="div1">div1【标准文档流】</div>
    <div class="div2">div2设置相对定位【未脱离标准文档流】原始位置被保留，没人敢占用。（此处设置了top=-height的偏移属性;）</div>
    <div class="div3">div3【标准文档流】</div>
    <p>绝对定位是相对于 <span>距离自身最近的</span> 并且 <span>已经设置了定位的祖先元素</span> 进行定位的。此处即相对于父元素div8进行定位。</p>
    <div class="div8">我是div8，是div4、5、6、7的父级元素。【标准文档流】
        <div class="div4">div4设置绝对定位【脱离标准文档流】，原始位置不被保留，被div5占用了。 &nbsp;（此处未设置偏移属性）</div>
        <div class="div5">div5被覆盖</div>
        <div class="div6">我是div6，绝对定位并设置了bottom:0;和right:0;</div>
        <div class="div7">我是div7【标准文档流】,占据了div6的位置</div>
    </div>
</body>
</html>

效果图如下所示：
这里写图片描述

monkeyfly007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS定位知识整理

CSS定位知识梳理图相对定位与绝对定位的区别：（见上图）认真看完下面的代码和效果演示图就明白了，理解了才能真正的记住。此外，必须自己动手实践一下。在自己理解的基础上，自己做一个小的demo去完成自己所认为的相对定位和绝对定位的区别，也许做的过程中还会发现一些新的问题呢。最好看完后自己总结一下，否则多看无益！到头来还是不会。代码如下所示：<!DOCTYPE html><html lang="en"
复制链接

扫一扫