2

我有一种情况,我有两个元素,在这篇文章的底部如下所示。

我希望我的 FrontPageMenu 重叠,因此它与我的地图重叠,因此它可以用作菜单。您可以在以下位置看到它的工作原理:http: //mcoroklo.dk/

为了完成这项工作,我使用了 position:relative; 顶部:-550px;,但是,这在我的图像下方提供了 550px 的空白区域;-)

基本上我想删除这个空白,而一切正常。

一种解决方案可能是 position:relative; 顶部:550px;关于其余内容,但我什至不想评论这有多愚蠢;-)

希望你们能笑着说“把这个属性放进去!”。

全图 - 一种使用 CSS 的图像映射

    <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 菜单 div。在 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;

}
4

3 回答 3

3

制作地图的包含元素,position: relative;并制作地图position: absolute;。然后,不要使用 ,而是top: -550px使用left: 20px; top: 20px;。在演示 CSS 中,我曾经!important覆盖您的基本样式表。你在课堂上不需要它。使包含元素的位置相对,使子元素的绝对定位与该(而不是页面)相关。

当您(或其他人)稍后查看您的代码时,使用负位置和边距来纠正差异很难理解和调试。使用浮动可能会导致页面上其他地方的布局问题,并且不那么直观。你真正想说的是,“我希望这个菜单位于我地图的左上角”。由于地图和菜单是同级的,所以这是绝对定位。

演示:http: //jsfiddle.net/ThinkingStiff/M6Jc9/

.NoColumnContent {
    position: relative;    
}

.FrontPageMenu {
    position: absolute !important;
    top: 20px !important;
    left: 20px;
}
于 2012-01-11T20:39:47.673 回答
0

我建议尝试使用带有浮动和边距和填充的 div,而不是使用相对位置。但我感觉到你的痛苦......

于 2012-01-11T20:32:26.823 回答
0

添加margin-bottom: -500px;到类 FrontPageMenu。

你应该知道,当一个元素有 时position: relative,它仍然会占据它不被移动时通常拥有的空间。在这种情况下,您可以通过使用负边距来解决此问题。

于 2012-01-11T20:34:54.083 回答