html - 一张图片从中心推另一张图片

Question

我有一个徽标将另一个图像推离中心。无论我在徽标上放置多少边距，我都希望 topimage 居中。

html: http://www.joekellywebdesign.com/churchsample1/index.html

<div id="wrapper">
        <div id="top">
            <div id="logo">
                <img src="images/logo.png">
            </div>
            <div id="topimage">
                <img src="images/church.png">
            </div>
        </div>
        <div id="navmenu">
            <h1>Test text</h1>
        </div>
        <div id="bottom">
            <div id="bottomleft">
                <h1>Welcome to Fictional Baptist Church</h1>
            </div>
            <div id="bottomright">
                <h1>Join us on Sunday nights for a special series of sermons</h1>
            </div>
        </div>
    </div>

css：http ://www.joekellywebdesign.com/churchsample1/css/styles.css

#wrapper {z-index:5; width:900px; margin:auto;position: relative;}
#top {z-index:10; background-color:#80FFFF; margin:0;padding:0;position: relative;}
#logo {z-index:50; float:left; margin:0;padding:0;position: relative;}
#logo img {margin:50px 0 0 50px}

抱歉，我不知道如何在此处粘贴代码。

Answer 1

对您的徽标 div 使用绝对定位。

#logo { position:absolute; }

Answer 2

一种方法是绝对定位您的徽标，而不是绝对定位。

另一种方法是使用 2 个不同的层，例如：

<div style='position:relative'>
<div id='layer1' style='position:absolute;left:0px;top:0px;'>
<img src=topimage.jpg' />
</div>
<div id='layer2' style='position:absolute;left:0px;top:0px;'>
<img src=logo.jpg' />
</div>
</div>