Question

我尝试将我的徽标和标题放在彼此的顶部，如下所示：

＆＃13;

img {
    position: absolute;
    top: 25px;
    left: 25px;
}
.imgA1 {
    z-index: 1;
}
.imgB1 {
    z-index: 3;
}

＆＃13;

    <img class="imgA1" src="https://placehold.it/200/333333">
    <img class="imgB1" src="https://placehold.it/100">

＆＃13;

但我的标识仍然位于标题图片的顶端。

我的css代码如下：

.header img.headerpic  { 
    max-width:100%; 
    float:left; 
    position:relative;
    background:transparent url(../images/header.jpg)
}
.header img.logo { 
    position: relative; 
    float:left; 
    max-width:100%;  
    background:transparent url(../images/logo.png )
}

我在index.php中添加了这个：

<body id="home">

<!-- header area -->

    <div class="header">
        <id="logo">
            <img src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" alt="logo"/>
            <img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
        <div class="infobox"><div class="inner">    
    </div>
</body>

我需要更改我的页眉 - 图片是背景，我的徽标位于图片中心的左侧？

My actual view

Answer 1

position:absolute与nearest positioned parent, or the entire page相关。因此，您在此处将图像设置在完全相同的位置。

您需要.imgB1设置position: relative，然后将其移至top和其他地方。例如：

＆＃13;

#logo img {
   position:absolute;  
}

.header img.headerpic  { 
    max-width:100%; 
    top: 10px;
    left: 10px;
    position: relative !important;
}

＆＃13;

    <div class="header" id="logo">
            <img src="https://placehold.it/200/333333" alt="logo"/>
            <img class="headerpic" src="https://placehold.it/100" alt="" />
        <div class="infobox"><div class="inner">    
    </div>

＆＃13;

Answer 2

我实际上并没有对此进行过测试，但是，如果它有效的话。我忘记完成我的CSS课程并转到PHP而不是我完全了解php

margin-left: 25%;
margin-top:25%;

Answer 3

增加z-index，案例可能是您的徽标比img divs具有更多z索引

Answer 4

如果您希望两个图像叠加在一起，您需要做的是将标题设置为 relative ，将img设置为绝对，如下所示：

.header{
  position: relative;
 }

.header img{
  position: absolute;
}

<div class="header">
    <img class="imgA1" src="https://placehold.it/200/333333">
    <img class="imgB1" src="https://placehold.it/100">
</div>

通过将img.headerpic和img.logo都设置为position:relative，两者都会占用自己的空间，因此不会叠加在一起。

通过将父级的位置定义为 relative ，在本例中为.header，.header内的任何位于绝对位置的img标记内的任何内容都将占用相同的空间，相对于父母。

我如何将这些图像放在彼此之上？

4 个答案: