Позиционирование DIVs с CSS

Question

У меня есть два DIV внутри друг друга. Внутренний DIV содержит изображение. Я пытаюсь добавить плавающий текст над этим изображением в верхнем правом углу. Я не могу понять, как заставить этот текст использовать внутренние позиции DIV вместо внешнего.

Вот что я до сих пор

CSS:

html { 
    background: #EEF0F3; 
} 
.outer { 
    background: #FFFFFF; 
    border-radius: 4px 4px 4px 4px; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    margin: 0 auto; 
    padding:20px 0px; 
    position: relative; 
    width: 680px; 
    text-align: center; 
    margin-bottom: 20px; 
} 
.inner { 
    position: relative; 
} 
h2 { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 
h2 span { 
    color: white; 
    font: bold 24px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: rgba(255, 0, 0, 0.5); 
    padding: 0px 10px; 
} 

HTML:

<div class="outer"> 
    <div class="inner"> 
     <h2><span>Title 1</span></h2> 
     <img src="1.jpg"> 
    </div> 
</div> 

А вот код в JSFiddle

http://jsfiddle.net/UM8ea/

Если установить позиционирование на:

h2 { 
    position: absolute; 
    top: 20px; 
    right: -20px; 
} 

я получить желаемый результат, но чувствует, как временное решение, а не решение.

Answer 1

У вас возникло такое поведение, потому что .outer шире изображения, а затем .inner. h2 позиционируется как связанный с .inner, и направо.

Если вы установили .outer, чтобы иметь ширину 640 пикселей (как изображение), вы получаете desired result.

Other solution является установка margin: 0 20px; на .inner

Если вы хотите text positioned all top изображение, которое вы можете установить h2 {margin:0;} в обоих случаях.

Answer 2

Это очень простое.

Проверить это fiddle

.outer { 
background: #FFFFFF; 
border-radius: 4px 4px 4px 4px; 
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
margin: 0 auto; 
padding:20px 0px; 
position: relative; 
width: 680px; 
text-align: center; 
margin-bottom: 20px; 
} 

для h2

h2 
{ 
position: absolute; 
top: 5px; 
right: 20px; 
margin:0; 
}