css - 绝对定位的图像无法在手机/iPhone 上正确显示

Question

我有一张图片，我想在 div 内的另一张图片上显示。 div 有填充和边距。我想将图像对齐到 div 的顶部和左侧，而不显示 div 的填充。 div是相对位置，image是绝对位置。这在桌面上的所有浏览器中都能正常工作，但在 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;

}

图像应与 div 的顶部和左侧齐平。

Answer 1

您的标记不包含任何链接 ( <a> )，然而，您在 CSS 中应用的唯一元素 position:absolute是 .bbb a (带有各种修饰符)，但这不适用于任何事情。

---

让我们回顾一下基础知识:为了在另一个之上显示 2 个元素(诚然，这是您想要实现的)，您需要:

• parent 有 position:relative
• 一个 child 没有position或 position:relative (这将构成文档流:将填充并确定父元素的大小，并间接地调整其他元素的大小)。
• 另一个 child 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%。如果您更改该元素，您也会更改父元素和另一个子元素)。

你使用什么元素并不重要(它们甚至可以是自定义元素，就像我制作的那样，只要你给它们一个 block 或 flexbox level 值 display )。如果你使用 <div>作为 parent 和<img>作为 child ，你应该给 parent 流程中的那个display:block .

---

如果您在没有任何验证错误的情况下应用上述原则，它将跨浏览器/跨设备工作。这是 CSS 级别 1。