时间戳

首页 > 解决方案 > 在 css 样式的组件中将按钮定位在另一个项目的顶部

css - 在 css 样式的组件中将按钮定位在另一个项目的顶部

问题描述

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

标签： cssreactjsjsxcss-positionstyled-components

解决方案

首先，我试图让一个按钮重叠并定位在搜索栏的某个位置，也许你应该在你的父亲组件（Form）上使用position: relative和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() 事件之前被移回原来的位置，我认为这是因为您更改了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);
}

推荐阅读