The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design CSS button not displaying in correct position in Chrome

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #280499

    I have the following CSS for a button, but when viewing in Chrome they appear all in the top left corner.

    .btn1 {
    position: absolute;
    top: 150px;
    left: 15%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: white;
    color: white;
    font-family: “Quantico”;
    font-size: 24px;
    padding: 10px 10px;
    cursor: hand;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 16px 0 rgba(10,0,0,0.2), 0 6px 20px 0 rgba(10,0,0,0.19);

    what am I missing, I have tried various webkit and display hacks without success.


    You might want to expand on the code (show an example in Codepen or post a link at least). When none of the parents has position: relative, the button will end up at positioned relative to the screen. It seems unlikely to be an isolated Chrome issue based on what’s currently provided.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design’ is closed to new topics and replies.