css - 定位标题元素的最佳方式？

Question

我有一个带有 position:fixed 的 div header ，里面有 Logo 、菜单和搜索选项。Logo在左边，menu在中间，search在右边，logo和menu有相对位置，而search有position:absolute。

现在，问题来了。当我调整浏览器窗口的大小时，搜索 div 与 浏览器窗口 的右上角保持固定距离，然后当我调整它的大小时，它与菜单 div 重叠并将其向下推。

我不确定是什么问题，但我想要以下内容:我希望标题位于顶部，但是当我调整窗口大小时我不想移动搜索和菜单，我只是希望它们不要移动，并且如果在它们上方调整窗口大小，则不应看到它们。

那么最好的方法是什么？保持标题 div 固定，将其他 div 定位为绝对、相对或第三种方式？

jsfiddle

Answer 1

它不是固定的，而是绝对的。 fixed 处理窗口滚动，而不是调整大小。你的 css 如下:

#tr_corner {
    position:absolute;
    top:10px;    
    right:20px;    
}

通过说 right: 20px，您将元素设置为距离它最近定位的祖先的右边界 20px。这将在窗口调整大小时保持不变。如果您不希望它在调整窗口大小时移动，也许您可​​以将它放在左侧而不是右侧。