Question

我有两个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>

通过使用上面的代码我完全解决了我的用例。感谢大家给出答案

Answer 1

以下是两个解决方案：

你知道上层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;
}

Answer 2

如果您的两个元素都具有未知高度（很可能是动态内容），那么Flexbox将允许您重新排序元素。

http://tinker.io/aa4b2

#outer {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

#lower {
  -moz-box-ordinal-group: 2;
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

缺点是对Flexbox的支持相当低。这适用于Chrome，Firefox，Opera，Safari和IE10。 http://caniuse.com/#feat=flexbox

将一个div标记对齐另一个标记

2 个答案: