如何使包含 div 溢出隐藏在包含 div 的内部

Posted 2023-03-04

【中文标题】如何使包含 div 溢出隐藏在包含 div 的内部

【英文标题】：How do I make a containing div overflow hidden inside it's containing div

【发布时间】：2022-01-24 05:08:16

【问题描述】：

我正在尝试为这个简单的计算器应用程序提供“光亮”，就像您在灯光下在手机屏幕上看到的那样。我所做的是我在包含的 div 中放置了一个用于发光的 div，这是电话形状，但我无法做到，所以溢出对于发光 div 是隐藏的。

希望对当前代码sn-ps有所帮助：

<div class="phone-container">
        <div class="light-sheen"></div>
        <div class="upper-icons">

.phone-container 
    height: 750px;
    width: 400px;
    background: rgb(0, 0, 0);
    border-radius: 60px;
    border: 5px solid rgb(172, 172, 172);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    padding-bottom: 50px;
    overflow: hidden;


.light-sheen 
    width: 900px;
    height: 450px;
    background-color: white;
    position: absolute;
    bottom: 0px;
    transform: rotateZ(-35deg);
    opacity: 0.1;

感谢任何帮助，谢谢！

【参考方案1】：

由于您在 light-sheen 上使用 position: absolute;，因此无法隐藏溢出部分。

改为使用浅色position: relative;。

.light-sheen 
    width: 900px;
    height: 450px;
    background-color: white;
    position: relative;
    bottom: 0px;
    transform: rotateZ(-35deg);
    opacity: 0.1;

【讨论】：

哦，我的困惑解开了，谢谢！不过有一件事，我在 .phone-container 上使用了 scale ，它在 .light-sheen上应用了 overflow: hidden >，尽管它仍然使用 position: absolute？我很困惑为什么当我没有在包含的 div 上使用 scale 属性时它不起作用，但是嘿它起作用了，所以我没有抱怨哈哈

看看MDN document，我想这就是你要找的。 如果该属性的值不是none，则将创建一个堆叠上下文。在这种情况下，该元素将充当任何位置的包含块：固定；或位置：绝对；它包含的元素。