Logo在网页中的定位

Question

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

网页是：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

添加浮动：左；对于 #logo 类，它使元素占据其内容的空间而不是页面的整个宽度。

如果你想调试你的CSS我可以推荐使用firefox和最新版本的firebug。您可以在鼠标右键菜单中找到“检查元素”选项，使您能够查看其实际的 css 属性。它还使您能够查看元素的真实宽度、高度、边距和填充。

Answer 2

有几个问题：

1. 您在 #mainwrap 元素上拼错了 position（如“postion”）。这可能就是你不得不做奇怪事情的原因。
2. #logo 的位置当前相对，底部有一个非常大的负值。这不是您想要的

要解决您的问题，请确保满足以下条件：

#mainwrap {
    position: relative;
}

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

一旦外部容器具有相对位置，将 #logo 设置为绝对位置将调整其在该外部容器内的位置（而不是整个页面） 。设置position:absolute还有一个很好的副作用，即减少元素的盒子大小，只占用它需要的内容。正如本杰明指出的，#logo 框跨越了页面的整个宽度，挡住了菜单项。此更改将允许光标再次激活菜单项。