在 css 样式的组件中将按钮放置在另一个项目的顶部

Question

我试图让一个按钮重叠并定位在搜索栏的某个位置。这是它目前的样子。我尝试使用 transform: translateX() 属性，但是当我添加一个 :hover 元素时，按钮会移回它在 transform: translateX() 事件之前的原始位置

但这就是我想要的样子。

这是我的 CSS 代码。我正在使用样式化组件。

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;
`

这是我的组件。

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

首先对于 我试图让一个按钮重叠并定位在搜索栏的某个位置也许你应该在你的父组件上使用 position: relative (Form) 和 position: absolute 在您的 Button 上，您的父亲将成为按钮绝对位置的参数，因此您可以使用Left、Top、Right、Bottom 属性将其放置到正确的位置。

const Form = styled.form`
  ...otherProperties,
  position: relative;
`;

const Button = styled.button`
    ...otherProperties,
    position: absolute,
    right: 180px  // for example
    top: 50px // example
`;

第二个当我添加一个 :hover 元素时，按钮被移回它在 transform: translateX() 事件之前的原始位置 我认为这是因为你改变了 TRANSFORM 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 //
`;

要更正此问题，您需要使 hover 属性不会丢失之前的属性。

&:hover {
  outline: none;
  transform: translateX(-180%) scale(1.05);
}