Question

我正在努力实现彼此相邻放置的6个图像（2行3个）的基本效果，并希望在它们上面添加一些文字。但问题是（我认为）在float = left＆＃34;命令＆＃34;在CSS中，它确实使我的图像很好地彼此相邻......但是我将所有文本都放在一个地方而不是恰当地放在适当的图像上。我已经坐了几天思考这个问题并且不知道该怎么做。希望你能帮忙。

CSS

.text {
    position: absolute;
    z-index: 100;
    color: black;
    width: 100%;
}

.image {
    float: left;
    clear: both;
    padding: 2px;
    position: relative;
}

HTML

<body>
    <div class="row" style="width:1600px">
        <div class="container">
            <img class="image" src="Life.jpg" alt="Life" style="width:520px;height:360px;"  />
            <p class="text">Life</p>
        </div>

        <div  class="container">
            <img class="image" src="Trees are Cool.jpg" alt="Trees Are Cool" style="width:520px;height:360px;"  />
            <p class="text">Trees are Cool</p>
        </div>

        <div class="container">
            <img class="image" src="Radical dinosaurs.jpg" alt="Radical Dino" style="width:520px;height:360px;" />
            <p class="text">Radical Dinosaurs</p>
        </div>

        <div class="container">
            <img class="image" src="Big Round Vuttons.jpg" alt="Big Round Buttons" style="width:520px;height:360px;"/>
            <p class="text">Big Round Buttons</p>
        </div>

        <div class="container">
            <img class="image" src="Run.jpg" alt="Run" style="width:520px;height:360px;"/>
            <p class="text">Run</p>
        </div>

        <div class="container">
            <img class="image" src="Thats crazy.jpg" alt="That's Crazy" style="width:520px;height:360px;"/>
            <p class="text">That's Crazy</p>
        </div>
    </div>
</body>

Answer 1

使用以下css，这将解决您的问题

   .text {
        position: absolute;
        z-index: 100;
        color: black;
        width: 100%;
        top: 0;

    }

.container {
    display: inline-block;
    box-sizing: border-box;
    padding: 2px;
    position: relative;
}

Answer 2

将position: relative添加到.container类，因此它将是.text元素上下文。元素相对于上下文定位。

上下文是具有位置的最后一个父级：relative / absolute / fixed。现在上下文可能是一些更高级别的容器甚至是身体本身，因此所有.text项目都集中在那里。

Answer 3

问题在于您将图像定位到相对位置。但是您的.text默认为.container的直接孩子.text发现它的父级是相对位置但是.container没有应用css属性位置相对于它找到.container父级是位置相对的，依此类推，最后html是相对的位置，这就是为什么你的代码堆叠在彼此的顶部。

SEE DEMO

试试这个

.contailer{
    position: relative;
}

Answer 4

它与其他指出的元素的位置有关

.text {
    position: absolute;
    z-index: 100;
    color: black;
    width: 100%;
    top: 50px;
    left: 50px;
}

.image {
    padding: 2px;
    position: relative;
}
.container {
    float:left;
}

https://jsfiddle.net/xqf8kfd1/1/

Answer 5

按如下方式给出'容器'类样式：

.container {
    position: relative;
}

从“图片”类中删除float: left;

Answer 6

尝试删除position：absolute并将float：left添加到css文本类

.text {
float: left;
z-index: 100;
color: black;
width: 100%;
display: inline-block;

}

为什么我的所有文字都出现在同一个地方

6 个答案: