Question

我试图创建一个带有一些基本文本元素的div。我的要求是div中的元素应该根据div对齐，因此我使用绝对定位，我的主div被定位为相对，并给它百分比值，以便它们可以在响应屏幕中工作。我甚至改变了媒体屏幕中的一些最低百分比。但是，在某些情况下，当屏幕尺寸改变时，一个文本块或div与另一个重叠。有没有办法在响应式屏幕中避免这种重叠。提前谢谢你：）

＆＃13;

.Heading{
  position:relative;
 }
.Heading h3{
  top:1%;
  position:absolute;
  left:0;
  right:0;
}
.Text{
    Position: absolute;
    top: 10%;
 }
.bottom-part{
  position:absolute;
  top:60%; 
}

＆＃13;

<div class="main">
  <div class="Heading">
    <h3>Heading part</h3>
  </div>
  <div class="Text">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="bottom-part">
    <h4>Here's the ending part</h4>
  </div>
</div>

＆＃13;

Answer 1

好的，我可以通过这样设置min-height来为您提供解决方案，以便轻松解决问题：

＆＃13;

.Heading {
  position: relative;
  min-height: 100px;
}
.Heading h3 {
  top: 1%;
  position: absolute;
  left: 0;
  right: 0;
}
.Text {
  Position: absolute;
  top: 10%;
}
.bottom-part {
  position: absolute;
  top: 60%;
}

＆＃13;

<div class="main">
  <div class="Heading">
    <h3>Heading part</h3>
  </div>
  <div class="Text">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="bottom-part">
    <h4>Here's the ending part</h4>
  </div>
</div>

＆＃13;

但你所做的事情完全不对。在这种情况下，您永远不应该使用position: absolute。相反，您需要对此类布局使用@media个查询。

避免与响应中的绝对定位重叠

1 个答案: