如何设置容器元素可滚动与溢出为某些元素可见？

Question

我想显示在父容器外浮动的元素。但是，容器元素有很多其他控件。所以，我已经设置了css属性overflow:auto并修复了高度以使容器可滚动。但是，我希望浮动元素甚至可以在容器上看到。

在代码段中运行以下代码以了解问题。

我希望你明白。

div.container{  
  height: 100px;
  position: relative;  
  background: #e4f0f5;
  border: 1px solid #aaa;  
}
div#float{
  background: #d4dde4;
  position: absolute;
  color: blue;
  width: 200px;
  height: 100px;
  padding: 10px;
  left: 50px;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

<strong>Start</strong>
<br /><br />
<div class='container' style="overflow: visible;">
  <label> Field 1 :</label><input type="text"><br/>
  <button id='modal'>
  <strong>Click Here</strong>
  </button><br />
  
    <div id='float'>
        <strong>This floating element looks OK.</strong>
    </div>
  
  <label> Field 4 :</label><input type="text"><br/>
  <label> Field 5 :</label><input type="text">
</div>
<br/><br/>
<br/><br/>
<br/><br/>
<div class='container' style="overflow-y: auto;">
  <label> Field 1 :</label><input type="text"><br/>
  <button id='modal'>
  <strong>Click Here</strong>
  </button><br />
  
    <div id='float'>
        <strong>But, this is not. It should overflow from the container</strong>
    </div>
  
  <label> Field 4 :</label><input type="text"><br/>
  <label> Field 5 :</label><input type="text">
  <label> Field 6 :</label><input type="text"><br/>
  <label> Field 7 :</label><input type="text">
  <label> Field 8 :</label><input type="text"><br/>
  <label> Field 9 :</label><input type="text">
</div>

<br/>
<br/>
<br/>
<strong>End Of Page</strong>