2

HTML

<body onload="MM_preloadImages('images/enterroll.gif')">
<div id="wrapper">
<div id="enterlogo"><img src="images/entrylogo.gif" width="600" height="600" alt="enterlogo" /></div>
<div id="enter"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','images/enterroll.gif',1)"><img src="images/enter.gif" alt="enter" name="enter" width="300" height="300" border="0" id="enter2" /></a></div>
</div>
</body>

CSS

body {
    background-color: #CCC;
}
#wrapper {
    height: 750px;
    width: 750px;
}
#enterlogo {
    height: 600px;
    width: 600px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
}
#enter {
    height: 300px;
    width: 300px;
}

所以我真正需要做的就是让输入 div 位于包装器 div 的右下角。

为此，我需要它覆盖 enterlogo div！我查看了很多关于 z-index 和 float right 定位方法的帖子，但它们似乎都达不到要求。

任何帮助都将不胜感激，我打电话给朋友，他说将 enterlogo div 中的图像作为背景并将其他图像放入该 div 可能会有所帮助.. 我看不出它是如何工作的！

PS翻转图像将是一个链接，它将成为页面上唯一的div片段。

4

2 回答 2

5

使用position: absolute，像这样：

#wrapper {
    position: relative;
}
#enter {
    position: absolute;
    right: 0;
    bottom: 0;
}

这是一个演示：http: //jsfiddle.net/thirtydot/Nd2jQ/

以下是有关其工作原理的更多信息：http: //css-tricks.com/absolute-positioning-inside-relative-positioning/

于 2012-06-13T09:45:32.187 回答
1

我相信您过度使用javascript了..您应该只使用 CSS 来满足您的所有要求（并在此过程中简化您的html..

<body>
    <div id="wrapper">
        <div id="enterlogo"></div>
        <a href="#" id="enter"></a>
    </div>
</body>

和

body {
    background-color: #CCC;
}
#wrapper {
    height: 750px;
    width: 750px;
    position:relative;
}
#enterlogo {
    height: 600px;
    width: 600px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    background: url('images/entrylogo.gif') top left no-repeat;
}
#enter {
    display:block;
    height: 300px;
    width: 300px;
    background: url('images/enter.gif') top left no-repeat;
    position:absolute;
    bottom:0;
    right:0;
}
#enter:hover {
    background-image: url('images/enterroll.gif');
}

演示在 http://jsfiddle.net/gaby/WL96s/

于 2012-06-13T10:02:07.890 回答