gpt4 book ai didi

javascript - CSS HTML : Is there workaround for parent scaling and child position:fixed?

转载 作者:可可西里 更新时间:2023-11-01 15:01:50 26 4
gpt4 key购买 nike

所以如果我们有缩放的父元素和带有 position:fixed 的子元素,就会出现问题:

.parent {
transform: scale(2);
transform-origin: 0 0 0;
}
.child {
position:fixed;
}

它破坏了由父元素上的 scale(2) 引起的子 position:fixed。该问题自 2 年前就已为人所知。这个问题有解决方法吗?

出于某种原因,我真的必须在父项和位置上使用比例:固定在子项上。

最佳答案

我不知道你想把子元素放在哪里。但我知道,在您的情况下,用于定位子属性的 bottom 和 right 属性无法按预期工作。 top 和 left properties 可以。

为了将子元素定位在右下角,我找到了以下解决方法:

<html>
<head>
<style>
.parent {
transform: scale(2);
transform-origin: 0 0 0;
background-color: blue;
}
.child {
position: fixed;
left: calc(50vw - 100px);
top: calc(50vh - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
parent
<div class="child">child</div>
</div>
</body>
</html>

由于某种原因, child 的视口(viewport)随着 parent 的比例而增加。因此,在缩放 2 倍的情况下,您必须将视口(viewport)缩小 50%。

如果这对您没有帮助,请告诉我您想要放置子元素的位置。

关于javascript - CSS HTML : Is there workaround for parent scaling and child position:fixed?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46356498/

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