html - 在哪里插入溢出 :x?

Question

我有一个灰色背景矩形，我必须在其上定位具有 position: relative 的元素，该矩形应该超出页面，我必须使用 overflow-x: hidden，但问题是当我使用它会弄乱所有页面。我应该在哪里放置 overflow-x 而不会弄乱所有页面？我应该更改 HTML 吗？

我试图将它放在 main 中或将 div 包装在另一个 div 中，使用 overflow-x 的包装器，但它仍然弄乱了所有页面!

body {margin: 0px;
  padding: 0px;
  font-size: 16px;}

.under-bg_blue-big {float: right;
                height: 690px;
                width: 690px;
                background-image: url(../img/bg-intro-desktop.svg);}

.list {position: relative;
   float: right;
   color: white;
   z-index: 5;
   margin-top: 36px;
   margin-right: 0px;
   padding-left: 0px;}

nav > ul > li {list-style: none;
           display: inline;
           position: relative;
           z-index: 5;}

.under-bg_white-btn {margin-right: 16px;
                 font-size: 12px;}

.under-bg_green-btn {background-color: #06d89b;
                 padding: 8px 21px;
                 border-radius: 5px;
                 margin-right: 24px;
                 font-size: 12px;}


.logo {float: left;
   width: 180px;
   margin-top: 4.58%;
   margin-left: 8.19%;
   position: relative;
   z-index: 1;
   margin-bottom: 170px;
   clear: both;}

.block-hero {text-align: center;}

.block-hero__hero {float: right;
               position: relative;
               top: 190px;
               right: -50px;}

.section-a {padding-top: 284px;
        margin-left: 8.19%;}

.section-a__heading {width: 34.375%;
                 font-size: 40px;}

.section-a__par {width: 35.28%;}

.section-a__btn {padding: 27px 90px;
             background-color: #06d79d;
             border: none;
             border-radius: 5px;
             color: white;}

.under-bg_grey {background-color: #fafafa;
            height: 744px;
            width: 150%;
            margin-top: 30%;
            position: relative;
            left: -50px;
            clip-path: inset(0% 0% 0% 0% round 100px);
            font-size: 14px;
            z-index: 0;
            transform: rotate(15.589deg);
            clear: both;}

<main>
  <section class="section-a">
    <h1 class="section-a__heading">All your files in one secure location, accessible anywhere.</h1>
    <p class="section-a__par">Fylo stores all your most important files in one secure location. Access them wherever you need, share and collaborate with friends, family and co-workers.</p>
    <button type="button" name="button" class="section-a__btn">Get 
    Started</button>
  </section>
  <div class="under-bg_grey"></div>
</main>

Answer 1

如果您希望带有“under-bg_grey”类的 div 作为其他元素的背景，您可以按如下方式更改特定元素的样式。

.under-bg_grey {
    background-color: #fafafa;
    height: 744px;
    width: 150%;
    margin-top: -25%;
    position: relative;
    left: -50px;
    clip-path: inset(0% 0% 0% 0% round 100px);
    font-size: 14px;
    z-index: -1;
    transform: rotate(15.589deg);
    clear: both;
}

这样想就不需要 overflow-x 属性了。

我希望以上内容能满足您的需求:)