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

Posted 2023-03-15

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

【英文标题】：Positioning a button on top of another item in css styled components

【发布时间】：2021-07-27 01:53:22

【问题描述】：

我试图让一个按钮重叠并定位在搜索栏的某个位置。这是它目前的样子。我尝试使用 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
                    
                    
                    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;

【参考方案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);

【讨论】：

感谢您的两个解决方案都有效。我尝试了这两种方法，但我更喜欢第一种解决方案。翻译元素似乎没有必要，当添加媒体查询或在较小的屏幕上时，它可能无法正常工作。