我遇到的情况是,我有两个元素,如下在这篇文章的底部。
我希望 FrontPageMenu 重叠,因此它与我的 map 重叠,因此它可以用作菜单。您可以看到它正在运行:http://mcoroklo.dk/ .
为了完成这项工作,我使用了position:relative;顶部:-550px; ,但是,这在我的图像下方提供了 550px 的空白;-)
基本上我想在一切正常的情况下删除这个空白。
一种解决方案可能是定位:相对;顶部:550px;关于其余内容,但我什至不想评论这是多么愚蠢;-)
希望你们能一笑置之并说“把这个属性(property)放进去!”。
完整 map - 一种使用 CSS 的图像 map :
<dl id="fullMap">
<dd>
<a id="bamselandMap" href="Bamseland.aspx" title="Bamser"></a>
</dd>
<dd>
<a id="andedammenMap" href="Badeaender.aspx" title="Badeænder"></a>
</dd>
<dd>
<a id="boblerMap" href="Saebebobler.aspx" title="Sæbebobler"></a>
</dd>
</dl>
FrontPage 菜单分区。在 HTML 中是这样的:
<div class="FrontPageMenu">
<h3 style="color:white;">Legetøj</h3>
<hr />
<span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_0" title="Besøg Badeænder universet ved at klikke her" href="legetoej/badeaender" style="color:White;">Badeænder</a></span>
<br />
- <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_0" title="Besøg Designer badeænder universet ved at klikke her" href="legetoej/badeaender/designer-badeaender" style="color:DarkGray;">Designer badeænder</a></span>
<br /><br />
- <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_0_ChildrenLink_1" title="Besøg Store badeænder universet ved at klikke her" href="legetoej/badeaender/store-badeaender" style="color:DarkGray;">Store badeænder</a></span>
<br /><br /><br />
<span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_1" title="Besøg Bamser universet ved at klikke her" href="legetoej/bamser" style="color:White;">Bamser</a></span>
<br />
- <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_0" title="Besøg Mikroovns bamser universet ved at klikke her" href="legetoej/bamser/mikroovns-bamser" style="color:DarkGray;">Mikroovns bamser</a></span>
<br /><br />
- <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_1_ChildrenLink_1" title="Besøg Musik bamser universet ved at klikke her" href="legetoej/bamser/musik-bamser" style="color:DarkGray;">Musik bamser</a></span>
<br /><br /><br />
<span style="font-weight:bold; font-family:Arial; font-size:11pt; "><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_ParentCategoryName_2" title="Besøg Sæbeboble udstyr universet ved at klikke her" href="legetoej/saebeboble-udstyr" style="color:White;">Sæbeboble udstyr</a></span>
<br />
- <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_0" title="Besøg Sæbeboble pinde universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-pinde" style="color:DarkGray;">Sæbeboble pinde</a></span>
<br /><br />
- <span style="font-family:Arial; font-size:11pt;" ><a id="ContentPlaceHolder1_ContentPlaceHolder1_ProductCategoryList1_CategoryRepeater_CategoryChildrenRepeater_2_ChildrenLink_1" title="Besøg Sæbeboble vand universet ved at klikke her" href="legetoej/saebeboble-udstyr/saebeboble-vand" style="color:DarkGray;">Sæbeboble vand</a></span>
FrontPage 菜单 CSS 类:
.FrontPageMenu
{
position:relative;
top:-550px;
background-color:Gray;
padding:10px;
width:200px;
background:url('http://www.mulius.com/Media/Site/FrontPageMenuBackground.png') repeat scroll 0 0 transparent;
min-height:400px;
}
最佳答案
创建 map 的包含元素 position:relative;
并创建 map position:absolute;
。然后,不要使用 top: -550px
,而是使用 left: 20px;顶部:20px;
。在演示 CSS 中,我使用 !important
来覆盖您的基本样式表。你在类里面不需要这个。使包含元素的位置相对,使得子元素的绝对定位与其相关(而不是页面)。
当您(或其他人)稍后查看您的代码时,使用负位置和边距来纠正差异很难理解和调试。使用 float 可能会导致页面其他地方出现布局问题,而且不那么直观。你真正想说的是,“我希望这个菜单位于我的 map 的左上角”。由于 map 和菜单是 sibling ,因此这是绝对定位。
演示:http://jsfiddle.net/ThinkingStiff/M6Jc9/
.NoColumnContent {
position: relative;
}
.FrontPageMenu {
position: absolute !important;
top: 20px !important;
left: 20px;
}
关于css - 重叠的 div 会产生大量不需要的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8826137/