CSS div位置问题答案

【问题标题】：CSS div problems with positionCSS div位置问题
【发布时间】：2010-10-22 03:13:35
【问题描述】：

我有一个基于 css 的 asp.net 母版页。我正在使用位于导航 div 正上方的浏览 div。浏览 div 在导航 div 后面向下流动。我对该位置进行了一些尝试，发现如果我更改导航位置，它会修复它，但是该 div 中的所有内容都会在页面的一半处移动。我做了一些谷歌搜索，但找不到任何关于如何强制 div 始终位于顶部的信息。如果您需要更多信息，我可以提供。

我在下面粘贴了部分 CSS 代码：

#header2 {
height: 2.5em;
border-bottom: 1px dashed #0055a5;
color: #FFF;
background-color: white;
}

#header2 .browse {
color: #000000;
background-color: transparent;
float: left;
margin-left: 1em;
margin-top: .1em;
font-weight:bold;
font-style: normal;
font-variant: normal;
font-size: 70%;
line-height: normal;
font-family: Arial, Helvetica, Georgia, "Times New Roman", Times, serif;
width: 144px;
position: fixed;    
}

#navigation 
{
background-color: white;
width: 200px;
height:100%;
top: 105px;
left: 0em;
width: 13em;    
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size:90%;
}

【问题讨论】：

导航落后的部分是一个javascript菜单下拉菜单。
请包含这些标记的简化版本。那里有关于谁嵌套在哪里的重要信息。另外，请提供指向示例页面的链接。谢谢
我无法提供示例页面的链接。这些页面仅适用于 Intranet。感谢您的关心。

标签： asp.net css html master-pages

【解决方案1】：

您所说的顶部是指视口的顶部，还是堆栈的顶部（即 z-index？）。

如果你的意思是视口的顶部，试试 position:fixed;

编辑，再读一遍，我想你的意思是 z-index。将要保持在顶部（浏览？）的元素的位置设置为相对，然后将 z-index 设置为 100 之类的值，即

position:relative;z-index:100;

这应该可以解决问题。

【讨论】：

【解决方案2】：

如果您希望它固定在页面的最顶部，您可以尝试在 .browse 类上设置 top: 0;。还要查看它是垂直居中放置的实际<div> 标签，还是只是它的内容。

我敢打赌，如果你使用 firebug，你会节省一些试验时间 - 如果你还没有它，那就去买吧 =)

【讨论】：