我怎样才能将这些图像放在一起？

Question

我试着将我的徽标和 header图片放在彼此之上，如下所示：

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

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

但是我的徽标仍然在 header 图片的顶端。

我的 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>

我的 Header-Picture 是背景，我的徽标在图片中央的左侧，我需要更改什么？

My actual view

Answer 1

position:absolute是相对于nearest positioned parent, or the entire page的。因此，您在这里将图像设置在完全相同的位置。

你需要的是 .imgB1 设置 position: relative 然后将其移动到 top 和其他人的位置。例如：

#logo img {
   position:absolute;  
}

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

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

Answer 2

我没有实际测试过这个，但如果它有效，请竖起大拇指。我忘记完成 css 类并转到 php 而不是我完全了解 php

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

Answer 3

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

Answer 4

如果你想让两张图片叠加在一起，你需要做的是将header设置为relative，img设置为absolute 像这样:

.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，两者将占用自己的 space，因此不会相互叠加。

通过将父级的位置定义为 relative，在本例中为 .header，.header 内带有绝对定位的 img 标签的所有内容相对于父级将占据相同的 space。

我怎样才能将这些图像放在一起？

How can i position those images over each other?

html

css

position

image

graphical-logo