How to position text on top of an image (image is NOT background) one layer on top of another, Without using the combination "Parent - position: relative; descendant - position: absolute"?

  • 2
    but what does not like this combination? - Grundy
  • You can still use the pseudo-elements before and after, but there, too, positioning will be through absolute - Broouzer King
  • z-index && display:flex; - Air

2 answers 2

I can offer 2 solutions:

  1. Use negative indent for block with text.

    text

    div {max-width: 400px; } img {width: 100%; } .text {margin-top: -150px; color: #fff; }

    1. Use transform for block with text

.text {transform: translateY (-150px); }

    You can give the class the property "position: relative;" And then indicate the position relative to the current location. That is, "top: -30px;" - means that the element needs to be raised to the top by 30 pixels. Similarly, right, down, left.

     figure { width: 30%; text-align: center; font-size: smaller; text-indent: 0; } figcaption{ position: relative; top: -70px; color: #fff; } img.scaled { width: 100%; } 
     <figure> <p><img class=scaled src="https://media.archonia.com/images/samples/38/96/43896_s0.jpg" alt="St. Tropez"> <figcaption>Saint Tropez and its fort in the evening sun</figcaption> </figure>