Need help in positioning button elements.

This is my simple html here:

<body>
    <button>
        <span></span>
    </button>  
</body>

<body>
    <button>
        <span></span>
    </button>  
</body>

and here is my CSS code:

button{
    background-color: rgb(255, 154, 154);
    border-radius: 22px;
    width: 100px;
    height: 48px;
    border: 0;
    position: relative;


}
button span{
    background-color: rgb(0, 0, 0);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;

    left: 200px;
}

button{
    background-color: rgb(255, 154, 154);
    border-radius: 22px;
    width: 100px;
    height: 48px;
    border: 0;
    position: relative;


}
button span{
    background-color: rgb(0, 0, 0);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;

    left: 200px;
}

In this code I'm basically trying to do align the button (button span) inside the button by using relative and position but for some reason, and I wanna use left and right property in it but when I use it. It does work but it moves left and right taking body as its parent element and not the button. Even though I've set the button to relative and buttons span: absolute.

5 Replies

Mannix•6mo ago

you have width of 161px on your button but you move your span by 200px the math does not add up 😉

Lights•6mo ago

hi thanks for answering, I was wondering why the button span isn't moving relative to button but it's moving relative to the body. meaning, it's outside the button span and inside the body.

Mannix•6mo ago

it does move relative to the button you just move the span outside the width of the button

Lights•6mo ago

hi thanks for the help, my overthinking confused me here. its my first time here. how do I close this post?

Mannix•6mo ago

add solved tag i think

Gaming

Programming

Need help in positioning button elements.