Div Div移位

Question

我正在尝试在div上写一个div，而我却试图在div的行上找到正确的标题。有谁知道怎么做？

Answer 1

您可能有兴趣查看en元素的position。

例如，使用中间框作为＆＃39;中间＆＃39; div，以及此标题的displaced div;

＆＃13;

＆＃13;

.outer {
  margin: 0 auto;
  height: 400px;
  width: 80%;
  border: 5px solid red;
  position: relative;
}
.middle {
  height: 200px;
  width: 80%;
  border: 5px solid blue;
  
  /*centering the blue div to middle of the red box*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.displaced {
  font-size: 30px;
  
  /*needed to put the green div up onto the line*/
  position: absolute;
  left:50%;
  transform: translate(-50%, -50%);
  border: 2px solid green;
}

＆＃13;

<div class="outer">
  <div class="middle">
    <div class="displaced">
      this will be on the line
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有关详细信息，请阅读与此定位相关的w3c documents。

进一步阅读

• transform property，允许您使用这个＆＃39;翻译＆＃39;与定义了职位的父母有关的子元素（例如亲戚，或者在这种情况下，＆＃39;中间＆＃39; div的绝对位置）