Positioning a button on top of another item in css styled components - css

Question

i am trying to get a button to overlap and be positioned at a certain place of a searchbar. Here is what it currently looks like. I tried using the transform: translateX() property but when I add a :hover element, the button gets moved back to its original position before the transform: translateX() event
But this is what i want it to look like.
Here is my css code. I'm using styled components.
const Button = styled.button`
display:block;
width:40px;
height:40px;
/* line-height:80px; */
border: none;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #0072FF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: translateX(-180%);
&:hover {
outline: none;
transform: scale(1.05);
}
`;
const Input = styled.input`
color: inherit;
border : none;
background: none;
padding-left: 10px;
width: 100%;
&:focus {
outline : none;
}
`;
const Form = styled.form`
background-color : white;
border-radius : 7px;
height: 5%;
width: 75%;
align-items: center;
display: flex;
transition: all .3s;
margin-left: 6%;
`;
const Img = styled.img`
height: 15px;
width: 15px;
margin-left: 10px;
`
And here are my components.
import React from 'react'
import NewChat from '../newChat/newChat';
import { Input, Form, Img } from './searchBar.elements';
function SearchBar() {
return (
<Form>
<Img src={require("../../../../assets/img/search.svg")} />
<Input placeholder="Find people and conversations" />
<NewChat />
</Form>
)
}
export default SearchBar;
import React from 'react'
import { Button} from './newChat.elements';
import plus from '../../../../assets/img/plus_button.svg';
function NewChat() {
return (
<div>
{/* <img src={require("../../../../assets/img/plus_button.svg")} /> */}
<Button>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z"
fill="currentColor"
/>
</svg>
</Button>
</div>
)
}
export default NewChat;

Answer 1

First for the i am trying to get a button to overlap and be positioned at a certain place of a searchbar maybe you should use position: relative on your father component (Form) and position: absolute on your Button, with that your father becomes a parameter for the absolute position of the button so you can use the properties Left, Top, Right, Bottom to get it to the correct location.
const Form = styled.form`
...otherProperties,
position: relative;
`;
const Button = styled.button`
...otherProperties,
position: absolute,
right: 180px // for example
top: 50px // example
`;
Second for the when I add a :hover element, the button gets moved back to its original position before the transform: translateX() event I think it is because you change the TRANSFORM property inside Button.
const Button = styled.button`
display:block;
width:40px;
height:40px;
/* line-height:80px; */
border: none;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #0072FF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transform: translateX(-180%); // Here the transform property is translateX //
&:hover {
outline: none;
transform: scale(1.05); // Here the transform property translateX now becomes scale //
`;
To correct this you need to make the hover property not lose the previous one.
&:hover {
outline: none;
transform: translateX(-180%) scale(1.05);
}