如何摆脱 css 圈子的溢出 - "overflow: hidden"不起作用

Question

我使用css制作了两个圆圈，它们在屏幕上显示一半，因此它们是半圆。在应用程序的所有其他页面上都没有溢出，因为我使用了overflow: hidden或overflow-x: hidden。然而，它不适合这个设计。

我需要重新设计和摆脱圆圈或有一个解决这个问题?

链接到codesandbox。

下面也有代码指出:

• 作为参考，这是首先开发的移动设备，所以把它放在移动视图，而不是设计桌面或平板电脑
• 不知道为什么，但当使用开发工具与代码沙箱，它实际上并没有正常工作，就它在我的本地主机上的外观而言，我唯一的问题是溢出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%。