同位素div內的HTML元素位置

我在玩同位素js庫，我已經有了一般的概念。當我將普通html/css（如輸入&圖表）放入同位素div時，我的問題就出現了，它並不像我預期的那樣運行。這個html在同位素div之外按預期工作。同位素div內的HTML元素位置

當同位素的div被點擊我擴大，並顯示該項目的詳細信息，其中包括輸入，圖表等

我的目標：

使包含輸入可見表在jsfiddle。
明白爲什麼會發生這種情況，所以我可以把我喜歡的任何內容放在未來的這裏。

代碼：

CSS，這是造成問題。通過添加星號，可以將它應用於所有子元素。因此，我的表沒有顯示的原因是表，行，單元格和元素都是絕對定位的。

.containerDiv * { 
      margin: 0px; 
      position: absolute; 
     }

該解決方案的CSS（適用相對位置表元素）：

#chartFilters * { 
       position: relative; 
      }

來源

2014-02-19 John

我做了一個快速刷上的CSS和解決我的問題 - 看到更新的小提琴問題。最後是一個非常簡單的問題，由於我的問題，它可能看起來很難，因此爲什麼在過去的24小時內沒有社區的答案。

我希望我的步驟可以幫助其他人解決這些類型的問題，瀏覽器有一些很棒的工具可以幫助解決問題。

步驟我用來解決：

1）我發現的第一個有用的步驟是通過在頁面上點擊右鍵檢查與Internet Explorer的元素。然後在它顯示的源代碼中使用右鍵單擊選項將樣式複製到元素。這給了我一個更小版本的HTML測試，我保存到一個獨立的HTML。

2.）我開始拉出似乎無關的html元素，並使示例更簡單。一旦我抽出一些東西，我會在IE中刷新html並檢查發生了什麼。 3）當我有一個簡單的HTML，我看到了絕對定位和星號，然後我做了一個快速谷歌找到this stack question解釋星號做什麼。 4）我需要保留絕對造型以使同位素起作用，但是我可以指定同位素內的相對定位，我已經通過使用星號自己做了這件事，現在我知道它做了什麼！ :)

#chartFilters * { 
       position: relative; 
      }

來源

2014-02-20 22:06:38 John

同位素div內的HTML元素位置

回答

相關問題