Question

假设logo1和logo2每个长100px，我想覆盖徽标的一半。什么是最好的方式和最好的方式制作两个标志，并将它们放在页面的中心。

Answer 1

将您的徽标放在<div>中并提供margin: 0 auto;。

然后提供logo2 z-index: 1;，以便它位于logo1之上。

页：

<div class="center">
    <img src="Link/To/Your/Image/For/Logo1" id="logo1" />
    <img src="Link/To/Your/Image/For/Logo2" id="logo2" />
</div>

CSS：

.center {
    width: 210px;    
    margin: 0 auto;
    position: relative;
    left: 10px;
}

#logo2 {
    z-index: 1;
    position: relative;
    left: -10px;    
}

如果您使徽标重叠得更多（例如，移动logo2与left: -50px;重叠50px，那么您还必须更改周围div的位置以匹配与left: 50px;的重叠，因此#logo2和.center的左侧定位应该相同但相反。

Answer 2

一种选择是使用样式position:absolute;。以下是一个例子。

<style>
    .container{
        border:solid 1px red;
        text-align:center;
        height:500px;
    }
    #logo1, #logo2{
        width:100px;
        height:100px;
        display:inline;
        position:absolute;
        top:200px;
    }
    #logo1{
        border:solid 1px green;
        left:450px;
    }
    #logo2{
        border:solid 1px blue;
        left:540px;/*note 540 = 450 + (100 - 10)*/
    }

</style>

页：

<div class="container">
   <div id="logo1"></div>
   <div id="logo2"></div>
</div>

使用div来制作页面中心

2 个答案: