Please refer to screen shot from
https://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=relative
I didn’t understand below
Where does left and top are getting applied to myDIV element
Is there a way to always show ruler instead of it showing when mouse over is done on that particular element ?
An element with position: absolute; is positioned relative to the nearest ancestor/parent element with a position. So if three levels up there is an element with position: relative; that element will be the one that the other elements positioning is based off of. This is in contrast to position: fixed which is positioned based on the browser viewport.
If you use the device mode and add Show rules they will be on no matter what.
Also, the Show rules option in device mode is independent of the Elements option found under the general preferences.
can you please explain wrt screenshot I have shared in original post ?
I know how absolute position works but didn’t understand how is it working wrt screenshot attached
If I wish to see in non-device mode, as I want to know how much margin, padding, width, height is getting applied without ruler it’s not possible.
Is there another trick or chrome extension for this purpose ?
e.g. wrt screenshot, I wish to know where does left: 10px has been applied and I am not getting that info
You can see the CSS for the red box is left: 10px; top: 100px;. This is relative to the nearest positioned ancestor element, which happens to also be position: absolute; in this case. You can see the effect of togging the positioning in my gif.
If you want to know which properties and what values are being applied to an element look at the Styles and Computed tabs in the dev tools. The ruler just shows you pixel width and height.
There are a bunch of developer tools extensions you can look at.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
