html - 複数の子 DIV を重ねて表示する

Question

同時に複数の値を表示する進行状況バーがあります。例は次のようになります。

私はしたくない：

• 微調整する（のようにmargin-top: -20px）
• ベンダー プレフィックスを使用する (などdisplay: -webkit-inline-box;)

html:

<div id="progress">
  <div id="progress-buffer"></div>
  <div id="progress-time"></div>
</div>

CSS:

#progress {
  background: #333;
  height: 20px;
  width: 300px;
}
#progress-buffer {
  background: orange;
  width: 50%;
  height: 100%;
}
#progress-time {
  background: green;
  width: 25%;
  height: 100%;
}

jsfiddle の例

Answer 1

少し前に、あなたのような質問に答えました: https://stackoverflow.com/a/12186027/1529630

デモ: http://jsfiddle.net/VeJNt/5/

HTML:

<div id="loading_bar">
    <div id="buffer" style="width:40%"></div>
    <div id="progress" style="width:0.5%"></div>
    <!-- You can add as much as you want, but they
         must be sorted from wider to shorter  -->
</div>

CSS:

body {
  margin: 5px;
}

#loading_bar {
  border:1px solid #222;
  border-radius:7px;
  background-color:#666;
  width:660px;
  overflow:hidden;
  height:8px;
}

#buffer, #progress {
  border-radius:7px;
  height:100%;
  width:0%;
}

#buffer {
  box-shadow:1px 0 8px #000;
  background-color:#0474C0;
}

#progress {
  box-shadow: 0 0 8px #000;
  background-color:pink;
  margin-top:-8px;
}

Answer 2

これはどうですか、すでに持っているものに追加してください。

#progress
{
    position:relative;
}

#progress-buffer, #progress-time 
{
    position:absolute;
}

最初position:relative;は、後続position:absolute;が に対して相対的であることを確認し#progressます。

これがjsFiddleです。

Answer 3

最も簡単な方法は、float: left; を追加することです。親の子 div のそれぞれに。これにより、必要な「スタッキング」が得られます。