요소로 상대적으로 CSS 오버레이합니다.

Question

트위터 부트 스트랩을 사용 중이며 오버레이를 표시하기 위해 오버레이를 만들고 싶습니다. 예를 들어 패널 본문 또는 웰 본문은 텍스트 "로딩"또는 이미지를 채우고 가운데에 맞 춥니 다.

여기 jsfiddle 애플리케이션을 만들었습니다.

<div class="col-md-5"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      Header 
     </div> 
     <div class="panel-body"> 
      Body 
      <div class="loading-overlay">Loading</div> 
     </div> 
    </div>  
</div> 

<div class="well"> 
    Well Body 
    <div class="loading-overlay">Loading</div> 
</div> 

.loading-overlay{ 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    position:absolute; 
    background-color:rgba(0, 0, 0, 0.65); 
    color: white; 
} 

부 오버레이가 모든 페이지를 채우고 있습니다. 그러나 그것은 잘 요소 또는 패널 본체 만 채우 길 원합니다. 또는 다른 요소를 넣으면됩니다.

샘플 code is here.

top:0; 
left:0; 
right:0; 
bottom:0; 
position:absolute; 

가로 변환됩니다 : 때문입니다

Answer 1

페이지에 가능한 모든 장소를 가져 가라.

위치를 relative으로 변경하거나 처리 방법을 변경할 수 있습니다.

Answer 2

각 섹션에 대해 별도의로드 오버레이를 표시하려면 상위 컨테이너를 기준으로 클래스를 추가하십시오. 여기에 수행 할 작업을 http://jsfiddle.net/0r7ytrk1/5/

Answer 3

상대 위치로 컨테이너 요소를 설정 : 여기

.panel-body, .well{ 
    position:relative; 
} 

는 바이올린입니다. http://jsfiddle.net/3er5qjgt/

Answer 4

: 여기

.panel-body { 
    position: relative; 
} 

.well { 
    position: relative; 
} 

바이올린입니다 : 모두 .panel 몸과 여단입니다 이후이 경우

는 다음과 같은 규칙을 추가한다 할 일은 오버레이를 포함하도록되어있다

.well, .panel-body { 
    position: relative; 
} 

JSFiddle Demo : 부모님 상대을 확인

.