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

嗯，我正在尝试实现一个基本的效果，6个图像放在一起（2行3个），并希望在它们上面添加一些文字。但问题是（我认为）CSS中的float=left“命令”，它确实将我的图像很好地放在了一起。。。但是将我的所有文本都放在一个地方，而不是与适当的图像很好地结合在一起。我已经坐着思考了好几天，不知道该怎么办。希望你能帮忙

CSS

HTML

生活

树很酷
激进恐龙

大圆形按钮
运行

这太疯狂了

将

位置：relative

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

---

上下文是位置为“相对/绝对/固定”的最后一个父级。现在，上下文可能是某个更高级别的容器，甚至是主体本身，因此所有.text项都集中在那里。

将

位置：relative

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

---

上下文是位置为“相对/绝对/固定”的最后一个父级。现在，上下文可能是某个更高级别的容器，甚至是主体本身，因此所有的.text项都集中在那里。

问题在于，您将图像定位到相对位置。但是默认情况下，您的

.text

是

.container

的直接子级

。text

将其父级查找为相对位置，但

.container

未应用css属性position relative，然后将其查找为相对位置，依此类推，最终，html是相对位置的，这就是为什么所有代码堆栈都位于彼此的顶部

试试这个

.contailer{
    position: relative;
}

---

问题是，您正在将图像定位到相对位置。但是默认情况下，您的

.text

是

.container

的直接子级

。text

将其父级查找为相对位置，但

.container

未应用css属性position relative，然后将其查找为相对位置，依此类推，最终，html是相对位置的，这就是为什么所有代码堆栈都位于彼此的顶部

试试这个

.contailer{
    position: relative;
}

---

这和其他人指出的元素的位置有关

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

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

---

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

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

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

---

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

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

---

}

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

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

---

}使用下面的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;
}

---

使用下面的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;
}

---

给出“容器”类样式，如下所示：

.container {
    position: relative;
}

---

并移除

浮动：左来自“image”类
给出“container”类样式，如下所示：

.container {
    position: relative;
}

并移除
浮动：左来自“图像”类
你不这么认为吗。你应该创建一个小提琴演示看看这个好吧，现在看看我的小提琴，你不这么认为吗。你应该创建一个小提琴DeSee这好，现在看看我的小提琴@损坏如果我的答案对你有帮助，你应该把它当作检查答案。thanks@Mar如果我的回答对你有帮助，你应该把它看作是答案。谢谢