0

Given the following example, https://jsfiddle.net/mzv4nxo8/,

I want to position the image in the top right corner over the div rectangle, like I've shown in the example. This works fine as long as the div container does not overflow.

However, when you start scrolling, the image moves as well since the image is set to position: absolute. I want it to stay "anchored" to its initial position (i.e. before you start scrolling). The text inside the div rectangle needs to stay in the center position.

How do I accomplish that?

v3gard
  • 176
  • 2
  • 12
  • Code related questions must contain the code always directly inside the question (ctrl + m). You may not just link to a fiddle. If the fiddle link changes/removed or the fiddle content changes, the question would hold no further value for the SO community. – tacoshy Feb 11 '21 at 18:37

1 Answers1

1

position: absolute positions the element according the the closest parent that has the position property different from the default value static.

Add this to your css and it will work

div {
  position: relative;
}

I guess you can also use your .content selector

Gunther
  • 1,297
  • 9
  • 15
  • Thanks. That worked! I added it to my .content selector instead of the global div container. – v3gard Feb 11 '21 at 18:43
  • @v3gard You're welcome! if that solves it accept the answer so people can see this question has been solved alredy. – Gunther Feb 11 '21 at 18:54