Абсолютно позиционированное изображение не отображается правильно на мобильном телефоне / iPhone

Question

У меня есть изображение, которое я хочу отобразить поверх другого изображения внутри div.У div есть отступы и поля.Я хочу выровнять изображение по верху и левому краю div без заполнения показа div.Div - относительная позиция, а изображение - абсолютная позиция.Это работает корректно во всех браузерах на рабочем столе, но не на iPhone.

Я проверил, что все div имеют позицию, назначенную как относительную.

<div class="aaa">
    <div class="bbb ccc">
        <img src="common/banner.png" width="365" height="200"  class="ddd"/>
        <img src="images/picture.jpg" width="350" height="233" /> 
        <h3>Text</h3>
    </div>
</div>

<!--   ---CSS FOLLOWS, EXTRA CSS REMOVED---  -->

.aaa {
position: relative;
width:100%;
margin:auto;
padding:15px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: top;
flex-direction: row;


}


.ccc {
position: relative;

}


.bbb {
max-width:350px;
position:relative;
color:#FFF;
flex-grow: 1;
padding: 15px 15px 50px 15px;
margin:15px;
text-align:left;
overflow:hidden;

}

    @media (max-width: 410px) {
            .bbb {
                position:relative;
                width:90%;
                margin:15px 0;
                height:auto;
                overflow:auto;
            }

            .bbb img{
                position:relative;
                width:100%;
                height:auto;
            }

            .bbb a, 
            .bbb a:hover,
            .bbb a:focus,
            .bbb a:visited {
                position:relative;
                margin-top:30p
            }



    }


.bbb a, 

.bbb a:hover,

.bbb a:focus,

.bbb a:visited {
display: inline-block;
padding: 5px 15px;
position: absolute;
bottom:10px;
left: 50%;
transform: translate(-50%, 0);
transition: background 0.2s linear, color 0.2s linear;

}

Изображение должно быть заподлицо с верхом и слева ототд.

Answer 1

Ваша разметка не содержит никакой ссылки (<a>), но единственный элемент в вашем CSS, к которому вы применили position:absolute, это .bbb a (с различными модификаторами), но это ни к чему не относится.

---

Давайте пройдемся по основам: чтобы отобразить 2 элемента один поверх другого (что, по общему признанию, является тем, чего вы хотите достичь), вам необходимо:

• родитель с position:relative
• один дочерний элемент без position или с position:relative (это будет составлять поток документов: заполнит и определит размер родительского элемента и, косвенно, также изменит размер другого элемента).
• другой дочерний элемент с position:absolute; + top, left, width и height (в качестве альтернативы вы можете заменить width:100%;height:100% на bottom:0;right:0), что, таким образом, сопоставит себя с размерами родителя , который, в свою очередь, берет свои размеры из нормального потока (который содержит только другой дочерний элемент). Этот элемент, будучи абсолютно позиционированным, не является частью нормального потока.

relative-parent {
  position: relative;
        font-size: 3rem; 
}
normal-child {
        height: 180px;
        background-color: red;
        color: white;
}
absolute-child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
        background-color: white;
        color: red;
        /* hide absolute child */
        opacity: 0;
        border: 1px solid red;
        transition: opacity .3s;
}
relative-parent:hover absolute-child {
        /* show absolute child on parent hover */
        opacity: 1;
}

relative-parent,
normal-child,
absolute-child {
  width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
}

/* all indented rules are irrelevant 
   I basically added them to style the example */

<relative-parent>
  <normal-child>Normal child</normal-child>
  <absolute-child>Absolute child</absolute-child>
</relative-parent>

Выше приведен общий принцип. Все правила оформления (неважные) были отступлены, поэтому те, о которых я говорил выше, оставались выдающимися.

Вся конструкция берет свой размер от размера потока, который является нормально позиционированным дочерним элементом (в примере: height: 180px; width: 100%. Если вы измените этот элемент, вы также измените родительский и другой дочерний элементы).

Неважно, какие элементы вы используете (они могут быть даже пользовательскими, как я их сделал, при условии, что вы дадите им значение уровня блока или flexbox для display). Если вы используете <div> в качестве родительского элемента и <img> s в качестве дочернего, вы должны указать один в родительском потоке display:block.

---

Если вы примените вышеуказанный принцип без каких-либо ошибок валидации, он будет работать в разных браузерах. Это уровень CSS 1.

Answer 2

Я не уверен, что понимаю, почему на телефоне 2 картинки?Я вижу теги "a" в вашем CSS, поэтому отправляю вам это.

<a href="#" id="name">
    <img title="Hello" src="common/banner.png" onmouseover="this.src='images/picture.jpg'" onmouseout="this.src='common/banner.png'" />
</a>