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

问题描述

我有一个图像，我想在 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 的顶部和左侧齐平。

标签： css

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

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

父母与position:relative
一个没有position或position:relative有的子元素（这将构成文档流：将填充并确定父元素的大小，并间接地确定另一个元素的大小）。
另一个带有position:absolute;+ top、和（或者您可以替换为）的子元素left，因此会将自身映射到父元素的维度，而父元素的维度又从正常流（仅包含另一个子元素）中获取其维度。这个元素是绝对定位的，不是正常流程的一部分。widthheightwidth: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>as parent 和<img>s 作为 children，你应该在 parent flow 中给出一个display:block。

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

问题描述

解决方案

推荐阅读