I want a DIv on an image. I think it is something related to relative and absolute position logic.
I tried something here, but later I got stuck.
the anticipated result will look something like this.
I want a DIv on an image. I think it is something related to relative and absolute position logic.
I tried something here, but later I got stuck.
the anticipated result will look something like this.
I think I am able to fix this now →
Its good that you found a solution.
Please edit the first Codepen to represent the problem. Because its identical to the second (the solution).
Done! the only difference is this amount of CSS →
top: 10%;
left: 600px;
But I do not know if the final one has quality standards.
It’s a bit magic numberish.
Probably better to offset from the right rather than the left.
I tried right, but when the browser shrinks it creates more issues and will require more css for responsive width as compared to the left version.
I’d avoid magic numbers and do something like this:
(View on codepen for full width)
How does one typically use {position:relative} and {position:absolute} to position elements on a page?
You seem to have missed the relationship shown in Paul’s pen.
Hi there codeispoetrt,
the “position: relative” attribute needs to be applied
to the “parent element” rather than it’s sibling.
In this case it would be …
<div class="productbox">
coothead
Nice @coothead sir. See I fixed it. It is working nice now. I will also remember this now. I shifted one DIV
inside so the property actually worked.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.