Logo在网页中的定位

Question

我已经将这个标志定位在我的网页设计的左上角，页面的其余部分是在表格的帮助下设计的，并且由于这种样式的标志放置在表格格式中是不可能的，我已经制作了2个div的一个包装整个布局和另一个徽标。包装div是相对的，标志div相对，并以某种方式放置的标志，我希望你在页面中看到。但问题是，一旦徽标定位在导航栏上方，导航栏链接就不能正常工作了。
第二个问题是，在为它提供top和left属性之前，在它所在的位置留下空白!如果我的方式定位的标志是错误的!或者，如果有其他选择，请建议…提前感谢!!干杯!

网页是:http://www.aravind123.0fees.net/products.html

css:

    #mainwrap{
postion:absolute;
width:1000px;
margin: 0 au``to;
margin-top:0px:
vertical-align:top;
z-index:99;
}
body {
background-image: url(Images/bg.jpg);
background-repeat:repeat-y;
top: auto;
}
.text1 {
font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text2{
font-family:"Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size:12px;
color:#333;
text-decoration:none;
text-align:center;
}
p{
font-family:"Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size:12px;
color:#333;
text-decoration:none;
text-align:center;
}
#logo{
position:relative;
bottom:-90px;
left:-50px;
z-index:50;
}
a:hover{
color: #000;
}
.logo{
border:none;
}
.offer{
font-size:28px;
vertical-align:middle;
}
.text11 {   font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text111 {font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}
.text1111 {font-family: "Copperplate Gothic Bold";
src: url('Copperplate-Gothic-Bold-Regular.ttf');
font-size: 14px;
color: #FFF;
text-decoration: none;
}

Answer 1

add float:left;对于#logo类，它使元素占用其内容的空间，而不是整个页面的宽度。

如果你想调试你的css，我建议你使用firefox和最新版本的firebug。在鼠标右键菜单中有一个"inspect element"选项，可以让你看到它的实际css属性。它还允许您查看元素的实际宽度，高度，边距和填充。

Answer 2

几个问题:

1. 您在#mainwrap元素上拼错了position(作为"position")。这可能就是为什么你不得不做一些奇怪的事情。
2. 目前#logo的位置是relative，底部有很大的负值。这不是你想要的

要解决您的问题，请确保您有以下内容:

#mainwrap {
    position: relative;
}
#logo {
    position: absolute;
    top: -20px;
    left: -50px;
}

一旦外部容器有了相对位置，将#logo设置为绝对位置将会调整它在外部容器中的位置(而不是整个页面)。设置位置:absolute也有一个很好的副作用，可以减少元素的框大小，只占用它需要的部分。正如Benjamin所指出的，#logo框占据了整个页面的宽度，挡住了菜单项。此更改将允许光标再次激活菜单项。