HTML 元素在同位素 div 内的位置

Question

我正在使用 isotope 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;
            }