Question

我想制作一张包含图片和一些文字的卡片。文本应放在图像上。因此，我将所有这些内容放在.container position: relative，position: absolute将自己设置为.row-start。

对于文字：

文本的第一部分位于左侧，包装.row-end，一个接一个地连着
文本的第2部分位于包装器<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Color-blue.JPG"/> <div class="row-start"> <p>Attr 1</p> <p>Attr 2</p> </div> <div class="row-end"> <p>Attr 3</p> </div> </div> </body> </html>
当然都在容器内

HTML

.container {
    position: relative;
    height: 15em;
}

.container img {
    width: auto;
    height: 100%;
}

.row-start {
    position: absolute;
    left: 1em;
    display: flex;
    flex-direction: row;
}

.row-end {
    position: absolute;
    right: 1em;
}

的CSS：

.row-start

问题是什么
让我感到困惑的是，.row-end似乎.container可以工作，而.container根本不尊重其<html>父母。它将被放置在{{1}} div之外，并从页面的右侧放置（因此它尊重 {{1}}代码？）

我在这里错过了什么或做错了什么？这样做的最佳做法是什么？感谢

Answer 1

您的.container DIV没有宽度定义，因此它是100％宽，即全宽（其父级/在此窗口示例中）。高度为15 em，显然高于图像的高度。因此，您的绝对DIV 与.container相关，但该容器比您显然认为的大 - 图像仅覆盖容器div的一部分。

要更改它，您可以定义容器的宽度，以及100％宽度或图像。

Answer 2

你的容器元素是一个块，所以它的大小就是屏幕的大小。我添加了一个背景：红色到你的容器，所以我可以告诉你我的意思

你可以在这个pluckr上看到它： https://plnkr.co/edit/QdsaqIU5X7xYX4UXksT9?p=preview

.container {
          position: relative;
          background: red;
 }

为什么`position：absolute`孩子不尊重他们的亲戚父母？

2 个答案: