关于css定位的一些理解

最新推荐文章于 2024-05-17 08:40:11 发布

陈小星_绛菱纱影

最新推荐文章于 2024-05-17 08:40:11 发布

阅读量315

点赞数

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

本文链接：https://blog.csdn.net/A657997301/article/details/52565313

版权

html/css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>position</title>
    <style type="text/css">
        body{
            font-size:12px;
            margin:0 auto;
        }

        div#demo{
            position:relative;
            border:1px solid #000;
            margin:50px;
            line-height:18px;
            clear:both;
        }

        div#sub{
            position:absolute;
            right:0px;
            top:0px;
        }

        div.relative{
            position:relative;
            left:400px;
            top:-20px;
        }

        div.static,div.fixed,div.absolute,div.relative{
            width:300px;
        }

        div.static{
            background-color:#bbb;
            position:static;
            left:200px;
            top:50px;
        }

        div.fixed{
            background-color:#ffc0cb;
            position:fixed;
            right:0px;
            bottom:0px;
        }

        div.absolute{
            background-color:#b0c4de;
        }

        div.relative{
            background-color:#ffe4e1;
        }
    </style>
    </head>
    <body>
        <div id="demo">
            <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>
            <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>
            <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>
            <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>
        </div>
    </body>
</html>

代码效果图：

解释：

我们定义了一个有边框，行间距为18px，外间距为50px的容器demo，如图黑框就是。

默认情况下position选择的是position:static没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index

声明）

所以左上角我们可以看到static的块，哪怕css写了left:200px;top:50px;也没什么卵用。。直接就是容器里的容器默认该出现在哪

就是在哪。

接着再看右下角fixed的块，由于css写了right:0px;bottom:0px;，这个是相对于浏览器窗口而言的，即它会锁死在你可见范围的某

个位置，不管你怎么上下拉动浏览器还是放大缩小，都能看到右下角的这个东西。看视频时的那些烦人的广告框应该就是这个原

理。

接下来再看中间relative的块，如果这个块是position:static的，毫无疑问会出现在原来static框的正下方。如下图：

而relative是生成相对定位的元素，相对于其正常位置进行定位。即接下来的定位都是相对于上图粉色框（static框的正下方）来

操作的。比如left:400px;就是在原来的位置基础上向右移动400px,top:-20px;就是向上移动20px。正是最开始那幅图的位置。

最后再看看比较棘手的absolute块，虽然是绝对定位，但还是相对于 static 定位以外的第一个父元素进行定位。所以，我们先去

找父元素，发现demo就是了（定义了position:relative;），那么实际上我们是等下的操作将是相对于demo这个框来进行的。因此

right:0px;就是离demo的右边框距离为0，top:0px;就是离demo的上边框距离为0.又因为absolute不再属于文档流，所以这里可以看

到是类似于float那样浮动着的，而且它的位置跟上面所说的fixed差不多，如果你拉动了浏览器导致框变短了，那我不管，框的右

上角还是得有这个absolute框。如下图：

如果再拉近一点，粉色框就会被拉到屏幕外不可见，灰色框也会被蓝色框彻底覆盖。。。。

对了，蓝色出来的底部尾巴和粉色框出来的右边尾巴可以在demo那里定义over-flow:hidden;隐藏起来

abosolute和relative和fixed的区别：

position：abosolute;相对于document显示区左上角位置的，绝对定位是根据父元素（同样设置了position属性的html元素（除了

position:static））的定位，当父级元素设置相对定位或者绝对定位后，那子元素用绝对定位才是相对于父级元素左上角1,1坐标

定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。如果相对于浏览器窗口那么位置变化参照下条fixed，

如果不是，那么参照上面demo框变化时的情况。

position：fixed才是相对于浏览器的绝对定位，就是说不管如何拖动滚动条，该DIV始终位于窗口某个位置，类似漂浮的小广告

position：relative是相对于同级元素定位，即相对于自己的正常位置时的定位。在设置position:relative后你把left、top等属

性设置为0px时的位置就是正常位置。它设置偏移后会空出来一些空白，其余的html元素不会填充这些空白。

陈小星_绛菱纱影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css定位的一些理解

代码： position body{ font-size:12px; margin:0 auto; } div#demo{ position:relative; border:1px solid #000;
复制链接

扫一扫