在服务器上忽略绝对定位

时间:2016-04-29 08:09:34

标签: html css

我一直试图纠正这个问题一段时间没有结果。页面顶部有一个固定的菜单栏,工作正常。现在尝试放置页面标题"主页"当我直接从我的电脑上打开菜单栏时,菜单栏右上方的绝对定位工作正常,但当我在服务器上打开它时,标题出现在菜单下方和页面左侧。

我已经玩过固定和相对定位,当我从我的电脑上启动相对工作时,相对再次工作,但服务器上的结果相同。

我希望我提供了足够的正确代码,但请告诉我。

感谢您的建议和帮助。



.fixed-menu
{
z-index:999;
position: fixed;
height: 10px;
width:inherit;
left:auto;
right:auto;
}

.page-title
{
position:absolute;
top:10;
right:10;
color:#000;
font-weight:600;
}

#cssmenu {
  line-height: 1;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #001a00;
  background: -moz-linear-gradient(top, #00FFFF 0%, #001a00 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00FFFF), color-stop(100%, #001a00));
  background: -webkit-linear-gradient(top, #00FFFF 0%, #001a00 100%);
  background: -o-linear-gradient(top, #00FFFF 0%, #001a00 100%);
  background: -ms-linear-gradient(top, #00FFFF 0%, #001a00 100%);
  background: linear-gradient(to bottom, #00FFFF 0%, #001a00 100%);
  border-bottom: 2px solid #9900FF;
  width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}

<div id="container">

<div class="fixed-menu">
	<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Share with the Group</span></a>
		<ul>
		<li class='last'><a href='internet.html'><span>From the Internet</span></a></li>
		<li class='last'><a href='athome.html'><span>From Your Computer</span></a></li>
		</ul>
   </li>
   <li><a href='hide.html'><span>Hide Group in Timeline</span></a></li>
   <li><a href='nonotices'><span>Turn off Notifications</span></a></li>
   <li><a href='members.html'><span>Add Members</span></a></li>
   <li class='last'><a href='other.html'><span>Other</span></a></li>
</ul>
	</div>
			<div class="page-title">Home Page</div>
</div>

<div class="clear-menu"></div>

	<div id="banner">

		<div class="image"><img src="images/banner.jpg" width="900" height="349" title="Just for Laughs FB Group" border="0" /></div>
		<div class="title"><p>Just for Laughs</p></div>
	</div>
<!-- ********** Banner Table Ends ********** -->
<h1>Future Home of Just for Laughs FB Group</h1>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

正如我在.page-title选择器中看到的那样,您必须使用一个单位来指定topright值,例如:

.page-title
{
  position:absolute;
  top:10px;
  right:10px;
  color:#000;
  font-weight:600;
}

答案 1 :(得分:0)

将px添加到.page-title

的顶部和右侧定义
.page-title
{
position:absolute;
top:10;
right:10;
color:#000;
font-weight:600;
}