CODEWITHSUNDEEP
csscss-position
Sambhav Gore
Sambhav Gore

Reputation: 565

Place an icon to top-right of an absolutely positioned image

I saw many similar questions and answers but nothing is same as what I am trying to achieve.

Here is my HTML:

<div class="container">
  <div class="inner">

    <div class="image-container">
      <img src="http://fpoimg.com/600x300" alt=""/>
      <a href="" class="close-link">x</a>
    </div>

    <div>image name</div>
    <div>id: 123456</div>
</div>

and CSS:

  * {
    font-family: sans-serif;
  }
  .container {
    position: relative;
    border: 1px solid;
    width: 500px;
    height: 500px;

  }

  img {
    max-height: 100%;
      max-width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }

  .close-btn {
    position: absolute;
    background: red;
    padding: 4px 8px;
    border-radius: 50%;
    color:white;
    text-decoration: none;
  }

See the jsfiddle here - https://jsfiddle.net/61afw70q/10/

What I need to do is place the red cross button to top-right of the IMAGE. Note - i don't want to place it to top-right of container. I want it for the image. Every image will be different in size. Image centers within the container.

This is highly stripped down version of my entire page.

Upvotes: 1

Views: 609

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

You don't really need the inner div...you have the image in a container and so there is no need to position the image either.

* {
  font-family: sans-serif;
}
.container {
  position: relative;
  border: 1px solid;
  width: 500px;
  display: flex;
  padding: 15px;
  flex-direction: column;
}
.image-container {
  position: relative;
  display: inline-block;
}
img {
  max-height: 100%;
  width: 100%;
}
.close-btn {
  position: absolute;
  background: red;
  top: 4px;
  right: 4px;
  padding: 4px 8px;
  border-radius: 50%;
  color: white;
  text-decoration: none;
}
a.close-link {
  position: absolute;
  background: red;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  top: 4px;
  right: 4px;
}
<div class="container">

  <div class="image-container">
    <img src="http://fpoimg.com/600x300" alt="" />
    <a href="" class="close-link">x</a>
  </div>


  <div>image name</div>
  <div>id: 123456</div>
</div>

Upvotes: 1

Related Questions