Как я могу позиционировать эти изображения друг над другом?

Я пытался позиционировать свой логотип и headerpic друг на друга, как это:Как я могу позиционировать эти изображения друг над другом?

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

Но мой логотип все еще находится на верхнем конце моего заголовка рис.

Мой 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>

Что мне нужно изменить, что мой заголовок-Picture является фоном и мой логотип находится слева в центре изображения?

My actual view

источник

2017-02-08 Jonathan Alexander

Почему первый img в div не имеет класса? – Jprada

@ Jprada Я не знаю, я описал редактирование, надеясь, что это было правильно. EDIT: Он исчезает, когда я добавляю: '

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>

источник

2017-02-08 14:35:38

@JonathanAlexander отредактирован, это просто вопрос перехода к соответствующему src снова и игры с верхним и левым значениями. –

теперь за заголовком, как я могу переместить его на передний план? –

@JonathanAlexander A) замените класс headerpic или src на элементы, возможно, у меня возникли проблемы с тем, что ваш оригинальный HTML был немного сломан. B) установите высокий 'z-index' на то, что вы хотите быть впереди. –

Я на самом деле не проверял это, но, если он работает большой палец вверх. Я забыл закончить свои классы CSS и иду на PHP, а не у меня есть полное знание PHP

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

источник

2017-02-08 14:38:28

Извините, решение не работает –

увеличения Z-индекс, случай может быть, что ваш логотип имеет больше индекса г, чем IMG дива

источник

2017-02-08 14:39:45

Я еще не указал ни одного z: '.header img.headerpic { max-width: 100%; float: слева; позиция: относительная; background: transparent url (../ images/header.jpg) } .header img.logo { позиция: относительная; float: слева; max-width: 100%; background: transparent url (../ images/logo.png) } ' –

Затем сделайте заголовок img.headerpic relative и .header img.logo абсолютным, этим .header img.logo перейдет на img.headerpic relative div –

Я уже пробовал, но менял его, как вы рекомендовали. Тем не менее doensn't работы –

Если вы хотите, чтобы оба изображения в стек поверх друг друга, что вам нужно сделать, это установить заголовок, как относительной и 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, и будет занимать свое собственное пространство и, таким образом, не складывают друг на друга.

Определяя позицию родителя как относительная, в этом случае .header, ничего внутри .header с img тегом, который позиционируется абсолютом будет занимать то же место, по отношению к родителю.

источник

2017-02-08 15:01:49 demitinay

Issueue с вашим кодом, мой логотип исчезает за заголовок, была эта проблема до этого. –

set z-index для соответствующих классов. в этом случае, так как вы хотите, чтобы логотип отображался сверху, установите для него более высокий индекс z. поэтому .header img.logo {z-index: 5; } – demitinay

Попытался добавить z-индекс, но все еще не «реакция», изображение по-прежнему находится за моей заголовок. Плюс меню тоже скользнуло вверх, а в мобильном все выглядит неловко сейчас = Меню не видно, тело сразу после заголовка и логотипа 2px видно за заголовком –

Как я могу позиционировать эти изображения друг над другом?

ответ

Смежные вопросы