如何摆脱 css 圈的溢出 - “溢出：隐藏”不起作用

Question

我使用 css 制作了两个圆形，它们在屏幕上显示了一半，因此它们是半圆形。在应用程序的所有其他页面上都没有溢出，因为我使用了溢出：隐藏或溢出-x：隐藏。但是它不适用于这种设计。

我是否需要重新设计并消除这些圆圈，或者是否有解决方法？

链接到代码框here。

代码也在下面

注意事项：

• 作为参考，这是首先在移动设备上开发的，因此请将其放在移动设备视图中，因为尚未设计桌面或平板电脑
• 不知道为什么，但是当使用带有代码沙箱的开发工具时，它实际上并不能正常工作，就它在我的本地主机上的外观而言，我唯一的问题是溢出-x - 忽略页眉或页脚的定位问题和出现的内容

FAQPage.js

import React from 'react'
import { Container } from '@material-ui/core'
import styled from 'styled-components'
import CardModal from '../Components/Modals/CardModal';
import { FAQModal } from '../Data/MenuModalData';
import { Link } from 'react-router-dom';


export const FAQPage = () => {

    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
      setOpen(true);
    };
    const handleClose = () => {
      setOpen(false);
    };

    return (
        <div style={{height: "100vh", overflowX: "hidden"}}>
            <Container style={{height: "100%", display: "flex", justifyContent: "center", alignItems: "center", overflow: "hidden"}}>
                <TopCircle/>
                <Title>FAQS</Title>
                <QuestionBox onClick={handleClickOpen}>
                    How Long Is Delivery?
                    <CardModal  {...FAQModal[0]}  open={open} handleClose={handleClose} />
                </QuestionBox>
                <QuestionBox style={{marginBottom: "60%"}} onClick={handleClickOpen}>
                    Are There Vegan Options?
                    <CardModal  {...FAQModal[0]}  open={open} handleClose={handleClose} />
                </QuestionBox>
                <QuestionBox style={{marginBottom: "25%"}} onClick={handleClickOpen}>
                    Are You On Deliveroo?
                    <CardModal  {...FAQModal[0]}  open={open} handleClose={handleClose} />
                </QuestionBox>
                <QuestionBox  style={{marginBottom: "-10%"}} onClick={handleClickOpen}>
                    Do You Accept PayPal?
                    <CardModal  {...FAQModal[0]}  open={open} handleClose={handleClose} />
                </QuestionBox>
                <ContactBox>
                    <ContactBoxText>
                        Got Another Question?
                    </ContactBoxText>
                    <Link style={{ width: "100%", display: 'flex', justifyContent: 'center' }} to="/contact">
                        <ContactButton>
                            Get In Touch!
                        </ContactButton>
                    </Link>

                </ContactBox>
                <BottomCircle/>
            </Container>
        </div>
            
        
    )
}

const TopCircle = styled.div`
    position: absolute;
    overflow-x: hidden;
    height: 200px;
    width: 125%;
    border-radius: 50%;
    background-color: rgba(149, 225, 211, 0.4);
    top: 0%;

    @media (max-width: 360px){
        height: 185px;
    }
`
const BottomCircle = styled.div`
    position: absolute;
    overflow-x: hidden;
    height: 200px;
    width: 125%;
    border-radius: 50%;
    background-color: rgba(149, 225, 211, 0.4);
    bottom: -30%;

    @media (max-height: 600px){
        height: 150px;
    }

    @media (max-height: 640px){
        height: 175px;
    }


`

const Title = styled.span`
    position: absolute;

    font-size: 18px;
    font-family: 'Merriweather', serif;
    font-style: normal;
    font-weight: bold;
    text-align: center;

    margin-bottom: 150%;

`
const QuestionBox = styled.button`
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 25px;
    /* box-shadow:  #393E46; */
    margin-bottom: 95%;


    height: 50px;
    width: 200px;
    background-color: rgba(149, 225, 211, 0.4);
`
const ContactBox = styled.div`
    position: absolute;
    height: 125px;
    width: 300px;
    background-color: rgba(149, 225, 211, 0.4);
    margin-bottom: -80%;
    border-radius: 25px 25px 75px 75px;
    box-shadow:  1px 1px 2px 1px #393E46;
    display: flex;
    justify-content: center;
    align-items: center;

`
const ContactBoxText = styled.span`
    position: absolute;
    font-size: 16px;
    font-family: 'Merriweather', serif;
    font-style: normal;
   
    text-align: center;

    top: 20%;

`
const ContactButton = styled.button`
    position: absolute;
    top: 50%;
    height: 35px;
    border-radius: 15px;
`

Answer 1

有两种方法可以解决您的问题：

1. 由于您试图隐藏绝对定位元素，您需要确保这些绝对定位元素的容器是相对定位的。默认情况下，它的位置是static。因此，将以下css 代码添加到您的<div style={{height: "100vh", overflowX: "hidden", position:"relative"}}>，然后您需要更改TopCircle 和BottomCircle 组件的顶部和底部属性。

2. 将TopCircle和BottomCircle组件的width属性改成98%，而不是父组件的125%。