代码之家 › 专栏 › 技术社区 › Rajeshwar

将文本定位在绝对分隔符下

css

Rajeshwar · 技术社区 · 7 年前

我现在有类似的东西

<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 班级。我知道我可以通过使它绝对化来做到这一点,除了我可以告诉它垂直开始的时间之外,还有其他地方吗? 麦科尔 类结束

3 回复 | 直到 7 年前

Ethan Arti Singh 7 年前

你可以放 testclass 里面 mycol 并添加 position: relative; top: 100%; 到 测试类 这样地:

<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>

Ronit Mukherjee 7 年前

我认为保持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>

karafar 7 年前

嗯,通过制作 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 完全不受 麦科尔 的位置。

所以,在您的示例中,虽然我们可以看到红框,但它并不影响“你好世界”的位置。

如果我们想将文本移到它下面,那么我们可以使用页边距,扰乱正常的流程(使用位置),或者将内容放在现有文本后面,最终迫使它移到它下面。

既然您指定了不想使用位置技术,那么我将使用页边距来演示这一点。我们可以使用百分比,例如: 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>

推荐文章