CSS, как изменить переполнение родительского элемента?

Question

Как я могу разместить div на элементе img? Также я хотел бы сделать это немного снаружи.

У меня есть что-то вроде этого:

<div class="slide"> 
    <div class="arrow"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque ex eget ultricies blandit.</p> 
    </div> 
    <img src="http://boallen.com/assets/images/randbitmap_true.png"> 
</div> 

А вот мой стиль CSS:

.arrow { 
     max-width: 300px; 
     background-color: #FAFAFA; 
     position: absolute; 
    } 
    .arrow:after { 
     left: 100%; 
     bottom: 0px; 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     pointer-events: none; 
     border-width: 15px; 
     border-bottom: 30px solid #FAFAFA; 
     border-right: 30px solid transparent; 
    } 

Так как я могу это сделать? поместить мой указатель стрелки на изображение немного снаружи? и я не хочу устанавливать изображение в качестве фона, мне нужно, чтобы он находился в теге img.

@update

держать в Minde я не хочу, чтобы изменить стиль .slide элемента. и у меня есть overflow: hidden;, так как сделать мой элемент arrow не скрытым?

проверить его здесь: http://jsfiddle.net/pyx3zx25/9/

как изменить переполнение родительского элемента?

Answer 1

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

.arrow { 
      max-width: 300px; 
      background-color: #FAFAFA; 
      position: absolute; 
      top:200px; 
      left:100px; 
} 

вы можете добавить топ: 10px; Слева: 0px; Я думаю, что эти значения дадут вам желаемый результат

Answer 2

Просто используйте «отрицательное значение» сверху и влево.

.arrow { 
 
      max-width: 300px; 
 
      background-color: #FAFAFA; 
 
      position: absolute; 
 
      top:-10px; 
 
      left:-10px; 
 
     }

Answer 3

Вы можете попробовать.

.slide{ 
     position: relative; 
     height: 521px; 
     width: 521px; 
    } 

    .arrow { 
      max-width: 300px; 
      background-color: #FAFAFA; 
      position: absolute; 
      top:40%; 
      left:20%; 

    } 

Update