Question

我这里有一个jsfiddle： http://jsfiddle.net/asaakius/5nGYS/7/

你会注意到这个带有字母“v”的小div $(#menu)，如果我删除这个div，textarea和textbox会根据需要对齐，并且调整大小时两个div的位置完全在 - 同步。

但是当我添加$(#menu) div时，它会搞砸。我只是希望小菜单div位于$(#textarea)的右上角，而不会打扰其中的文本，并且不会干扰$(#textarea)和$(#textbox)的对齐。我的意思是，我希望它在文本上方可见，就像它有一个更高的z-index（它是一个小菜单的开头）。

修改

我刚才意识到如果我保持菜单的位置：绝对，它会留在容器中。但是如何保持正确的一面呢？我希望它始终位于右上角，无论调整大小。

Answer 1

将#menu的样式更改为：

#menu{ right: 0; color:red; position:absolute; }

Float:right导致下一个div围绕它流动，position:absolute;导致它完全从流中取出。

Answer 2

您不能将div的位置与相对位置重叠以具有更高的z-index。您必须在菜单div上使用position：absolute。并使正确：0;坚持到右边。（可选）将更高的z-index应用于菜单div。参见示例：http://jsfiddle.net/5nGYS/10/

Answer 3

对于记录，如果您修改布局，则可以position使用relative。

<div id="textbox" class="textbox" style="top: 10px; left: 10px;">
  <span id='menu'>v</span>
  <span Hello there
</div>

使用归零border和padding。

#menu {
  ...
  padding: 0;
  border: 0;
}

编辑在另一个可调整大小的div中放置一个小div而不会打扰容器的内容

修改

3 个答案: