关于css定位的一些理解

    xiaoxiao2023-02-02  14

    测试代码:

    <!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元素不会填充这些空白。

    转载请注明原文地址: https://ju.6miu.com/read-1138593.html
    最新回复(0)