CSS定位属性详解

11,016 阅读5分钟

最近学习CSS相关知识,定位是其中的一个难点。不了解其中细节,有时候在使用的时候会弄得一团糟。本篇文章整理下关于定位属性的具体理解与应用。

一、简介

1.文档流

在介绍postion之前,有必要先了解下文档流。

简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline),不独占一行。

一般使用margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干;padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“距离”。

只要不是float和绝对定位方式布局的,都在文档流里面。

表现如下:

    <div style="border:1px solid black">div1</div>
    <div style="border:1px solid red">div2</div>
    这是一张图片
    <img src="test.png">

2.position属性介绍

  • static,默认值。位置设置为static的元素,它始终会处于文档流给予的位置。
  • inherit,规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。
  • fixed,生成绝对定位的元素。默认情况下,可定位于相对于浏览器窗口的指定坐标。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否,元素都会留在那个位置。但当祖先元素具有transform属性且不为none时,就会相对于祖先元素指定坐标,而不是浏览器窗口。
  • absolute,生成绝对定位的元素,相对于距该元素最近的已定位的祖先元素进行定位。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
  • relative,生成相对定位的元素,相对于该元素在文档中的初始位置进行定位。通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。

不管是哪种定位,都必须有一个参照物。找对了参照物,就成功了一半。

二、相对定位

relative生成相对定位的元素,相对于其正常位置进行定位。

相对定位完成的过程如下:

  • 按默认方式(static)生成一个元素(并且元素像层一样浮动了起来)。
  • 相对于以前的位置移动,移动的方向和幅度由 left、right、top、bottom 属性确定,偏移前的位置保留不动。

实例

<style type="text/css">
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
    </style>

    <div id="box1"></div>
    <div id="box2"></div>

其中box2中的注释代码未生效前,是按照文档流进行排序呈现。


但是,当注释代码取消注释生效后,就会相对文档流中应当呈现的位置进行移动。

所以,相对定位的参照物是它本身。

三、绝对定位

绝对定位与相对定位的一大不同之处就是,当我们把一个元素设置成绝对定位,那么这个元素将会脱离文档流,其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置,而参照物则需要根据它祖先元素的定位设置来确定。

所谓根据它祖先元素的定位设置来确定简单理解为:相对于该元素最近的已定位的祖先元素,如果没有一个祖先元素设置定位,那么参照物是body层。

实例

以上面的图形来展示绝对定位的特性。可以看出最里层是两个盒子,外面嵌套了两层祖先元素。

1.祖先元素没定位

在祖先元素没定位的情况下,使用absolute。

#box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
            top: 30px;
            left: 30px;
        }


在这种情况下,参考物就是body。

2.祖先元素有定位

祖先元素只要设置了值不为position:static之外的值,都视为有定位,并且最近的祖先元素会被设置为绝对定位元素的参照物。

#orange {
            width: 400px;
            height: 400px;
            background-color: orange;
            position: absolute;


        }
        #box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
            top: 30px;
            left: 220px;
        }


在这种情况下,参考物就是最近的祖先元素。

除了上述两种情况外,在用户没给absolute元素设置left/right、top/bottom的情况下,所对应的参考物会有变化。

3.未设置left/right、top/bottom

在没设置left/right、top/bottom的情况下,absolute元素的位置就是该元素在文档流里的位置

#box1 {
            width: 150px;
            height: 150px;
            margin-left: 20px;
            margin-bottom: 20px;
            background-color: yellow;
            position: absolute;
        }


上图可以看出两个盒子重叠了,这是因为:absolute元素由于没有设置left/right、top/bottom就按照其应该在文档流中出现的位置进行定位,而absolute元素脱离文档流,红色的盒子元素并不知道absolute元素的存在,就继续放置在该位置,并且absolute元素会覆盖正常文档流中的元素。

四、总结

主要介绍了相对定位和绝对定位,其他定位方式比较简单,试一试就知道了。另外,相对定位和绝对定位的应用也比较灵活,适用于多种场景。