程序博客网 > 妈妈知道软件下载

关于css定位的一些理解

来源：互联网发布：妈妈知道软件下载编辑：程序博客网时间：2024/06/10 00:16

测试代码：

<!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

妈妈知道软件下载

妈妈知道软件下载

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子二年级加减混合运算500道混合喂养好吗混合动力汽车价格表宝宝混合喂养好吗新生儿混合喂养混合动力车有哪些什么是混合动力汽车易方达中小盘混合交银阿尔法核心混合 007119睿远成长价值混合混同人格混同混响混响英文混响是什么人工混响混响软件混响效果器混响怎么调前级混响调音台混响怎么调混响器和效果器区别调音台上混响是哪个键调音台混响是哪个旋钮混响是什么意思雅马哈调音台混响怎么调混声合唱混声混也是一种生活有声版全混声唱法混声四部合唱怎么唱混声混元超脱箫声横起旗帜颂混声合唱大漠之夜混声合唱混声是什么什么是混声唱法混子的江湖混子混子曰妙木山三混子