Question

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位于包装div的右下角。

为此，我需要它覆盖enterlogo div！我已经查找了许多关于z-index和定位方法的帖子，并且浮动权限正确，但所有这些帖子似乎都不足。

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

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

Answer 1

使用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/

Answer 2

我相信您过度使用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/

我需要一个div来坐在另一个div的角落里，而不是另一个div

2 个答案: