When clicked, absolute-positioned link loses positioning and link isn't followed

[mpavey]

I’m trying to add a button to an existing webpage. I’ve added it as an a element, since it is just a link to another page. The way the positioning of the surrounding elements is currently handled (not coded by me!) is a little strange: within a containing div, there is an h1 element styled to be a tall, wide box and containing only a little text; and there is a form, within a div positioned absolutely to appear within the box styled by the h1 element.

So, my approach was to add the a element immediately beneath the h1 element in the HTML, and use absolute positioning on it to place it inside the h1 box, in the same way as the existing form elements. This works fine, except when you come to click on it. When the mouse button is down, it loses its absolute positioning and appears beneath the h1 box. What’s more, the link isn’t followed — when you release the mouse button (in both Firefox and Chrome), the button returns to its original position and nothing more happens!

I’ve tried to recreate it in this CodePen without including the entirety of the page (nav bar, breadcrumb, footer). But it is behaving as expected in CodePen. Can anyone point me in the right direction?

[mpavey]

OK, I realized the way to debug this was to use the options to toggle pseudo-states to make the element active. Sure enough, that revealed that there was some styling of active links setting position: relative and top: 1px. For statically positioned elements this has the intended effect of moving them one pixel down while they are being clicked on… but for elements that are absolutely positioned, of course it has the effect of moving them to one pixel down from where they would have appeared had they originally been statically positioned!

I’ve updated the CodePen in case anyone’s curious to see it for themselves.

The thing I still find surprising is that the link is not followed. It seems this must be because the link is no longer under the mouse by the time the mouse button is released. (Selecting the link with the mouse by right-clicking then hitting the Escape key, and then hitting Enter, does follow the link.)

[Author]

Posts