1

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

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

4

2 回答 2

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;
}
于 2013-04-22T15:22:45.487 回答
0

如果您的两个元素的高度都未知（如果这是动态内容，则很有可能），那么 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

于 2013-04-22T15:28:48.280 回答