[HTML] 절대 위치가있는 CSS Float

당신의 절대적인 위치는 문제가 아닙니다. 당신은 <h2>100 % 페이지의 폭 그것의 부모의 폭의 100 %입니다. 를 .image사용하여 표시 inline-block하면 이미지의 너비 만 차지 <span>하며 헤더 내에서를 정렬 할 수 있습니다 .

.image { 
    position: relative;
        display:inline-block;
        }
        
        h2 { 
            position: absolute; 
                top: 160px; 
                    right:0;
                        width: 100%;
                            text-align:right;
                            }
                            

JSFiddle

-------------------

예, 사용 position:absolute;하고 설정 right:0px;하거나 원하는대로 오른쪽 간격을 둡니다 ..

-------------------

이 스페이서 스팬을 사용하라는 조언은하지 않습니다. 시각적으로 염두에두고있는 것을 얻기 위해 패딩이나 여백을 사용하기 만하면됩니다.

.image { 
  position: relative; 
    width: 500px;
      padding-top: 160px;
      }
      .image h2 {
        position: relative;
          right: 0;
          }
          .image img { 
            position: absolute; 
              top: 0; 
                left: 0;
                  z-index: -1;
                  }
                  .image h2 span { 
                    color: white; 
                      font: bold 24px/45px Helvetica, Sans-Serif; 
                        letter-spacing: -1px;  
                          background: rgb(0, 0, 0); /* fallback color */
                            background: rgba(0, 0, 0, 0.7);
                              padding: 10px; 
                                float: right;
                                  clear: right;
                                  }
                                  

http://fiddle.jshell.net/ZQK9x/13/

http://fiddle.jshell.net/ZQK9x/13//show/

-------------------

ur 요구 사항을 얻는 것 같지 않습니다.

이게 당신이 원하는 건가요?

h2 {
     position:absolute;
          top:10px;
               width: 100%;
                    border:1px solid red;
                         text-align:right
                          }
                          

반대 투표 후

이것이 당신이 필요로하는 것입니다

첫째 : 대신 CSS에 태그를 .image사용 img하십시오.

img {
     position: relative;
          width: 100%;
               /* for IE 6 */
                }
                

두 번째 : 자식 차원을 백분율로 설정하는 경우 부모도 설정했는지 확인하십시오. body,html이 경우에는

body,html{
     width: 100%;
         height:100%
         }
         

출처
https://stackoverflow.com/questions/22050241