javascript - 将一个 div 标签对齐到另一个标签下方

<分区>

我有两个div标签如下

<div id="outer">
    <div id="lower">hi</div>
    <div id="upper">i m on top</div>
</div>

我想先显示上部的div，然后显示下部的div，但我无法更改HTML 中的声明顺序。

我正在使用以下 CSS

#outer{
    position:relative;
}
#upper{
    position:absolute;
    top:0;
}

但上层与下层重叠。

更新

我按照以下方式解决了这种情况，因为它不会影响设计

<html>
  <body>
    <div id="visible"></div>
    <div id="bottom">displayed in second line</div>
    <div id="top" style="display:none;">
      displayed in first line
    <script>
      document.getElementById("visible").innerHTML=document.getElementById("top").innerHTML
      </script>
    </div>
  </body>
</html>

通过使用上面的代码，我完美地解决了我的用例。感谢大家的解答

最佳答案

这里有两种解决方案:

你知道上部 div 的高度:

#outer {
    position: relative;
}
#lower, #upper {
    position: absolute;
    left: 0;    
}
#lower {
    top: 40px; /* upper div's height */
}
#upper {
    top: 0;
    height: 40px;
}

你知道外部 div 的高度:

#outer {
    position: relative;
    height: 300px;
}
#lower, #upper {
    position: absolute;
    left: 0;
}
#upper {
    top: 0;
}
#lower {
    bottom: 0;
}

关于javascript - 将一个 div 标签对齐到另一个标签下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16150272/

上一篇：html - INPUT 自动填充剩余的容器宽度

下一篇：html - 添加与正文大小相同的元素时显示滚动条

相关文章：

html 和 css 背景 url 图像压缩

CSS - 有没有办法在单击链接后摆脱选择矩形？

javascript - 显式声明 "movement"和 "movement.endPosition"？

javascript - 模态主体未出现在 Bootstrap 模态中

javascript - 滚动时模糊单个 div？

html - 纯 HTML 和 CSS 汉堡包菜单不起作用

javascript - 将字符串匹配到数组

javascript - REACT - 使用多个数组迭代 Json 对象

javascript - TypeScript 模态窗口

html - 使用 BEM 命名方法编写 CSS 时如何实现主题？