Question

我想将h1和内盒放在外盒的左上角。

这是我的尝试，但失败了。我正在寻找一个免费的JavaScript解决方案。

.outer {
  position: absolute;
  margin: 50px;
  width: 300px;
  height: 300px;
  background-color: blue;
}
h1 {
  position: relative;
  top: 0;
  left: 0;
}
.inner {
  position: relative;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  background-color: red;
}

<div class="outer">
  <h1>
some text
</h1>
  <div class="inner">
  </div>
</div>

Answer 1

使用absolute代替relative定位。

＆＃13;

.outer {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: blue;
  margin: 20px;
}
h1 {
  position: absolute;
  top: 0;
  left: 0;
}
.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 0, 0, .5);
}

＆＃13;

<div class="outer">
  <h1>
some text
</h1>
  <div class="inner">
  </div>
</div>

＆＃13;

Answer 2

您希望对外框使用相对定位，对内框使用绝对定位。对于h1，确保它在内盒中，然后你可以使用填充而不是明确的宽度和高度。

https://jsfiddle.net/hnezfs3k/1/

<div class="outer">
  <div class="inner">
    <h1>
      some text
    </h1>
  </div>
</div>



.outer {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: blue;
}
h1 {
  color: #fff;
}
.inner {
  padding: 8px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 0, 0, .5);
}

Answer 3

position:absolute使用了错误。在您的情况下，为了使您的代码有效，请在position:absolute中从position:relative更改为.outer。

当你告诉某个元素使用postion:absolute时，它会将该元素从DOM中移出，它会查找最近的父position:relative。

注意：我不知道你在这个例子中使用position的原因，因为如果我需要对齐这些元素，这是我将采取的最后一个选项，你可以使用display:inline-block或display:flex进行游戏，以使您的元素正确对齐！

如何定位两个盒子以使它们对齐好？

3 个答案: