Как я могу сделать так, чтобы всплывающее окно появлялось поверх всех других элементов? ⇐ CSS

[Anonymous]

В примере JSFiddle, если щелкнуть одно из полей элемента (не на самой букве), откроется всплывающее окно, в котором отображается дополнительная информация об элементе. Если щелкнуть один из верхних элементов (например, «Водород»), всплывающее окно скроется за элементами навигации и заголовка, и я бы хотел, чтобы всплывающее окно находилось поверх всех остальных элементов, чтобы можно было отобразить информацию.
Я пробовал использовать очевидный z-индекс для наложения слоев и пытался убедиться, что использую его правильно, но мое всплывающее окно все еще скрыто двумя верхними элементами div. Я думал, что код, который появляется под другим кодом, все равно отображается поверх?
Вот мой пример JSFiddle. Может ли кто-нибудь помочь мне с этим?
https://jsfiddle.net/jasonbruce/chqpg4dt/8/
'''

Код: Выделить всё

1



Element: [url=https://en.wikipedia.org/wiki/Hydrogen]Hydrogen[/url]

Series: Reactive Nonmetals

Atomic Number: 1

Energy Levels: 1

Atomic Weight: 1.008 u

Electronegativity: 2.20

Melting Point: 259.1° C

Boiling Point: -252.9° C

Electron Affinity: 72.8 kJ/mol

Ionization: 1,312.0 kJ/mol

Radius Calculated: 53 pm

Hardness, Brinell: N/A MPa

Modulus, Bulk: N/A GPa

Conductivity, Thermal: 0.1805 W/mK

Heat, Specific: 14,300 J/kgK

Abundance, Universe: 75%

Discovered: 1766
1
1
[url=https://www.youtube.com/watch?v=6rdmpx39PRk]H[/url]
Hydrogen
1.008

'''

Подробнее здесь: https://stackoverflow.com/questions/750 ... r-elements