Позиция HTML-элементов внутри изотопа div

Question

Я играю с библиотекой изотопов js, и у меня есть общая концепция. Моя проблема возникает, когда я помещаю нормальные html/css, такие как входы & диаграмм в изотопном div, они не ведут себя так, как я ожидал. Этот html работает как ожидалось вне изотопа div.

Когда изотоп ДИВ щелкают Я дополнив ее и показывая детали для этого элемента, включая входы, схемы и т.д.

Моя цель:

1. Сделайте таблицу, содержащую входы видимыми в jsfiddle.
2. Поймите, почему это происходит, поэтому я могу разместить любое содержание, которое мне нравится здесь, на будущее.

JsFiddle showing answer

Код:

Css, который вызывает проблему. Добавив звездочку, это говорит, что он применил стиль к всем дочерним элементам. Поэтому причина, по которой моя таблица не показывалась, заключалась в том, что таблица, строки, ячейки, элементы были абсолютно позиционированы.

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

устанавливаемое сотовое решения (применить относительное положение элементов таблицы):

#chartFilters * { 
       position: relative; 
      }  

Answer 1

Я сделал быструю кисть на CSS и решить мою проблему - см вопроса обновляемой скрипки. Был очень простой, в конце концов, он, вероятно, выглядел тяжело из-за моего вопроса, поэтому почему в течение последних 24 часов не было ответов от сообщества.

Надеюсь, что мои шаги помогут кому-то другому, кто занимается решением этих проблем, у браузеров есть отличные инструменты, созданные в эти дни для устранения проблем.

шаги я использовал для решения:

1.) Первый полезный шаг, который я нашел в том, чтобы проверить элемент с интернет-проводник с помощью правой кнопки мыши на этой странице. Затем используйте параметр правой кнопки мыши в источнике, который он показывает, чтобы скопировать элемент со стилями. Это дало мне меньшую версию html для тестирования, которую я сохранил в автономном html.

2.) Я начал вытаскивать элементы html, которые оказались несвязанными, и сделать образец проще. Как только я что-то вытащил, я обновил html в IE и проверил, что произошло.

3.) Когда у меня был простой html, я увидел абсолютное позиционирование и звездочку, затем я быстро нашел google, чтобы найти this stack question, объясняя, что делает звездочка.

4.) Мне нужно оставить абсолютный стиль таким образом, чтобы изотоп работал, но я могу указать относительное позиционирование внутри изотопа, я сделал это, используя теперь звездочку, теперь я знаю, что она делает!)

#chartFilters * { 
       position: relative; 
      }