1

以下のように2つの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

ここに2つの解決策があります：

あなたは上の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 に答える