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;
}

したがって、実際にこれを行う必要があるのは、Enterdivをラッパーdivの右下隅に配置することです。

これを実現するには、enterlogodivをオーバーレイする必要があります。z-indexとfloatrightを使用したポジショニング方法に関する多くの投稿を調べましたが、すべてが不十分なようです。

助けていただければ幸いです。友人に電話したところ、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 に答える