css - 为什么这个 div 遮盖了这个按钮？

Question

我想让一个 div float 在我的 input 旁边，但它却 float 在它上面，我不确定为什么。就好像div被设置为使用绝对定位一样。我想我可能只是忽略了一些愚蠢的东西，但它是什么？

html:

<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>​

CSS:

input { float: left;}

#progress_bar {
  margin: 10px 0;
  padding: 3px;
  border: 1px solid #000;
  font-size: 14px;
  //clear: both;
  opacity: 0;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  }

#progress_bar.loading {
    opacity: 1.0;
  }

#progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  } ​

我这里有一个例子: http://jsfiddle.net/sWrvU/这是基于 html5rocks 上的读取文件演示 http://www.html5rocks.com/en/tutorials/file/dndfiles/

取消注释 clear:both 以查看演示实际工作(即您可以按下按钮，因为它上面没有 div)，但显然 div 仍然没有 float 在旁边输入。

Answer 1

使用 display: block 而不是 opacity 会删除过渡，我猜你想保留它。

进度条并不是“漂浮在上面”，而是输入漂浮在下面。如果你也 float 进度条，事情应该会好一点:http://jsfiddle.net/cjc343/sWrvU/24/