Javascript 固定位置不相对于IE11中的父容器_Javascript_Html_Css

Javascript 固定位置不相对于IE11中的父容器

javascript html css

Javascript 固定位置不相对于IE11中的父容器,javascript,html,css,Javascript,Html,Css,如果我们在父容器中定义一个转换，那么子位置将继承chrome和firefox中的父容器，而不是ie中的父容器那么我要做什么才能让它在ie11中工作，使它始终相对于父容器 div.fixed{ 位置：固定；顶部：100px；宽度：300px；高度：100px；边框：3px实心#73AD21；背景色：红色；变换：translate3d（0，0px，0）； } 第2分部固定{ 位置：固定；顶部：100px；宽度：300px；高度：100px；边框：3px实心#73AD21；背

如果我们在父容器中定义一个转换，那么子位置将继承chrome和firefox中的父容器，而不是ie中的父容器

那么我要做什么才能让它在ie11中工作，使它始终相对于父容器

div.fixed{
位置：固定；
顶部：100px；
宽度：300px；
高度：100px；
边框：3px实心#73AD21；
背景色：红色；
变换：translate3d（0，0px，0）；
}
第2分部固定{
位置：固定；
顶部：100px；
宽度：300px；
高度：100px；
边框：3px实心#73AD21；
背景颜色：蓝色；
}

Fixed表示元素紧靠窗口放置，而不是父元素

只需添加“

left:10px

”，您将看到它没有针对父对象定位。在所有的兄弟中

固定意味着图元紧靠窗口，而不是父图元

只需添加“

left:10px

”，您将看到它没有针对父对象定位。在所有的兄弟中

为什么在固定元件中需要固定元件

我想，你可以简单地对孩子使用

position:absolute

。请检查这是否适合您

如果你真的需要修复这两个元素，我认为你可以简单地将两个元素作为兄弟元素

下面是更新后的代码片段

div.fixed{
位置：固定；
顶部：100px；
宽度：300px；
高度：100px；
边框：3px实心#73AD21；
背景色：红色；
变换：translate3d（0，0px，0）；
}
第2分部固定{
位置：绝对位置；
顶部：100px；
宽度：300px；
高度：100px；
边框：3px实心#73AD21；
背景颜色：蓝色；
}

为什么在固定元件中需要固定元件

我想，你可以简单地对孩子使用

position:absolute

。请检查这是否适合您

如果你真的需要修复这两个元素，我认为你可以简单地将两个元素作为兄弟元素

下面是更新后的代码片段

div.fixed{
位置：固定；
顶部：100px；
宽度：300px；
高度：100px；
边框：3px实心#73AD21；
背景色：红色；
变换：translate3d（0，0px，0）；
}
第2分部固定{
位置：绝对位置；
顶部：100px；
宽度：300px；
高度：100px；
边框：3px实心#73AD21；
背景颜色：蓝色；
}

问题在于，您在第一个位置设置了一个

变换

值-这为要放置的

位置：固定的创建了一个新的堆叠上下文-如果您删除该值，那么它将正常工作。如果您需要强制GPU上的东西来提高性能，那么嵌套需要它的元素
 问题在于，您在第一个位置设置了一个transform
值-这为要放置的position:fixed
创建了一个新的堆叠上下文-如果您删除该值，它将正常工作。如果您需要强制GPU上的东西来提高性能，那么嵌套需要它的元素
 请仔细阅读位置
属性。我建议作为一个好的开始
此外，作为一种良好的编程实践，请避免使用fixed
等词作为类的名称，因为这可能是保留的。覆盖这些内容可能会导致问题。此外，请使用更多描述性名称
如果您希望内部div
相对于外部div
定位，建议使用与以下类似的代码

div.outerDiv
{
背景色：红色；
边框：3px实心#73AD21；
高度：100px；
位置：固定；
顶部：100px；
变换：translate3d（0，0px，0）；
宽度：300px；
}
div.innerDiv
{
背景颜色：蓝色；
边框：3px实心#73AD21；
高度：100px；
左：20px；
位置：绝对位置；
顶部：10px；
宽度：300px；
}
请仔细阅读位置
属性。我建议作为一个好的开始
此外，作为一种良好的编程实践，请避免使用fixed
等词作为类的名称，因为这可能是保留的。覆盖这些内容可能会导致问题。此外，请使用更多描述性名称
如果您希望内部div
相对于外部div
定位，建议使用与以下类似的代码

div.outerDiv
{
背景色：红色；
边框：3px实心#73AD21；
高度：100px；
位置：固定；
顶部：100px；
变换：translate3d（0，0px，0）；
宽度：300px；
}
div.innerDiv
{
背景颜色：蓝色；
边框：3px实心#73AD21；
高度：100px；
左：20px；
位置：绝对位置；
顶部：10px；
宽度：300px；
}

但为什么它会在chrome或firefox中占据家长的位置呢。因为如果你是对的，那么它们应该重叠，因为两者都有相同的最高值。@Mahi:不，没有。它的定位是因为@Pugazh都有top 100px。@tomas为什么要删除fiddleFixed中的transform属性相对于窗口，除非父元素有transform，否则将使用它-请检查spec-w3.org/TR/css-transforms-1/#propdef transform，但为什么它要从父元素处定位在chrome或firefox中。因为如果你是对的，那么它们应该重叠，因为两者都有相同的最高值。@Mahi:不，没有。它的定位是因为@Pugazh都有top 100px。@tomas为什么要删除fiddleFixed中的transform属性相对于窗口，除非父元素有transform，否则将使用它-请检查spec-w3.org/TR/css-transforms-1/#propdef transforms没有