如果您的意思是,您希望侧边栏位于页面的最顶部,从导航栏的上方和右侧开始,就像这样......

...有两种简单的方法,另一种更困难的方法也有其他优势。
1.position: absolute;
这是最简单的方法:
top: 0;
将,添加position: absolute;
到需要位于页面顶部的元素 (#beta),并替换float: right;
为right: 0;
(float: right;
不起作用,position: absolute;
但right: 0;
在这种情况下会产生相同的效果)
- 拥有
position: relative;
一个包含整个页面的元素(在您的网站上,即#container-inner
),并且中间没有元素(因此您需要从中删除它#pagebody
- 尝试过它并且它不会破坏任何东西)。
元素的将基于最近的top: 0;
父元素。position: absolute;
position: relative;
2.margin-top: -XXXpx;
如果由于某种原因您确实需要position: relative;
中间的 div(我看不出原因,但可能会出现一个原因),那么还有另一种不太干净的选择。
导航/标题部分的高度是固定的,因此您知道要向上移动侧边栏多少像素。因此,您可以只为侧边栏 ( #beta
) 提供那么多像素的负上边距(如margin-top: -350px;
)。此计划的唯一问题是,如果您更改页眉的高度,则需要调整顶部边距。
3.内容优先布局
最后,最好(但最简单)的解决方案是编辑HTML 模板并将 #nav 元素在 html 中向下移动,使其位于页面内容下方,如 #beta 侧边栏,然后,在 alpha 上放置一个大的 margin-top,创建一个与标题#nav 部分大小相同的间隙,然后制作#nav 元素和#beta 侧边栏position: absolute;
和top: 0;
(如上检查position: relative;
s),并确保#nav 的大小正好适合填充孔。
通常在 HTML 的主要内容下方有可能的非内容元素会更好——这意味着有屏幕阅读器的人会在下一步去哪里的链接列表之前听到他们想要的有趣内容,并且一些搜索引擎会给予更大的权重到标记中较早的条款(我很确定这仍然是正确的)。
如需更多阅读,这里有一篇关于内容优先布局的简单文章,这里有一个适用于移动和桌面的“响应式”设计的示例。