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;

}

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

Answer 1

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

让我们看一下基础知识：为了在两个元素之间显示一个元素（顺便说一句，这是您想要实现的），您需要：

有position:relative的父母
一个没有position或带有position:relative的孩子（这将构成文档流：将填充并确定父对象的大小，并间接确定另一个元素的大小）。
另一个有position:absolute; + top，left，width和height的孩子（或者，您可以将width:100%;height:100%替换为{{1} }），从而将其自身映射到父级的尺寸，而父级的尺寸又从正常流（仅包含另一个子级）中获取。绝对定位的该元素不是正常流程的一部分。

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%赋予它们块或弹性框级别的值，它们甚至可以是我创建的自定义元素）。如果您将display用作父级，将<div>用作子级，则应在父流<img>中给出一个。

如果您应用上述原理而没有任何验证错误，那么它将跨浏览器/跨设备工作。这是CSS级别1。

Answer 2

我不确定，为什么在手机上显示2张图片？我在您的CSS中看到了标签“ a”，因此我将其发送给您。

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

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

2 个答案: