Div on an image

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).

2 Likes

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.

2 Likes

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.

https://s3.amazonaws.com/sitepoint007/_left.gif

I’d avoid magic numbers and do something like this:

(View on codepen for full width)

3 Likes

I used your method on the live HTML. Looks like I am missing something.
Live Link Here.

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.

1 Like

Please see this.

Hi there codeispoetrt,

the “position: relative” attribute needs to be applied
to the “parent element” rather than it’s sibling. :eek:

In this case it would be …

    <div class="productbox">

coothead

3 Likes

Nice @coothead sir. See I fixed it. It is working nice now. :+1: 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.