标签: css-position

我有3个级别div:

• (在下面绿色)的顶层div与overflow: hidden.这是因为如果超过框的大小,我希望在该框内部的一些内容(此处未显示)被裁剪.
• (在下面红色的)这里面,我也div有position: relative.唯一的用途是下一级别.
• (下面的蓝色)最后一个div我取出了流程,position: absolute但我想要相对于红色div(而不是页面)定位.

我想将蓝色框从流中取出并扩展到绿色框之外,但相对于红色框定位如下:

但是,通过下面的代码,我得到:

然后移除position: relative红色框,现在蓝色框允许离开绿色框,但相对于红色框不再定位:

有办法:

• 保持overflow: hidden在绿色框上.
• 蓝色框是否扩展到绿色框之外并相对于红色框定位？

完整的源代码,为了测试而使用内联CSS:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

我有一种情况,在正常的CSS情况下,固定的div将准确定位在指定的位置(top:0px,left:0px).

如果我有一个具有translate3d变换的父级,这似乎不受尊重.我没有看到什么？我尝试过其他webkit-transform,如样式和变换原点选项,但没有运气.

我已经附加了一个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;
}

任何使translate3d与固定位置的孩子一起工作的指针将不胜感激.

当选择特定语言时,我将网站CSS重写为RTL版本.

我有一个必须具有绝对定位的元素.在LTR版本中,我这样做left: 0px;并且它与左边对齐; 在RTL版本中我想反过来right,但left属性没有被覆盖,所以它仍然保持在左边.

• 我试过黑客攻击!important,但那没用.
• 我尝试过设置left: none,但那不起作用.

我怎样才能将其设置为none或在覆盖时完全删除它？

我们有两个DIV,一个嵌入另一个.如果外部DIV不是绝对定位的,则位于绝对位置的内部DIV不服从外部DIV隐藏的溢出(示例).

有没有机会让内部DIV服从外部DIV隐藏的溢出而不将外部DIV设置为绝对位置(因为这会破坏我们的完整布局)？我们内部DIV的相对位置也不是一个选项,因为我们需要"扩展"表TD(例如).

还有其他选择吗？

我正试图position:fixed在我的页面上找到一个居中对齐的div .

我总是能够使用这个"hack"来完成定位的div

left: 50%; width: 400px; margin-left:-200px

... margin-left的值是div宽度的一半.

这似乎不适用于固定位置div,而只是将它们的最左边角放置在50%并忽略margin-left声明.

有关如何解决此问题的任何想法,以便我可以居中对齐固定定位元素？

如果你能告诉我一个更好的方法来对齐绝对定位的元素而不是我上面概述的方式,我会投入奖金M&M.

我有一个元素,它有以下CSS:

.elem {
  left: 0;
  position: fixed;
  right: 0;
  width: 60%;
  z-index: 1000;
  }

元素不会跨越整个屏幕.我希望它"对齐"到屏幕的右侧.

这很容易,如果我刚删除左:0,但我不能篡改上面的CSS,所以我需要一些CSS或Jquery来覆盖,禁用或删除左:0 CSS.

感谢帮助!

在将其添加到//元素的情况下,任何人都可以告诉我它们之间的区别style = "position:absolute"和style = "position:relative"它们之间的区别吗？divspaninput

我现在正在使用absolute,但我也想探索relative.这将如何改变定位？

是否可以使侧边栏导航始终固定在流畅布局中滚动？

我不确定我是否完全理解这两者之间的区别.

有人可以解释为什么我会使用其中一个以及它们有何不同？

position:sticky现在可以在某些移动浏览器上运行,因此您可以使菜单栏与页面一起滚动,但只要用户滚过它就会粘到视口顶部.

但是,如果您想要在粘贴的菜单栏中稍微重新设置,只要它现在"粘住",该怎么办？例如,您可能希望条形图在滚动页面时具有圆角,但是一旦它粘贴到视口顶部,您就想要摆脱顶部圆角,并在下面添加一点阴影它.

是否存在任何类型的伪选择器(例如::stuck)来定位具有position: sticky 并且当前正在粘附的元素？或者浏览器供应商在管道中有这样的东西吗？如果没有,我会在哪里申请？

NB.javascript解决方案对此不利,因为在移动设备上,scroll当用户松开手指时,通常只会收到一个事件,因此JS无法知道滚动阈值通过的确切时刻.