html - 当它的近亲是 float 元素时如何使用绝对元素？

Question

我想在向右浮动的 div 中应用绝对位置。

这是我的 HTML

<div>
   <div id="membership">
       <span><a href="#">Login</a></span>
       <span><a href="#">Join Us</a></span>
   </div>
</div>

这是我的 CSS

#membership
{
  float:right;
  text-align:right;
}

我正在使用“SUPERPREVIEW”来比较页面在不同浏览器上的呈现。它们始终是元素位置上的差异。

要将绝对位置应用于元素，其父元素需要在列表中将属性位置设置为相对。考虑到对于那些 2 个跨度，它们的父级相当 float ，如何应用绝对 定位？

例如，在 IE6、IE7、IE8 中，有一个额外的像素被添加到 FF3.6.1.6 和 IE9 的这两个跨度之上。

感谢您的帮助。

Answer 1

父元素是否 float 与其子元素的绝对定位无关。如果您将绝对定位应用到这些子跨度，假设如下:

#membership span {position: absolute; top: 0; left: 0}

它们将相对于具有相对定位的下一个父级相对定位。如果没有 parent 有相对定位，它将相对于 body 定位。

绝对定位的作用是将元素放置在特定的 X 和 Y 坐标(相对于具有位置的最近父级:相对)。这些“绝对”元素将保持其定位，而不管这些“绝对”元素之前或之后的其他兄弟元素( float 、 block 、内联或其他)。绝对定位的另一个副作用是父元素的高度将不受那些“绝对”元素的高度或位置的影响，因此如果这些元素是该#membership div 的唯一子元素，则它必须具有声明的高度和宽度，以便在您的布局中占用实际空间。