爲什麼這個div掩蓋了這個按鈕？

我想要一個div浮動在我的input旁邊，但是它在上面浮動，我不知道爲什麼。就好像div被設置爲使用絕對定位一樣。我想我可能只是忽略了一些愚蠢的東西，但它是什麼？爲什麼這個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仍然沒有在輸入旁邊浮動。

來源

2012-08-28 Joe

使用顯示：塊，而不是不透明度去除過渡，我猜你想保持。

進度條並不是「浮在頂部」，而是輸入在下面浮動。如果你浮動進度條，事情應該會好一點：http://jsfiddle.net/cjc343/sWrvU/24/

來源

2012-08-28 22:18:22 cjc343

我認爲它是浮動在頂部，因爲它阻止按鈕按下。 – Joe

是的，看着互動，「漂浮在上面」是有道理的，但是在CSS的「漂浮」意義上它被交換了;） – cjc343

我將其更改爲使用display而不是不透明度，因爲不透明度表示元素仍然存在，即使它是透明的。

CSS

input { 
    float: left; 
}  
#progress_bar { 
    margin: 10px 0; 
    padding: 3px; 
    border: 1px solid #000; 
    font-size: 14px; 
    display:none; 
    -moz-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    -webkit-transition: opacity 1s linear; 
    } 
    #progress_bar.loading { 
    display:block; 
    } 
    #progress_bar .percent { 
    background-color: #99ccff; 
    height: auto; 
    width: 0; 
    }

來源

2012-08-28 22:04:46

爲什麼這個div掩蓋了這個按鈕？

回答

相關問題