html - h2元素全部聚集在iOS和Firefox的顶部图像上

在Codexr.io网站上，我注意到虽然h2元素可在适用于Chrome的任何大小的浏览器上运行，但是我看到iOS Safari和Firefox，所有h2都在一张主图像中彼此重叠。

这是HTML:

<div class="content">
    <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
    <h2 class="top-area-text">Collaborative</h2>
</div>

和CSS:

#top-area .top-area-text, #top-area .region-top-fifth h2, #top-area .region-top-fifth h2 {
    left: 0;
    text-align: center;
    top: 4em;
    width: 100%;
    color: white;
    font-size: 3em;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    text-transform: uppercase;
}

#top-area .top-area-text {
    position: absolute;
}

有什么我想念的吗？为什么Chrome可以正常运行，而Firefox和iOS无法正常运行？有什么畸形的东西吗？

最佳答案

问题是父div上没有position: absolute;的position: relative;。我不知道为什么Chrome中不会发生这种情况。也许有些东西被缓存了？我在您的Chrome浏览器网站上也遇到了问题。

根据Mozilla，绝对定位的元素是positioned relative to their closest positioned ancestor:



在Chrome检查器中添加此代码可以解决我的问题:

#top-area .content {
    position: relative;
}

这基本上可以在您的网站上复制该问题，并说明如何解决该问题:

#top-area .top-area-text, #top-area .region-top-fifth h2, #top-area .region-top-fifth h2 {
    left: 0;
    text-align: center;
    top: 4em;
    width: 100%;
    color: white;
    font-size: 3em;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    text-transform: uppercase;
}

#top-area .top-area-text {
    position: absolute;
}

/* Remove this code to reproduce the issue on your site. */
#top-area .content {
    position: relative;
}

<div id="top-area">
    <div class="content">
        <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
        <h2 class="top-area-text">Collaborative</h2>
    </div>
    <div class="content">
        <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
        <h2 class="top-area-text">Test</h2>
    </div>
    <div class="content">
        <p><a href="http://codexr.io/collaborative"><img alt="" height="450" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800"></a></p>
        <h2 class="top-area-text">Test2</h2>
    </div>
</div>

关于html - h2元素全部聚集在iOS和Firefox的顶部图像上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46166056/