Question

目前我有一个非常奇怪的定位问题。 4个小时后，我放弃了。我有一个简单的标签应用程序，具有简单的正常布局：

http://mercmobily-bookingdojo.nodejitsu.com/pages/login（测试/测试）一旦得到答复，我将确保快照保持在线状态。

“top widget”包含顶部的“添加”字段和下方的dgrid。还有另一个小部件，即“窄小部件”，它应该位于dgrid下面。相反，它重叠了它。

所有小部件的位置都是相对的或静态的。但是，顶部窗口小部件的高度似乎“不足” - 因此窄窗口小部件被放置在 dgrid上。

我检查并检查并检查了......任何提示？

Merc的。

Answer 1

您的#dgrid_1有一个height: 100%，但这不是唯一的内容。还有2个输入字段。

Answer 2

除了Linus的回答，要修复它，你可以对edit-widget应用绝对定位，这将从流中提取它，获得所需的结果：

.editing-widget {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

您还需要将position: relative添加到#dijit__WidgetBase_0才能正确对齐。

这将使编辑小部件与#dgrid_1中包含的文本重叠：您可以通过向其父级（#dijit__WidgetBase_0）添加填充顶部来修复，例如padding-top: 36px会成功。

如果您希望将编辑小部件保留在流程中，可以使用简单的css3声明来帮助您：

#dgrid_1{
    height: calc(100% - 30px);
}

值得注意的是，并非所有浏览器目前都支持标准的CSS3 calc（）函数，因此可能需要实现特定于浏览器的函数版本，如下所示：

/* Firefox */
height: -moz-calc(100% - 30px);
/* WebKit */
height: -webkit-calc(100% - 30px);
/* Opera */
height: -o-calc(100% - 30px);
/* Standard */
height: calc(100% - 30px);

（来源：CSS: Setting width/height as Percentage minus pixels）

CSS的定位问题真的很奇怪

2 个答案: