Question

当您将鼠标悬停在这些网站上时，此网站上的链接似乎会重叠。 div已被赋予正确的高度但是一旦你将鼠标悬停在链接上，它的高度似乎达到165px

http://www.dawaf.co.uk/animate/

有没有办法将高度设置为93px以停止重叠？

#about {
    position: absolute;
    left: 0;
    top: 0;
    height: 89px;
    width: 336px;
}
span.title-link {
    font-size: 6.8em;
    font-weight: bold;
    font-family: 'Titillium Web', Arial, sans-serif;
    text-decoration: none;
    line-height: 93px;
    cursor: pointer;
    opacity: 0;
}

span.title-link a {
    color: #FFF;
    text-decoration: none;
}

span.title-link a:hover {
    color: #E91F4C;
}

#about-red {
    left: -104px;
    width: 545px;
}

#logo-red {
    height: 93px;
    width: 209px;
    position: absolute;
    left: 336px;
}   

/*Echo
------------------------------------------------------------ */
#gallery {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 434px;
}   

#gallery-echo {
    left: -202px;
    width: 714px;
}

#logo-echo {
    height: 93px;
    width: 280px;
    position: absolute;
    left: 434px;
}   

/*Events
------------------------------------------------------------ */
#contact-events {
    left: -216px;
    width: 862px;
}   

#contact {
    position: absolute;
    left: 0;
    top: 0;
    height: 92px;
    width: 448px;
}   

#logo-events {
    height: 93px;
    width: 414px;
    position: absolute;
    left: 448px;
}

Answer 1

内联元素（如跨度，a链接等）会忽略“height”属性。尝试：

.title-link {
    display: inline-block;
}

Answer 2

如果您绝对定位元素并修复大小，那么您将会遇到更多工作由于您将px与％/ em单位混合，因此问题复杂化。花在调整方法上的时间会更好，而不是解决这个问题。

将绝对定位限制为尽可能少的元素。在这种情况下，您希望将导航项包装在容器中，并绝对定位容器。
不要高高在上;将font-size与line-height:SOME_MULTIPLE(i.e. 1.5)一起使用vertical-align:middle（无论元素是内联/内联块/块，都可以使用。）
尝试概括您的样式并通过类将它们应用于多个元素，而不是通过id设置单个元素的样式。它使您的CSS更容易维护。

给你这些提示但不回答你问题的理由......

您最初可以更轻松地将此网站聚集在一起
您可以减少更改导航项文本或添加新导航项的工作。
我已经看到了这种带有ID的样式，并且使用了固定位置/大小的所有方法。过于冗余和严格而无用。忘记最佳实践;它违反了基本的CSS和HTML原则，使每个人都很难处理简单的事情。打破习惯，让这个和你所有未来的项目变得更加轻松！

相互重叠的链接

2 个答案: