Ask coding questions

← Back to all posts
How to position an element from a spot other than it's center in CSS
Dunce (65)

How would I position an element from a spot other than it's center in CSS?
For example if I positioned an element something like this:

img {
position: absolute;

top: 50px;
left: 50px;
}

Than it would obviously position any <img> elements 50 pixels from the top of the screen, and 50 pixels from the left of the screen. But if I'm not mistaken it takes the position of <img> element from it's center, so really only the center of the element is 50 pixels from the top and 50 pixels from the left.
So I would like to position the left hand side of the element 50 pixels from the top and 50 pixels from the left of the screen, not the center.

Answered by notGilbert (121) [earned 5 cycles]
View Answer
Comments
hotnewtop
notGilbert (121)

Do you have any transform applied to the image, that may be causing the pivot to be moved to the center.

img {
  position: absolute; /* not recommended for most cases */
  top: 50%;
  left: 50%;

  transform: unset;
}