同位素div内的HTML元素位置

Question

我正在玩同位素js库，我已经掌握了一般概念。当我输入正常的html / css（例如输入和输出）时，我的问题出现了。同位素div中的图表不符合我的预期。这个html在同位素div之外按预期工作。

当点击同位素div时，我正在展开它并显示该项目的详细信息，包括输入，图表等。

我的目标：

1. 使包含输入的表格在jsfiddle中可见。
2. 明白为什么会这样，所以我可以在这里放置我喜欢的任何内容。

JsFiddle showing answer

代码：

引起问题的Css。通过添加星号，这表示他将样式应用于所有子元素。因此，我的表没有显示的原因是表，行，单元格，元素都是绝对定位的。

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

解决方案css（应用表元素的相对位置）：

#chartFilters * {
                position: relative;
            }     

Answer 1

我已经快速刷新CSS并解决了我的问题 - 请参阅更新小提琴的问题。最后是一个非常简单的，由于我的问题，它可能看起来很难，因此在过去的24小时内为什么社区没有答案。

我希望我的步骤可以帮助其他新手来解决这些类型的问题，浏览器现在可以使用一些很好的工具来解决问题。

我用来解决的步骤：

1。）我找到的第一个有用的步骤是通过右键单击页面，使用Internet Explorer检查元素。然后使用它显示的源中的右键单击选项来复制带样式的元素。这给了我一个较小版本的html进行测试，我将其保存到一个独立的html中。

2。）我开始抽出看似无关的html元素并使样本更简单。一旦我拿出一些东西，我就会刷新IE中的html并检查发生了什么。

3。）当我有一个简单的HTML时，我看到了绝对定位和星号，然后我做了一个快速谷歌找到this stack question来解释星号的作用。

4。）我需要保留绝对样式，以便同位素起作用，但我可以指定同位素内的相对位置，我已经通过自己使用星号来做到这一点，我知道它的作用！ ：）

#chartFilters * {
                position: relative;
            }