html - float 内の絶対位置とのオーバーフロー競合

Question

フロートされた要素のグループ「値」を含む、overflow: auto を持つ「コンテナ」があります。「値」内には、オーバーフローによって切り取られる絶対配置要素「ポップアップ」があります。「ポップアップ」を表示させながら、「コンテナ」のレイアウトが失われないようにするにはどうすればよいですか?

HTML

<div class="container">
  <div class="group">
    <span class="label">Label</span>
    <span class="value">
      <span class="popup_container">
        <div class="popup">Popup</div>
      </span>
    </span>
  </div>
  <div class="group">
    <span class="label">Label</span>
    <span class="value">
      <span class="popup_container">
        <div class="popup">Popup</div>
      </span>
    </span>
  </div>
</div>

CSS

.container {
    overflow: auto;
    background-color: red;
}
.label {
    float: left;
    clear: left;
    width: 100px;
}
.value {
    float: left;
}
.popup_container {
    position: relative;
}
.popup {
    position: absolute;
    height: 200px;
    width: 200px;
    background-color: orange;
}

http://jsfiddle.net/KA7AB/2/をご覧ください

ありがとう

Answer 1

popup_container を絶対に設定します。

position: absolute;

http://jsfiddle.net/KA7AB/6/