Html 文本未定位在正确的图像上

堆栈溢出社区

正在尝试设置一个平铺系统，该系统将生成当前由占位符图像填充的视频示例。尝试将文本定位在图像上方。这是我目前的问题：

HTML

<section id="video-section" class="portfolio">
    <div class="big-container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Video Production</h2>
                <hr class="small">
            </div>
            <div class="container-fluid full-width has-inner"> 
                <div class="row no-gutter">
                    <div class="col-md-4 nogut">
                        <div id="image1" class="video-item">
                            <a href="https://vimeo.com/208403633">
                                <img id="portfolio1" class="img-full-width" src="img/image1.jpg">
                            </a>
                            <p class="text"> Image 1 </p>
                        </div>
                    </div>
                    <div class="col-md-4 nogut">
                        <div id="image2" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image2.jpg">
                            </a>
                            <p class="text"> Image 2 </p>
                        </div>
                    </div>
                    <div class="col-md-4 nogut">
                        <div id="image3" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image3.jpg">
                            </a>
                            <p class="text"> Image 3 </p>
                        </div>
                    </div>
                </div> 
                <div class="row no-gutter">
                    <div class="col-md-4">
                        <div id="image4" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image4.jpg">
                            </a>
                            <p class="text"> Image 4 </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id="image5" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image5.jpg">
                            </a>
                            <p class="text"> Image 5 </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id ="image6" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image6.jpg">
                            </a>
                            <p class="text"> Image 6 </p>
                        </div>
                    </div>

                </div>
                <!-- /.row (nested) -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

---

知道我做错了什么吗？任何帮助都会很好，谢谢

好吧，如果你只是想把文本放在图像上，只需将text class

CSS

更改为

.text{ 
      position: relative;
      bottom: 100px;
      z-index: 100;}

这是一篇很棒的文章，解释了如何在图像上放置文本块

---

这也是@xbonez的一个例子。

如果你只是想把文本放在图像上，只需将text class

CSS

改为

.text{ 
      position: relative;
      bottom: 100px;
      z-index: 100;}

这是一篇很棒的文章，解释了如何在图像上放置文本块

---

另一个例子是@xbonez。

要将

.text

项放置在

容器中。视频项

容器中，它们不仅必须具有

位置：绝对

（您这样做了），而且它们的*容器/父*还必须具有

位置：相对

---

在您的情况下，这将是类为

.video item

的div，因此您应该将

位置：relative

添加到

.video item

。然后您应该通过向

添加
top
和
left
设置来调整文本位置。text

要将

.text

项放置在

容器中。视频项

容器不仅必须具有

位置：绝对值

（您这样做了），但它们的*容器/父*也需要有

位置：relative

在您的情况下，这将是类为

.video item

的div，因此您应该将

位置：relative

添加到

.video item

。然后，您应该通过将

顶部

和

左侧

设置添加到

.text

来调整文本位置