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
Mannix•11mo ago
you have width of 161px on your button but you move your span by 200px the math does not add up 😉
Lights
Lights•11mo 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
Mannix•11mo ago
it does move relative to the button you just move the span outside the width of the button
Lights
Lights•11mo ago
hi thanks for the help, my overthinking confused me here. its my first time here. how do I close this post?
Mannix
Mannix•11mo ago
add solved tag i think
Want results from more Discord servers?
Add your server