真的很奇怪的定位問題與CSS

我目前有一個很奇怪的定位問題。 4個小時後，我放棄了。我有一個簡單的標籤式的應用程序，用簡單的正常佈局：真的很奇怪的定位問題與CSS

http://mercmobily-bookingdojo.nodejitsu.com/pages/login（測試/測試）一旦它的回答，我會確保該快照將保持在線。

有「頂部小部件」，其中包括頂部的添加字段和它下面的dgrid。還有另一個小部件，「窄部件」，它應該落在dgrid的正下方。相反，它與它重疊。

對於所有小部件，位置是相對或靜態的。然而，頂部小部件的高度似乎「不足」 - 因此，狹窄的小部件被放置在上，而不是的dgrid。

我檢查並檢查並檢查...任何提示？

Merc。

來源

2013-03-28 Merc

重新盟友奇怪的是，「頂級部件」似乎得到了自己的高度錯誤。我不明白爲什麼！ – Merc 2013-03-28 09:55:56

除了萊納斯答案，要解決它，你可以應用絕對定位到編輯窗口小部件，它會從流中提取它，得到想要的結果：

.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計算（）功能，所以實現瀏覽器功能的特定版本可能需要如下所示：

/* 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）

來源

2013-03-28 09:46:21

謝謝洛倫佐！我確實希望將表單保存在文檔流中，因爲它是以編程方式生成的，事實上我並不事先知道添加小部件的大小（在這種情況下，它是簡單的文本框，但它可能是一個複雜的小部件）。我的問題是：我需要調整以使其「工作」？我嘗試了＃grid_1的高度，但沒有奏效！ – Merc 2013-03-28 09:55:13

我更新了我的答案 – 2013-03-28 10:11:01

位......我不知道小部件會有多高。這將使我與30px。另外...爲什麼這會發生？爲什麼dijit__WidgetBase_0有錯誤的高度？ – Merc 2013-03-28 10:26:38

您的#dgrid_1有一個height: 100%，但它不是唯一的內容。還有2個輸入字段。

來源

2013-03-28 09:34:01

我試圖改變這種情況，以便有足夠的空間供其他人使用，但仍然沒有任何內容......我需要在CSS中更改哪些內容才能使其實際工作？我必須用Chrome調整每一個節點！ – Merc 2013-03-28 09:53:43

真的很奇怪的定位問題與CSS

回答

相關問題