CSS绝对位置

Question

全晚，

有一个问题是，在我的语境中使用绝对定位是否会被CSS神认为是错误的。基本上我正在做的是用它来为我网站的标题栏定位图像。

我们可以使用SO作为一个很好的例子。因此，页面顶部的主要徽标是StackOverFlow，后跟菜单。在右侧我们有Ask Question。现在假装我这两个元素都是图片。是否有理由认为绝对定位那些以便我们不必与任何其他CSS div定位斗争？

干杯，

麦克

Answer 1

根据我的经验，你通常会发现自己对浮动的绝对定位感到失望，这意味着你会发现一些令人讨厌的角落案例会使整个练习成为一种拉头发的体验。

一个例外是相对+绝对定位。如果使用得当，那将非常有用。

但要在SO网站上做一个标题，我可能会使用浮动。

<div id="header">
  <img id="left" src="image1.png">
  <img id="right" src="image2.png">
</div>

使用：

#header { overflow: hidden; }
#left { float: left; }
#right { float: right; }

大多数时候，这个问题已经解决了。

可能只有其中一个需要浮动。如果它是左边的那个：

<div id="header">
  <img id="left" src="image1.png">
  <div id="right">Some more content</div>
</div>

使用：

#header { overflow: hidden; }
#left { float: left; width: 150px; }
#right { margin-left: 150px; }

Answer 2

我猜你只需要绝对定位你讨论的两个项目之一。将徽标保留在正常页面流中，并放置另一个项目。

您还可以在一个项目上使用float:right，但这可能很难在各种浏览器中排除故障。

我与CSS众神没有联系，但我说你的攻击计划听起来像是绝对定位的好用。

请确保这两个元素的包装有position: relative

当两个元素的高度不同时，绝对定位会非常有用

Answer 3

我想说最右边的图片/ div可能最容易float:right

这将让你流畅地转移事物