.style.left="40%"; does not work in javascript

[bfaist15]

document.getElementById("buttonNextPage").style.left="40%"; does not work!

HTML:

<footer id="buttonNextPage">
  <a href="#contact" class="button style2 down">More</a>
</footer>

CSS:

#buttonNextPage {
    position: absolute;
    bottom: 10px;
    left: 50%;
}

JS:

document.getElementById("buttonNextPage").style.left="40%";

I don’t know where the problem is. Thank you for your help!

[coothead]

Hi there bfaist15,

and a warm welcome to these forums.

Your code, as presented, works OK for me.

This suggests that there must be something
else in the full code that is the problem.

coothead

[Pegrew]

I do not see where you add position: relative; You have to do that (to parent element) so the absolute positioned elemtent to work.

[PaulOB]

@Pegrew

You have to do that (to parent element) so the absolute positioned elemtent to work.

That’s not quite right as the absolute element will still work fine but takes its co-ordinates from the viewport (or nearest ancestor with position other than static applied). Of course usually you would need a parent with position:relative applied if you want to use the parent as the positioning context.

For the demo above it will not affect the problem the OP is trying to debug and as mentioned by coothead the code shown is working ok anyway.