Question

我有2个Div，这两个Div都受absolute position条件限制。 First Div有top: 200px，第二个有top: 400px。然而令人惊讶的是，当我在具有不同屏幕尺寸的计算机中看到它们时，它们的相对位置看起来很不一例如，当我在笔记本电脑中看到它们时，它们似乎彼此更接近，而当我在宽屏桌面中看到它们时，它们看起来很远。

我想知道，因为我对两个Div都有position: absolute，不管我选择的屏幕大小，它们的相对位置是否应该相同？

无论屏幕大小如何，我需要做些什么才能使它们相对于彼此出现在同一位置？

两个Div的CSS详细信息

.one {
  margin: 0 auto;
  padding: 32px 0 0 0;
  background-color: rgba(248, 248, 255, 0.15);
  height: 140px;
  position: absolute;
  top: 134px;
  width: 100%;
  text-align: center;
}

.two {
  position: absolute;
  margin: auto;
  top: 237px;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  align-items: center;
}

感谢您的建议。

Answer 1

问题在于您使用bottom: 0作为第二个div，而不是高度。这意味着第二个div的底部将始终位于页面的底部，因此如果您调整它的大小，此div将与屏幕大小的高度成比例地变高。

要解决此问题，我删除了top，left和right定位，而是应用了height（就像在您的第一个div中）和{{1} 100％。

＆＃13;

width

＆＃13;

.one {
  position: absolute;
  margin: 0 auto;
  padding: 32px 0 0 0;
  background-color: pink;
  height: 140px;
  top: 134px;
  width: 100%;
  text-align: center;
}

.two {
  height: 100px;
  width: 100%;
  position: absolute;
  margin: auto;
  background-color: steelblue;
  top: 237px;
  text-align: center;
  align-items: center;
}

＆＃13;

Answer 2

在其他方面，无论屏幕尺寸如何都要看起来相同，您必须为底部div设置属性left=0，right=0和bottom=0，然后您可以使用不同的方式控制高度top值。这样做你可以使两个div的行为类似于具有绝对位置的块容器，它们的位置不会像相对一样相互移动。

        .one {
      margin: 0 auto;
      padding: 32px 0 0 0;
      background-color: red;
      height: 140px;
      position: absolute;
      top: 134px;
      left: 0;
      right: 0;
      bottom:0;
      width: 100%;
      text-align: center;
      border: 1px solid blue;
    }

    .two {
      position: absolute;
      margin: auto;
      top: 237px;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      align-items: center;
      background-color: green;
      border: 1px solid blue;
    }

        <div class="one">
        1
        </div>
        <div class="two">
        2
        </div>

Answer 3

这可以是一种解决方案。

*{box-sizing:border-box;}

.one {
  position: absolute;
  margin: 0 auto;
  padding: 32px 0 0 0;
  background-color: pink;
  height: 140px;
  top: 134px;
  width: 100%;
  text-align: center;
}

.two {
  height: 140px;
  width: 100%;
  position: absolute;
  margin: auto;
  background-color: steelblue;
  top: 274px;
  text-align: center;
  align-items: center;
}

<div class="one"></div>
<div class="two"></div>

另一个解决方案是将它们分成1个div，使得div绝对。

这样做的好处是你不必保持2个div的定位。只有父母就够了

* {
  box-sizing: border-box;
}

.parent {
  position: absolute;
  top: 134px;
  width:100%;
  left:0;
  right:0;
}

.one {
  margin: 0 auto;
  padding: 32px 0 0 0;
  background-color: pink;
  height: 140px;
  width: 100%;
  text-align: center;
}

.two {
  height: 140px;
  width: 100%;
  margin: auto;
  background-color: steelblue;
  text-align: center;
  align-items: center;
}

<div class="parent">
  <div class="one"></div>
  <div class="two"></div>
</div>

用绝对方案定位Div在浏览器中的位置

3 个答案: