Question

在网站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不行？有什么不正确的事吗？

Answer 1

问题是父级div上没有position: absolute;的{{1}}。我不知道为什么Chrome没有发生这种情况。也许有些东西被缓存了？我的Chrome网站也存在问题。

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

元素从正常文档流中删除;没有为页面布局中的元素创建空间。相反，它相对于其最近定位的祖先（如果有的话）定位;否则，它相对于初始包含块放置。它的最终位置由顶部，右侧，底部和左侧的值决定。当z-index的值不是auto时，此值将创建新的堆栈上下文。绝对定位的盒子可以有边距，并且它们不会与任何其他边缘一起折叠。

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

position: relative;

这基本上会复制您网站上的问题，并说明如何解决它：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

Answer 2

因为position: absolute;没有在父div上没有position: relative;而反映出来。您需要在父div中设置position:relative。为此，您需要在.block div。

中添加相对位置

我还在Chrome中查看了与Firefox相同的节目。我认为您的Chrome浏览器中存在缓存问题，只需删除缓存并再次检查即可。

#top-area .block {
  position:relative
}

我只需将您的代码粘贴到此处：

body {margin: 0;}
#top-area .column {
    color: #fff;
    float: left;
    min-height: 260px;
    overflow: hidden;
    padding: 2% 0 0;
    text-align: center;
    width: 100%;
}
#top-area .block {
    margin: 0;
    position: relative;
}
.column p {
    margin: 0;
}
#top-area .column img {
    display: block;
    height: 350px;
    object-fit: cover;
}
#top-area .top-area-text {
    position: absolute;
    color: white;
    font-size: 3em;
    left: 0;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-transform: uppercase;
    top: 3em;
    width: 100%;
}

<div id="top-area">
    <div class="page-wrap clearfix">
        <div class="column one">
            <div class="region region-top-first">
                <div id="block-block-1" class="block block-block">
                    <div class="content">
                        <p>
                            <a href="http://codexr.io/professional"><img alt="" src="http://codexr.io/sites/default/files/office-2480354.jpg" width="800" height="450"></a>
                        </p>
                        <h2 class="top-area-text">Professional</h2>
                    </div>
                </div>
                <!-- /.block -->
            </div>
            <!-- /.region -->
        </div>
        <div class="column two">
            <div class="region region-top-second">
                <div id="block-block-2" class="block block-block">
                    <div class="content">
                        <p>
                            <a href="http://codexr.io/collaborative"><img alt="" src="http://codexr.io/sites/default/files/workplace-1245776.jpg" width="800" height="450"></a>
                        </p>
                        <h2 class="top-area-text">Collaborative</h2>
                    </div>
                </div>
                <!-- /.block -->
            </div>
            <!-- /.region -->
        </div>
        <div class="column three">
            <div class="region region-top-third">
                <div id="block-block-5" class="block block-block">
                    <div class="content">
                        <p>
                            <a href="http://codexr.io/contact"><img alt="" src="http://codexr.io/sites/default/files/cup-of-coffee-1280537.jpg" width="800" height="450"></a>
                        </p>
                        <h2 class="top-area-text">Contact Us</h2>
                    </div>
                </div>
                <!-- /.block -->
            </div>
            <!-- /.region -->
        </div>
    </div>
</div>

Answer 3

将此添加到您的css：

#top-area .block {
  position:relative
}

如果您想在该部分的顶部设置h2标记，则可以将top: 4em;更改为top: 1em;：

#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;
}

Answer 4

每个人都回答你必须为父容器添加position: relative。 .block在包括顶栏和顶区的区块上获得h2。或者，您可以将position:relative添加到.top-bar .region-header-image .block和#top-area .block。如果您在Chrome中看到它，则会出现缓存问题。

.block{
    position:relative
}

或

.top-bar .region-header-image .block{
    position:relative
}

和

#top-area .block{
    position:relative
}

Answer 5

<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>

<style>
.content {
     position:relative;
     object-fit: cover;
}
.top-area-text {
    position:absolute;
    width: 100%;
    top: 5px; 
    left: 0;
}

</style>

h2元素在iOS和＆amp ;;火狐

5 个答案: