我在哪里,在正常情况下,CSS,固定股利将正好它被指定的(定位的情况下top:0px
,left:0px
)。
如果我的父母有一个translate3d转换,这似乎不被尊重。我没看到什么吗?我尝试了其他webkit转换,例如样式和转换原点选项,但是没有运气。
我在JSFiddle上附加了一个示例,其中我希望黄色框位于页面的顶部,而不是容器元素的内部。
您可以在下面找到小提琴的简化版本:
#outer {
position:relative;
-webkit-transform:translate3d(0px, 20px , 0px);
height: 300px;
border: 1px solid #5511FF;
padding: 10px;
background: rgba(100,180,250, .8);
width: 80%;
}
#middle{
position:relative;
border: 1px dotted #445511;
height: 300px;
padding: 5px;
background: rgba(250,10,255, .6);
}
#inner {
position: fixed;
top: 0px;
box-shadow: 3px 3px 3px #333;
height: 20px;
left: 0px;
background: rgba(200,180,80, .8);
margin: 5px;
padding: 5px;
}
<div id="container">
Blue: Outer, <br>
Purple: Middle<br>
Yellow: Inner<br>
<div id="outer">
<div id="middle">
<div id="inner">
Inner block
</div>
</div>
</div>
</div>
我该如何使translate3d与固定位置的子级一起工作?
这是因为transform
按[W3C规范,会创建一个新的本地坐标系:
在HTML命名空间中,除了none
转换值以外的任何值都将导致创建堆栈上下文和包含块。该对象充当固定位置后代的包含块。
这意味着固定的位置将固定到变形的元素,而不是视口。
我目前不知道有解决方法。
问题内容: 我有一个默认位置(即)和一个位置。 如果设置元素的z索引,似乎不可能使固定元素位于静态元素之后。 我可以通过 在static元素上使用来解决此问题 ,但是有人可以告诉我 为什么会 这样吗? (似乎有一个与此问题类似的问题,固定位置破坏了z-index,但是它没有令人满意的答案,因此我在这里用示例代码来询问) 问题答案: 这个问题可以通过多种方式解决,但实际上,了解堆叠规则可以使您找到最
问题内容: 好的,我注意到了一些东西,但是在CSS规范中找不到。样式化元素将相对于浏览器视口绝对定位。如果将固定位置的元素放置在另一个元素内会怎样?CSS示例如下: 和HTML: 据我所知,该元素相对于其最近的父元素也是固定位置的。这在所有浏览器中都可以使用吗?另外,它是错误还是故意行为? 到目前为止,我在互联网上没有找到关于此主题的任何内容,只是“固定位置使其固定在页面上”。 问题答案: 固定和
我有一个带有两个子容器的flex-box容器,在屏幕较小的情况下,右边的容器应该折叠在左边的容器下面。然而,这似乎只在父容器宽度为100%时才起作用,而当它设置为固定宽度时则不起作用。它需要一个基于设计的固定宽度,我尝试将固定宽度的容器包装在具有100%宽度的父容器中,但这并不有效。 如何将容器设置为固定宽度,以便项目在较小屏幕尺寸下正确换行? null null JSFIDDLE链接:链接
问题内容: 我正在尝试使用以下方法修复一个问题,使其始终停留在屏幕顶部: 但是,该容器位于居中的容器中。当我使用它时,它固定了相对于浏览器窗口的相对位置,例如它靠在浏览器的右侧。相反,它应该相对于容器固定。 我知道可以用来相对于修复元素,但是当您向下滚动页面时,该元素消失并且不会像那样粘在顶部。 是否有破解或解决方法来实现这一目标? 问题答案: 简短的回答: 不。 (现在可以使用CSS转换。请参见
问题内容: 我打开控制台(chrome \ firefox)并运行以下行: 内容未包含在#popupFrame中,这使它变得很奇怪。 目标是创建像firefox这样的警告框 问题答案: 第二个div是(默认值),因此z-index不适用于它。 您需要定位(将位置属性设置为,而不是在这种情况下可能需要的其他位置)要分配给的任何内容。
我在react窗口列表元素中使用React/MUI Popover,并且无法正确定位Popover-它总是在窗口的左上角结束(组件无法在锚元素[in the docs])。 所以为了暂时解决这个问题,我决定使用参数来设置一个绝对位置——在我的例子中,就在窗口的中间。那也不行。 我已经查看了Chrome开发工具中的值,一切似乎都正常(即,我使用该工具时确实得到了一个锚定;我得到了有效的位置左/顶值;