将按钮定位在 css 样式组件中的另一个项目之上

Question

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

之前的原始位置

但这就是我想要的样子。

这是我的 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 元素时，按钮会移回其在转换之前的原始位置：translateX() 事件 我认为这是因为您更改了Button 中的 TRANSFORM 属性。

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 {
  outline: none;
  transform: translateX(-180%) scale(1.05);
}

将按钮定位在 css 样式组件中的另一个项目之上

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

css

css-position

jsx

reactjs

styled-components