CSS div 位置问题
我有一个基于 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%;
}
I have a css based asp.net masterpage. I am using a browse div located directly above a navigation div. The browse div is flowing down behind the navigation div. I did some playing around with the position and found that if i change the navigation position it fixes it, but everything in that div moves half way down the page. I have done some googleing and cant find anything about how to force a div to always be on top. If you need more info I can provide it.
I have pasted select parts of the css code below:
#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%;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
所谓顶部,是指视口的顶部,还是堆栈的顶部(即 z-index?)。
如果您指的是视口顶部,请尝试position:fixed;
编辑,再次阅读,我认为你的意思是 z-index。 将要保留在顶部(浏览?)的元素的位置设置为相对位置,然后将 z 索引设置为 100 之类的值,即,
这应该可以解决问题。
By top, do you mean the top of the viewport, or top of the stack (i.e., z-index?).
If you mean top of the viewport, try position:fixed;
Edit, reading again, I think you mean z-index. Set the position of the element you want to keep on top (browse?) to relative, and then set the z-index to something like 100, i.e.,
that should do the trick.
如果您希望它固定在页面的最顶部,您可以尝试在
.browse
类上设置top: 0;
。 另请查看它是否是垂直居中定位的实际标记,或者是否只是其内容。
我敢打赌,如果您使用 firebug,您会节省一些实验时间 -如果你还没有的话就去拿吧 =)
If you want it to stay fixed at the very top of the page, you could try setting
top: 0;
on the.browse
class. Also see if it is the actual<div>
tag that it is positioned vertically centered, or if it's just its contents.I bet you'll save some time experimenting if you use firebug - go get it if you don't have it already =)