一切都在向底部移动

Question

有什么方法可以让所有项目（例如 text/pictures）可以重叠吗？

例如：

<body>

    <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">image</div>
    <div class="class2">text</div>
    <div class="class3">text</div>

</body>

我希望 class 2 文本和 class 3 显示在图像上。但是，在这种格式中，它们只出现在图像下方。

我试着把 class 2 和 class 3 放在 class 1

里面

<body>

    <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">image
        <div class="class2">text</div>
        <div class="class3">text</div>
    </div>

</body>

但是，我发现这很麻烦。每次我在 class 1 中添加一个新东西时，整个页面都会移动。

即使 position: relative; and position: absolute; 解决了这个问题，如果我尝试在整个页面本身显示一个元素（class 1 之外 - 转到页面底部），它也不会起作用。我试图让 https://www.w3schools.com/howto/howto_js_alert.asp 这样的东西出现在我的整个页面上。

尝试将 position: relative; 和警告消息框设置为“position: absolute;”，但这没有任何作用。有人可以提出一些建议吗？非常感谢！

Answer 1

是啊，像这样。

HTML

<div class="container">
    <div class="class1">image</div> //use an img tag here
    <div class="text-container"> 
     <div class="class2">text</div>
     <div class="class3">text</div>
    </div>

</div>

CSS

.container {
  position: relative;
  text-align: center;
  color: white;
}

.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

我不确定是否了解您的需求，但也许您的需求是这样的：

.class1 {
  position: relative;
  background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
  background-size: contain;
  background-repeat: no-repeat;  height: 100px;
  width: 100px;
}

<body>

    <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">
        <div class="class2">text2</div>
        <div class="class3">text3</div>
    </div>

</body>

Answer 3

你需要在页面底部设置你的内容试试这个解决方案，它是为了右下角的位置

.class1{
      position: absolute;
    right: 0;
    bottom: 0;
}

 <header>
        <div class="navbar">
        </div>
    </header>

    <div class="class1">image
        <div class="class2">text</div>
        <div class="class3">text</div>
    </div>

一切都在向底部移动

Everything keeps moving to the bottom

html

css

position