html - 在另一个矩形内制作一个矩形并定位元素

Question

我正在尝试编写简历模板，只是为了学习有关 HTML 和 CSS 的基础知识。但是，在将一个矩形定位在另一个矩形内时，我遇到了问题。我一直在寻找几个小时以及如何解决这个问题，但不确定为什么它根本没有出现。我希望矩形出现在蓝色的上方，但在“名称”文本下方，就像突出显示的条一样。

我相信这与我如何定位我的元素有关。我也尝试使用 z-index，但我所做的所有更改均无效。

另外，作为快速跟进，我想知道为什么我无法在矩形的中心对齐文本“名称”。我尝试做 text-align:center 但这也没有做任何事情。对于这两个问题，我觉得我在这里缺少一个主要概念。任何见解将不胜感激。

我在这里粘贴了我正在使用的代码:https://jsfiddle.net/Lx09fvcw/1/

特别是这个 HTML 部分:

<svg class = "leftBar">
    <rect id="leftRec">
        <div class="Name">Name</div>
        <div class = "icon">
            <img src ="img/education.png">
        </div>
    </rect>

    <rect id = "rightRec"></rect>

</svg>

作为编辑，我最初想要一个矩形在另一个矩形之上，如下所示:https://imgur.com/a/eOUGT8n

我试图对齐 A4 尺寸页面内的所有内容，但蓝色矩形在 A4 页面的最左侧部分之间有间隙。由于不允许我使用绝对值，我只想深入了解如何做到这一点，因为我在网上尝试的任何方法都不起作用。不是要求有人为我实现它，而是告诉我方法，因为它有点令人困惑。感谢您的帮助

当前代码:http://jsfiddle.net/05p9qo7t/1/

Answer 1

请记住，您不能将 div 作为子项直接附加到 rect、circle 和 path。您可以使用 foreignObject 来实现，但我强烈不推荐这种方式。

但如果您坚持这样的事情，您可以查看foreignObject 文档here .

如果您想以其他方式创建简历模板，我可以为您分享一些代码，以便更好地说明。

编辑:

这是您正在寻找的替代解决方案，请查看下面的代码片段:

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.container>div.right-rect {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  max-width: 200px;
  height: 100%;
  background-color: #003d73;
}

.container>div.right-rect>span.name {
  font-weight: bold;
  color: white;
  font-size: 35px;
}

.container>div.right-rect>span.name,
.container>div.right-rect>div.icon {
  margin-top: 20px;
}

<div class="container">
  <div class="right-rect">
    <span class="name">Name</span>
    <div class="icon">
      <img src="img/education.png">
    </div>
  </div>
  <div class="left-rect"></div>
</div>

注意:我只使用 100vh 和 100vw 来适应每个视口(viewport)，您可以将它们替换为任何合适的值。

在没有 position: absolute;

的情况下实现左矩形

要避免使用position: absolute;，首先，您应该将所有元素包裹在您的相关父元素中，因此您需要移动

<div class="over-rect"></div>

和

<span class="name">Name</span>

相关父级，在我们的例子中是 div 和 blue-rect 类，然后因为我们使用伪类样式，我们应该修改我们的一些样式使元素适合流程中的新位置。之后我们应该去掉 position: absolute; 并用 relative 替换它们。

This is optional and better for responsive designs in case you don't care about these stuffs you can keep up with absolute positioning.

但是我们还必须在流程中做一些修改，修改相对定位的元素的 top 元素，所以我们在我们的样式中添加一个 top 元素来移动相对元素关于他们的 parent 定位。

检查下面的代码修改:

body {
  background: rgb(204, 204, 204);
}

.container {
  width: 200px;
  height: 29.7cm;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.container>div.blue-rect {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 200px;
  max-width: 200px;
  height: 100%;
  background-color: #003d73;
}

.container>div.blue-rect>div.over-rect {
  position: relative;
  top: 20px;
  width: 100%;
  max-width: 200px;
  height: 3%;
  background-color: red;
}

.container>div.blue-rect>span.name {
  position: relative;
  top: -18px;
  z-index: 20;
  font-weight: bold;
  color: white;
  font-size: 35px;
}

.container>div.blue-rect>div.icon {
  margin-top: 10px;
}

.education {
  width: 60px;
  height: auto;
}

page[size="A4"] {
  position: relative;
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

@media print {
  body,
  page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">
  <div class="container">
    <div class="blue-rect">
      <div class="over-rect"></div>
      <span class="name">Name</span>
      <div class="icon">
        <img class="education" src="img/education.png">
      </div>
    </div>
  </div>
</page>