position: relative;

Hey everyone, I have div which has a padding on it, within that div I have an image. These are the styles

div {
  padding: 1rem;
}

img {
  width: 100%;
  position: relative;
  left: -16px;
  right: -16px;
}

div {
  padding: 1rem;
}

img {
  width: 100%;
  position: relative;
  left: -16px;
  right: -16px;
}

It seems like I can only use either left or right but not both.

6 Replies

NazCodelandOP•2y ago

It works with absolute, but I need the image to maintain it's size in the flow of the document

glutonium•2y ago

assume u r driving a car and I tell you, take left turn and a right turn at the same time.. will u be able to do it?? ofc not..cause your car can only turn one way at a time..not both at once so if u r telling the element to move to the left and move to the right at the same time.. it's obviously not going to work u can either say, move towards the right 16px or move towards the left 16px

NazCodelandOP•2y ago

how come it works with absolute when we tell it left: 0 and right:0

glutonium•2y ago

left 0 abd right 0 means don't mvoe towards the left nor towards the right with the same example, if i tell you, don't turn left nor right..will u be able to do it? yes u can and so does the element it left 0 right 0 will work for position relative as well

NazCodelandOP•2y ago

Perfect analogy, that makes sense to me. Thank you @ʙᴏᴏʙ 2.0

glutonium•2y ago

welcome

Gaming

Programming

position: relative;