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”来比较不同浏览器上的页面呈现。它们总是在元素的位置上存在差异。

要将绝对位置应用于元素，其父级需要在列表中将属性位置设置为 relative 。鉴于对于 2 spans ，他们的父母相当浮动，如何应用绝对定位？

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

感谢您的帮助。

Answer 1

父母是否漂浮与其子女的绝对定位无关。如果对这些子跨度应用绝对定位，请假设以下内容：

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

他们将相对定位到具有相对定位的下一个父级。如果父母没有相对定位，它将相对于身体定位。

绝对定位的作用是将元素置于特定的X和Y坐标（相对于最近的父级，位置为：relative）。这些“绝对”元素将保持其定位，无论其他兄弟元素（浮动，块，内联或其他）在这些“绝对”元素之前或之后。绝对定位的另一个副作用是父元素的高度不受那些“绝对”元素的高度或位置的影响，因此如果这些元素是该#membership div的唯一子元素，则它必须具有声明的高度和宽度，以占用您的布局中的真实空间。

Answer 2

CSS position: relative;和float: ___;不会发生冲突。要在span内绝对定位两个#membership（给定范围包含ID s span1和span2）：

#membership {
   float:right;
   text-align:right;
   position: relative;
}
#span1 {
   position: absolute;
   top: 0; // your absolute position
   left: 0;
}
#span2 {
   position: absolute;
   bottom: 0; // your absolute position
   right: 0;
}

请参阅jsFiddle。

当它的壁橱祖先是一个浮动元素时，如何使用绝对元素？

2 个答案: