gpt4 book ai didi

css - 在 CSS3 转换中,子项不会与父项一起翻译

转载 作者:太空宇宙 更新时间:2023-11-04 10:34:42 25 4
gpt4 key购买 nike

为了将元素完全翻译出 View ,我使用了 transform: translate(0, -100%);。但是,如果您调整窗口的大小以充分压缩其高度,它的子项将逐渐重新出现。我不知道他们为什么这样做,我希望有人能阐明发生这种情况的原因。这是 the fiddle .

HTML

<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>

CSS

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}

#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}

#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}

最佳答案

你的圆圈有固定的高度 (500px/400px)。当 #background 的高度小于调整窗口大小时,圆圈将垂直溢出 #backgroundtranslate 移动 100% 指的是 #background,因此您仍然会看到在没有 的情况下会溢出 #background 的圆圈部分>翻译设置。

关于css - 在 CSS3 转换中,子项不会与父项一起翻译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36229822/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com