Question

我目前有这样的东西

<div class="mycol" id="mycanvas" style="z-index: -1; top:150px;left:240px;width:88%; height:80%; position: absolute;background-color:red;">
</div>

<div class="testclass">
  Hello World
</div>

我希望testclass的内容出现在mycol类的下面。我知道我可以做到这一点，那就是使它成为绝对值，除了可以告诉我mycol类何时结束的垂直开始以外的任何地方

Answer 1

您可以将testclass放在mycol内，然后像这样将position: relative; top: 100%;添加到testclass：

<div class="mycol" id="mycanvas" style="z-index: -1; top: 150px; left: 240px; width: 88%; height: 80%; position: absolute; background-color: red;">
  <div class="testclass" style="position: relative; top: 100%;">
    Hello World
  </div>
</div>

Answer 2

我认为将div.testclass保留在div.mycol下的要求不需要使用位置。

如果您能解释您要达到的完整要求，可以帮助所有人提供更好的解决方案。

<div style="height:200px;padding:50px;">
  <div class="mycol" id="mycanvas" style="width:88%; height:80%;background-color:red;">
  </div>

  <div class="testclass" style="margin-top:20px;">
    Hello World
  </div>
</div>

Answer 3

好吧，通过将mycol设置为position:aboslute，可以将其从页面的常规流程中删除。我们可以这样演示。

<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>

<div class="testclass" style="margin-left: 500px; height: 500px; width: 500px; background-color: black;"></div>

如您所见，testclass完全不受mycol位置的影响。

因此，在您的示例中，尽管我们可以看到红色框，但这并不影响“ Hello World”的位置。

如果我们想将文本移到其下方，则可以使用页边距，破坏常规流（使用位置）或将内容置于现有文本的后面，以最终将其强制置于其下方。

由于您指定了不想使用位置技术，因此我将使用边距来演示这一点。我们可以使用百分比，例如：margin-top: 80%，但这会产生一些奇怪的影响。 W3规定，使用百分比时，边距顶部会超出其容器的宽度，因此您不会从中受益很多。

无论如何，它都能回答您的问题！

<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>


<div class="testclass" style="margin-top:100%; background-color: gray;">
    Hello world
</div>

文本在绝对div下的位置

3 个答案: