CSS - 绝对定位

  1. 文档流
  2. 脱离文档流

  • 作者：KK

  • 发表日期：2016.1.27

文档流

在了解绝对定位之前先了解一下文档流

浏览器接收到一串HTML代码后是从上到下按顺序开始解析这些代码的,下面的代码:

<div>div1</div>
<div>div2</div>

这样的话,浏览器是先呈现div1再呈现div2的,这是解析顺序

而还有一个就是文档流,代码的上下关系已经很直观地表明了div1会在div2的前面,所谓前面就是"上面",除非有左浮动或右浮动,比如左浮动,就必然是div1先靠到左边,再让div2靠到div1的右边。右浮动就正好相反

这个就是一个先后顺序流了

脱离文档流

如果上面说div2按照文档流规则肯定会跟在div1后面的话,接下来我们使用绝对定位方法可以使div2不必跟在div1后面,反而能飘在前面或者任何一个你想要的角落,这种就是脱离了文档流的效果

绝对定位其实是定位方式的一种,定位方式的属性名称叫position,我们先试一下效果:

<body>
<div style="width:400px; height:300px; background:red; margin-top:200px;">div1</div>
<div style="width:400px; height:100px; background:yellow; position:absolute; left:10px; top:20px;">div2</div>
</body>

看到了吧,本来div1距离顶部200像素开始显示,再是div2跟在它后面的.可是div2加了个position:absolute的样式就让它脱离的文档流不再乖乖地跟在div1的后面了.

那跟在哪里的后面呢?由left和top属性控制了,这两个属性分别定义了元素距离屏幕左边多少个像素,距离屏幕顶部多少个像素.还有right和bottom属性也可以

你以后用到时可以上网搜索下这个属性的详细用法来满足你的需求,一般比较典型的应用场景就是广告位漂浮,让一个广告绝对地钉在某个位置,就需要用到这个绝对定位