Question

我想显示一个字幕文本，在图像顶部运行，与底部（包含图像的DIV）对齐。

我原本以为我需要使用Z-Index，但出于某种原因它没有用。我真的很想了解原因。

这是HTML：

<div class="latest-item">
            <img src="images/latest-image-placeholder.png" alt="latest-image-placeholder"/>
            <div class="latest-item-copy">Bad schools, flawed justice create crime. Test Bad schools, flawed justice create crime. Test </div>
        </div>

这是相应的CSS：

.latest-item    {
            height: 130px;
            background-color: fuchsia;
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            }

.latest-item-copy   {
                width: 220px;
                /* Fallback for web browsers that doesn't support RGBa */
                background: rgb(0, 0, 0);
                /*  RGBa with 0.6 opacity */
                background: rgba(0, 0, 0, 0.6);
                bottom: 0px;
                position: absolute;
                padding-left: 5px;
                padding-right: 15px;
                padding-top: 2px;
                padding-bottom: 4px;
                box-sizing:border-box;
                -moz-box-sizing:border-box; /* Firefox */
                -webkit-box-sizing:border-box; /* Safari */
                font-family: Georgia, Times New Roman, serif;
                font-size: 14px;
                line-height: 18px;
                color: #F1F1F1;
                font-weight: bold;
                }

以下是输出内容：http://i.stack.imgur.com/Hdl9l.png

Answer 1

当您绝对定位项目时，它会将元素拉出文档流程。浮动元素时会发生同样的事情。它们会自动放置在具有更高z-index的不同“层”中。

Answer 2

因为您正在使用position: absolute

图像顶部的文字在没有Z-index的情况下工作，为什么？

2 个答案: