CSS魔法堂：Absolute Positioning就这个样

前言

当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却发现还有各种神秘的力量左右着它的来去，于是我们意识到自己力量的微弱，开始迷茫不前。
后来有幸拾到各路前辈高人的秘笈，终于打通任督二脉，记录在案以便日后查阅。

以Normal flow为基础

Q:不是说好以左上角为原点(0,0)吗？怎么top:auto;right:auto;bottom:auto;left:auto;时的效果和Normal flow中的是一样的？

<style type="text/css">
  #parent{
    background: blue;
  }
  #sibling{
    text-align: center;
    line-height: 100px;
    margin: 0 20px;
    height: 100px;
    background: red;
  }
  #protagonist{
    text-align: center;
    line-height: 100px;
    width: 200px;
    height: 100px;
    background: yellow;
    position: absolute;
  }
</style>
<div id="parent">
  <div id="sibling">position:static</div>
  <div id="protagonist">position:absolute</div>
</div>


A:那是因为Absolute positioning在初始化状态时(top:auto;right:auto;bottom:auto;left:auto;)，浏览器会生成一个看不见的采用Normal flow定位的虚拟盒子(hypothetical box)，若虚拟盒子对应的盒子没有设置top/right/bottom/left属性值，则该盒子将与虚拟盒子重叠。
因此当我们仅仅设置position:absolute时，呈现出来的效果是跟position:static是无区别的。那这时我们会有两个疑问了，1. 既然top/right/bottom/left等默认值为auto，那实际计算值是多少呢？2. 假如显示设置top/right/bottom/left为特定数值后，那效果又是如何的呢？
若要回答上述问题，则先要理解定位参考系。一说起定位我们必须找到对应的参考系，如相对定位那样望文生义就知道它对应着某个参考系，而绝对定位则隐晦得多，咋看之下会让我们忽视参考系的重要性，然后糊里糊涂地理解和解读它呈现的效果。
绝对定位的参考系就是盒子所在的containing block，下面我们来深入一下吧！

定位参考系——containing block

 不管采用的是Normal flow、Floats还是Absolute
positioning，总之定位的参考系就是一个名为containing block的四方盒子，但不同的position
scheme会对应不同containing block。就Absolute positioning而言，首先会寻找最近的一个position:relative/fixed/absolute的父容器元素，若找到且父容器为block-level element则以父容器的的padding box作为containing block，若父容器为inline-level element则根据父容器的directionCSS属性值决定containing block;若一个都找不到则会以initial containing block作为其的containing block。
更多关于containing block的信息可参考《CSS魔法堂：不得不说的Containing Block》
因此top/right/bottom/left的实际值则是相对于containing block而言，我们可以通过el.offsetLeft/Top来获取top和left的实际值。

绝对定位的奥义——top/right/bottom/left+box model

也许大家都见过以下这种水平垂直居中方式（IE7/6/5.5下均无效）

    <style type="text/css">
      #parent{
        background: blue;
        width: 200px;
        height: 200px;
        position: relative;
      }
      #protagonist{
        background: yellow;
        width: 100px;
        height: 100px;

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    margin: auto;
      }
    </style>
    <div id="parent">
      <div id="protagonist"></div>
    </div>


为啥简单设置top/right/bottom/left:0;margin:auto就轻松搞定这么难搞的水平垂直居中呢？请看下图

当盒子采用绝对定位后，其top/right/bottom/left和box model以占满整个containing
block为目的，除非每个属性均设置的特定数值导致整体宽度或高度均小于containing block的宽度或高度。也就是得到以下两个等式：

  1. 垂直方向：'top' + 'margin-top' + 'border-top-width' + 'padding-top'
    + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom'
    + 'bottom' = height of containing block
  2. 水平方向：'left' + 'margin-left' + 'border-left-width' +
    'padding-left' + 'width' + 'padding-right' + 'border-right-width' +
    'margin-right' + 'right' = width of containing block
    然后一切玄机则蕴藏在auto这个属性值上了。
    其中垂直方向上top/margin-top/height/margin-bottom/bottom可以设置为auto，而水平方向上则是left/margin-left/width/margin-right/right可以设置为auto。

对于non-replaced element的垂直方向等式

margin-top/bottom设置为auto时，实际值自动分配的情况

  1. top/height/bottom均不为auto时，那么margin-top/bottom两者的实际值相等，且足以满足等式1。

margin-top/bottom设置为auto时，实际值为0的情况

  1. top/height/bottom均为auto时，height的值由其子元素决定。top/bottom的值则根据虚拟盒子来决定，最终让定位效果如同采用position:static一般，反正要让等式1成立。
  2. top/bottom均不为auto，而height为auto时，height会自动计算以满足等式1。
  3. 其他情况height由子元素或自身属性值决定，top/bottom由自身属性值或以满足等式1来决定实际值。

注意：top/auto/bottom默认值为auto，而margin-top/bottom默认值为0。

对于non-replaced element的水平方向等式

margin-left/right设置为auto时，实际值自动分配的情况

  1. left/width/right均不为auto时，那么margin-left/right两者的实际值相等，且足以满足等式2。

margin-left/right设置为auto时，实际值为0的情况

  1. left/width/right均为auto时，width的值由其子元素决定。left/right的值则根据direction的值来决定，最终让定位效果如同采用position:static一般反，正要让等式2成立。
  2. left/right均不为auto，而width为auto时，width会自动计算以满足等式2。
  3. 其他情况width由子元素或自身属性值决定，left/right由自身属性值或以满足等式2来决定实际值。

注意：left/width/right默认值为auto，而margin-left/right默认值为0。

对于replaced element

 由于replaced element自身有固有的width/height，因此当设置width:auto;height:auto时，
其实际值就是元素固有的width/height。也就是width/height不存在为满足等式2和1动态扩展/缩小实际值的情况。结果就是除"2.
top/bottom均不为auto，而height为auto时，height会自动计算以满足等式1。"和"2.
left/right均不为auto，而width为auto时，width会自动计算以满足等式2。"两条不满足外，其他情况均一致。

注意,IE5.5/6/7下会有以下例外：

  1. left/margin-left/margin-right/right均不为auto而width为auto时，IE5.5下width的实际值将由子元素决定;
  2. top/margin-top/margin-bottom/bottom均不为auto而height为auto时，IE5.5下height的实际值将由子元素决定;
  3. left/width/right均不为auto，而margin-left/right为auto时，IE5.5/6/7下margin-left/right的实际值为0;
  4. top/height/bottom均不为auto，而margin-top/bottom为auto时，IE5.5/6/7下margin-top/bottom的实际值为0.

Fixed positioning——Absolute positioning的子类

 对于position:fixed其实也属于Absolute positioning，但它参考系永远是由Viewport所产生的containing block而已，其他均与上述内容一致。
注意：由Viewport所产生的containing block与initail containing block是不同的详情请参考《CSS魔法堂：不得不说的Containing Block》

<style type="text/css">
  body{
    background: blue;
  }
  #protagonist{
    background: yellow;
    width: 100px;
    height: 100px;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
   }
</style>
<div id="protagonist">fsjohnhuang</div>


注意：IE6不支持position:fixed

总结

若有纰漏，望各位指正，谢谢！

时间： 2024-09-04 02:59:26

CSS魔法堂：Absolute Positioning就这个样的相关文章

CSS魔法堂：不得不说的Containing Block

前言  <CSS魔法堂:重新认识Box Model.IFC.BFC和Collapsing margins>中提到在没有floated兄弟盒子时,line box的左右边框会与所属的containing block的左右content edge相接触.那到底什么是containing block(abbr. CB)呢? containing block在CSS的visual formatting model中十分重要的理论基础,因为盒子的宽/高度自动值/相对值的计算,相对/浮动/绝对定位,均依赖

CSS魔法堂：深入理解line-height和vertical-align

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊......于是通过本篇来一探究竟:) line-height到底有多height? 行距.行间距傻傻分不清  首先看看"有道词典"的解析! Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本

CSS魔法堂：hasLayout原来是这样!

前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context).也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高),要么由其containing block来组织和尺寸计算.而IFC(即没有拥有布局)而言,

CSS魔法堂：你真的懂text-align吗？

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The 'text-align' CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control

CSS魔法堂：&quot;那不是bug，是你不懂我!&quot; by inline-block

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发现盒子间无端端多了个不可选的空白符,于是想尽办法修复这个bug. 直到一天拜读了@一丝姐.@HAX等高人的秘笈后才顿悟,原来我错了.那不是bug,是我不懂而已. 先行者--IE5.5中的inline-block  当我们为支持IE5.5/6/7而添加这段hack时*display:inline;*z

CSS魔法堂：小结一下Box Model与Positioning Scheme

Positioning Scheme的优先级  简单粗暴上规则:) Normal flow作为默认的定位模式其优先级自然是最低的; Absolute positioning相比Float,与Normal flow关联性更弱,优先级最高; 优先级从低到高: Normal flow < Float < Absolute positioning Box Model与Positioning Scheme的关系  之前我总觉得Box Model是一个随定位模式变化的结构,但其实我是被一些表象给蒙蔽了而已

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习的记录. 何为盒子模型?     盒子模型到底何方神圣居然可以作为CSS的基础?闻名不如见面,上图了喂!   再来张切面图吧!   下面我们以 <div></div> 为栗子. <div></div> 标签被浏览器解析后会生成div元素并添加到documen

CSS魔法堂：你真的理解z-index吗？

一.前言   假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了.但要将多个弹窗间层叠关系给处理好,那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了.本文作为对W3C Recommendation-Layered presentation学习后整理的笔记,以便日后查阅.   由于将英文名词翻译为中文名词容易产生歧义(如Normal flow被翻译为文档流),因此本文将直接采用原英文名词,而涉及到的英文名词解释如下:   non-positioned

CSS魔法堂：Position定位详解

一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top.right和bottom的CSS规则来改变元素的位置.        注意点:[a]. 元素原来位置将保留,不被其他元素所占据;                      [b]. 当使用left,top改变元素位置时,元素将以原来位置的border外边框的左上角作为参考点 ;