该部分内容 定位父级 　　在理解偏移大小之前，首先要理解offsetParent。人们并没 ...

前面的话 　　CSS有三种基本的布局机制：普通流、浮动和绝对定位。利用定位，可以准确地定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但元素究竟如何定位，定位到什么位置，主要依靠top/right/bottom/left这四个偏移属性。本文就定位中 ...

前言 CSS有三种基本的布局机制：普通流、浮动和绝对定位。利用定位，可以准确地定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但元素究竟如何定位，定位到什么位置，主要依靠top/right/bottom/left这四个偏移属性。本文就定位中的偏移做 ...

CSS中有3种定位机制：普通流，浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。顾名思义，普通流中元素框的位置由HTML元素的位置决定。块级框一个接一个地垂直排列，框之间的垂直距离由框的垂直外边距计算出。在本文中，我们主要讲解3种定位机制之一的绝对定位，这就需要深入了解relative ...

css中优先级无视DOM树中节点的距离远近，就是说DOM树中的距离不会对元素优先级计算产生影响。如果优先级相同，靠后的css会应用到元素上，而html h1靠后，当然是紫色了，如果调换html h1和body h1顺序就是绿色了。 如果是继承关系的话，就和dom树节点的距离远近 ...

前面的话 　　前面已经介绍了定位的偏移和层叠，例子中大量的应用了绝对定位。因为相较于相对定位和固定定位，绝对定位在实际中应用频率更高、应用场景更广泛。本文将介绍使用绝对定位时的具体细节 定义 　　当元素绝对定位时，会从文档流中完全删除。元素位置相对于最近的已定位祖先元素，如果元素 ...

为什么要写这篇文章是因为 上面代码执行结果是这样的。按照我的理解，body在DOM中比html近，应该会按body h1中定义的绿色来显示文字，但是恰恰相反，文字颜色是紫色的。 原因现在我当然是知道的，因为css中优先级无视DOM树中节点的距离远近，就是说DOM树中的距离 ...

深入理解父元素与子元素的width关系 　　对于这一部分内容，如果理解准确，可以更容易控制布局，节省不必要的代码，这里将简单研究。 　 第一部分：父子元素都是内联元素 　　代码演示如下： 　　这时，我们在审查元素时可以发现，span和a的width（和height）的宽度 ...