Positioning an image on top of text-CodePudding

How can I position an image on top text. Like in the image given

CodePudding user response：

Here is a basic example using flex. I put a border on the div so you can see exactly what the flex does. Also, for an example like this where you want the image to be directly over text, you have to lookout for default margins/padding. For example, the <p> element has a default margin which I set to 0.

.row {
  display: flex;
  flex-direction: column;
  border: solid 1px black;
  width: 200px;
  height: 80px;
  padding: 20px;
  background-color: #1e3f5a;
}


p {
  margin: 0; /* removes default p margin */
  text-align: center;
  font-size: 30px;
  color: white;
}

img {
  align-self: flex-end;
  margin-right: 1.5rem; /* optional */
}

<div >
  <img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending">
  <p>Dex Activity</p>
</div>

CodePudding user response：

You can also use the position css property for this, you can wrap these two tags with a div and use the css flex methods.

CSS Flex Example:

<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>

CodePudding user response：

There is more than one technique.

Here's one, borrowed from w3schools:

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      position: relative;
    }
    
    .topright {
      position: absolute;
      top: 8px;
      right: 16px;
      font-size: 18px;
    }
    
    img {
      width: 100%;
      height: auto;
      opacity: 0.3;
    }
  </style>
</head>

<body>

  <h2>Image Text</h2>
  <p>Add some text to an image in the top right corner:</p>

  <div >
    <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
    <div >Top Right</div>
  </div>

</body>

</html>