Menu
CSS code:
top:45;
left:98;
float:right;
position:absolute;z-index:2;
I have done the above coding for a floating div when I was working on 1024 resolution, but when I tested the same on a different resolution it's out of alignment.
How can we fix it?
663
If you are placing an element with absolute position, you need the base element to have a position value other than the default value. In your case if you change the position value of the parent div to 'relative' you can fix the issue.
As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice. Save this answer.
We can use CSS absolute positioning to overlap elements, but there's some advantages to using CSS grid instead.
If you position a flex item absolutely, it no longer participates in the flex layout. This means any flex properties on the item become moot. You can remove them if you like.
Absolutely positioned elements are positioned according to either a relatively positioned ancestor or the window. It sounds like in your case, it's being positioned in the window.
The way to fix this is to put your absolutely positioned <div> inside a relative container. That way, as the window changes size, it will stay in the correct spot:
<div style="position: relative">
<div style="position: absolute; left: 98px; top: 45px;">
This div will always be 98px from the left and 45px from the top of its parent .
</div>
</div>
None of the above solutions work for me... keep it on absolute position and give margin-top, margin-left...in %age like;
margin-top:10%;
margin-left:5%;
that will automatically adjust w.r.t. screen resolution...
this worked perfect for me. tested on different resolutions.
have a fun!
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
