Placing an Image to The Top Right Corner - CSS

Placing an image to the top right corner - CSS

You can just do it like this:

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

<div id="content">
    <img src="images/ribbon.png" class="ribbon" alt="" />
    <div>some text...</div>
</div>

css: how to position a X sign at the top right corner of the img element

You can use absolute position on the X sign and set its position with respect to the relatively positioned parent.

document.querySelector('.close').addEventListener('click', function() {  console.log('close');});

.wrapper {  position: relative;  display: inline-block;}.close:before {  content: '✕';}.close {  position: absolute;  top: 0;  right: 0;  cursor: pointer;}

<div class="wrapper">  <img src="https://www.google.com/images/srpr/logo11w.png" />  <span class="close"></span></div>

Align number over image to top right corner or on the top of image

Wrap the <img> and the <span> into a div. Then give the div the property and values of: position: relative; and width: min-content;. The first is needed to give a child element with position: absolute; an anchor/border. The width: min-content; is needed so that the div only uses up as much space as the image takes and not spanning the entire website width.

Last but not least, give the span element the properties and values of: position: absolute; top: x; right: y; give the as top and right a value of the distance to the image border you like.

.image-wrapper {
  position: relative;
  width: min-content;
}

.image-wrapper span {
  position: absolute;
  top: 5px;
  right: 5px;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/150.jpg">
  <span>5</span>
</div>

Position image in top right corner of a web page

This is what I did:

img {
    width: 400px;
    height: 400px;
    position: absolute;
    right:0;
    top:0;
}
div {
    position: absolute;
    left: 0;
    top: 150px;
    background-color: white;
    width: 80%;
}

Here is the JSFiddle demo

How to set an IMG on the top right corner of a Bootstrap card?

You are trying to move absolute image #hat by left attribute with absolute value 420px. If you would like to place it to right corner, you have to use left: 100% or right: 0. Also you want #santabox
to be relative.

---

Solution

I've set top and right attributes of #hat on 0 - which means I've placed it in the top-right corner. After that, I've applied transform: translate(50%,-50%); to move it by 50% of its own size (center it to the top-right corner) and I've made #santabox relative by setting position-relative class.

#hat {  width: 50px;  height: 50px;  position: absolute;  right: 0;  top: 0;  transform: translate(50%,-50%);  z-index: 100;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-2">  <div class="row justify-content-center">    <div class="col-md-7 col-lg-8 col-xl-7 mt-md-5">      <div id="santabox" class="position-relative">        <img id="hat" src="https://via.placeholder.com/50" alt="hat">        <div class="card mb-4">          <div class="card-header text-center">            <h3>              Text            </h3>          </div>          <div class="card-body">            <p>Text</p>          </div>        </div>      </div>    </div>  </div></div>

CSS Button to top-right corner of image (Gallery)

The close element it's positioning relative to the closest positioned ancestor, in your case the modal div instead of the modal-content (as you wanted).

I recomend you to wrap either the modal-content and close "button" in a (relative) div, like this:

<div class="modal" id="modal">
    <div id='modal-content' class='modal-content">
       <span class="close" id="close">✖</span>
       <img> //make img height/width to 100%
    </div>
</div>

This should position the close button in the top-right position of the absolute div and the image inside this div.

If the close button doesn't appear, make sure it has a higher z-index than the image.

I made a codepen: https://codepen.io/jpaulet/pen/RwGxpxy

Image in top right of other image?

The answer of @TheMaleBeyonce is right. with your current layout, you should make sure this div element is just used to surround the outer image, and make sure the width of the div is equal to the outer image.

Suppose the width of outer image is 200px, the right code as below:

<style>
.wrap {
  position: relative;
  width: 200px;
}

.inner {
  position: absolute;
  top: 0;
  right: 0;
}
</style>

<div class="wrap">
  <a href="https://example.com">
    <img src="image.png">
  </a>
  <a class="inner" href="https://example2.com">
    <img src="logo.png">
  </a>
</div>

the demo

Image in the top right corner of the table using css

If you set the position of a container element to relative, you can move an element whose position is absolute based on the bounds of the container element.

table, th, td {
  border: 1px solid;
}

.container {
  position: relative;
}

.div-img {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 100%;
}

<div>Some text</div>
<div>Some more text</div>
<div class="container">
    <table style="width:100%">
      <thead>
        <th>Column 1 </th>
        <th>Column 2 </th>
        <th>Column 3 </th>

      </thead>
      <tr>
          <td>Col_1_1</td>
          <td>Col_1_2</td>
          <td>Col_1_3</td>
      </tr>
      <tr>
          <td>Col_2_1</td>
          <td>Col_2_2</td>
          <td>Col_2_3</td>
      </tr>
      <tr>
          <td>Col_3_1</td>
          <td>Col_3_2</td>
          <td>Col_3_3</td>
      </tr>
    </table>

    <div class="div-img">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA90RVh0VGl0bGUAU2hvdztFeWU7SeMHJQAAAf1JREFUeF7tVjFrwkAYNf4JB2c3J+nf6OaYxdU/UVrsZAfByVGxQ8cgYhGSsXRoRHTIWi0VpJHSSrGg9Ou9cgeHueTSZCiFfPAg+L33vhdzuVyOiP4U/ytAFiAL0Gw2TxguGWyGZ4ZPgF/b6HFOToFEASDMM5gMcwaKiTnX5NMEgKjM4ArjXq9HjuPQYrGg7XZL+/0ewDV+Qw8cOQi05SQBIKgz7GDU7/dpOp1S3AIXGmi5Rz1uAAw2GFAEjEYjkuvlbUfW/SOdXT+QeeVQVEErfLinESdAS4g8zyO5vKdXatxM6PTiVoA0BQ85RCsqAIbXBHm1WgXuXAyXEaPgJYeoqQJgeJHhA6TZbHbsgb8dAwOIW/CEN59RVAXogDAYDFR6PPM0AQB4ixAdVYANmr7vq7RYcGkDwFsE2KgC+Giu12tNAD3AVRS8RQBfFaCNpmVZmkegB7iKgrcI0FYFKDC8gzAejyMWoR7gHhc84c1nFMJewyrDF4jL5VLzGqoBDrhywQue3Luq24ganIwtVbMRBYaDE9iWhR+8NTthMMRwOKTD4RC2FQO4xm/ynUMDbcRw/cfIFGui2+2S67oUs8CFRn7mZtLPcYnhDkYiiG3bYZ9j9OTBxLWltAcSgy/OCUxjYsI1RvIDiTpMheE84kiGXuU3R7LsVJwFyAJ8A1C9Ckk935p4AAAAAElFTkSuQmCC" />
    </div>
</div>

Put img tag inside the top right corner of a div

Make the container position:relative

Make the image position:absolute;right:0px;

how to place button on top right corner of image

Though there are many ways, a simple solution would be to give the buttons a z-index property.

.delete-image {
z-index :1;
}

---

Related Topics