两个DIV一个在另一个之上而没有变形

Question

这是我的问题，我有两个<div>完全相同，一个在另一个之上，当我写一些东西时，那个在另一个之后。 ＆＃34;前进＆＃34; <div>向下移动。 （不容易解释抱歉）

这里的例子：

<div class="box1">TEXT THAT DEFORM box11 <div class="box11"></div></div>

CSS：

.box1
{
    width: 90%;
    height: 16vh;
    background-color: #fff;
    margin: auto;
    border: 1px solid #ddd;
}

.box11
{
    width: 100%;
    height: 100%;
    background-color: #eee;
    opacity: 1;
    background-image: url(../medias/box1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70% 50%;
}

由于

图片

这就是我想要的：

当我在第一个DIV上写字时会发生这种情况：

Answer 1

您需要这样做，将父级（box1）设置为position: relative，将子级（box11）设置为position: absolute。这样它就不会受到父文件中写入的文本的影响，因为它从流中取出并因此浮动在其内容之上。

要让position: absolute子项与其父项相关，父项还需要具有static以外的定位，在这种情况下，我使用了relative。

.box1
{
  position: relative;
  width: 90%;
  height: 16vh;
  background-color: #fff;
  margin: auto;
  border: 1px solid #ddd;
}

.box11
{
  position: absolute;
  left: 0;
  top: 0; 
  width: 100%;
  height: 100%;
  background-color: #eee;
  opacity: 1;
  background-image: url(../medias/box1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 50%;
}

<div class="box1">TEXT THAT DEFORM box11 <div class="box11"></div></div>