이 div가 왜이 버튼을 가릴까요?

div가 내 input 옆에 뜨기를 원하지만 대신 위에 떠 다니는 이유가 확실하지 않습니다. div가 절대 위치 지정을 사용하도록 설정된 것과 같습니다. 나는 아마 바보 같은 것을 간과 할 것 같지만 그게 무엇인가?이 div가 왜이 버튼을 가릴까요?

HTML :

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

CSS : 읽기 파일을 기반으로 http://jsfiddle.net/sWrvU/ 는 http://www.html5rocks.com/en/tutorials/file/dndfiles/

의 주석 clear:both이 볼 수 HTML5ROCKS에 데모 : 여기 예를

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; 
    }

데모가 실제로 작동합니다 (즉, 데모가 없기 때문에 버튼을 누를 수 있습니다. 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가 왜이 버튼을 가릴까요?

답변

관련 문제