html - 如何相对于必须绝对的元素放置元素？

This question already has answers here:

In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

                                    （4个答案）


                                7个月前关闭。


我需要在非常特定的位置（页面的中间）显示标题，并想在该位置下方显示另一个文本。我还很新，可能很容易解决，但是我不明白！

我已经尝试过使用flex-box，完全绝对定位（但是在放大/缩小页面或使用其他屏幕比例时，也会失败）。

body {
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}

#bg {
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  margin: 0;
  z-index: 0;
}

.section {
  top: 50vh;
  left: 50vw;
  position: inherit;
}

.CD {
  position: absolute;
  transform: translate(-50%, -50%)
}

.Subtitle {
  position: absolute;
  top: 52vh;
  transform: translate(-50%, -50%);
  text-align: left;
}

<div class="section">
  <!-- absolut zu body -->
  <div class="container">
    <!-- absolut zu section -->
    <div class="CD">
      <h1>CARL DRESSLER</h1>
    </div>
    <div class="Subtitle">
      <p>Portfolio</p>
    </div>
  </div>

</div>
</div>

代码似乎坏了，因为我只是尝试不同的事情。

预期产量：
h1应该很中间。 p应直接位于h1下，但不干扰它。

有什么建议么？

最佳答案

如果我误解了您要实现的目标，我深表歉意，但是我认为这是您正在寻找的目标。如果您将副标题移至与标题相同的div中，那么我认为这将解决您的大多数问题。如果这不是您想要的，请随时发表评论。

body {

  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}



#bg {

  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  margin:0;
  z-index: 0;
}

.section {

  top: 50vh;
  position:inherit;

}

.CD {

text-align: center;


}

.Subtitle {


}

    <div class="section"> <!-- absolut zu body -->
      <div class="container"> <!-- absolut zu section -->
        <div class="CD">
          <h1>CARL DRESSLER</h1>
                  <div class="Subtitle">
          <p>Portfolio</p>
        </div>
        </div>

      </div>

      </div>
    </div>

关于html - 如何相对于必须绝对的元素放置元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56777148/

上一篇：html - 如何在示例中添加 Bootstrap 按钮之间的间距？

下一篇：javascript - 如何将 flexbox 应用于 CSS 切换开关元素？

jquery - 填充顶部导致 Div 外的边距 - 了解 DOM

jquery - 在 Internet Explorer 中定位的 Unslider 问题

jquery - 使用按钮隐藏输入类型 "file"

html - Twitter 嵌入式时间轴 100% 宽度

css - 忽略宽度元素

html - CSS - 如何更改 div 顺序

html - 当我将它们在线转换为 pdf 时，不要显示 HTML 按钮

javascript - 如何在下拉列表的 anchor 标记上触发鼠标悬停事件

javascript - 可编辑选择无法正常工作