Why is this div element ignoring my z-index and width settings?

Question

I tried to use HTML+CSS to generate simple inline info popups, yet I was not able to make it work as intended. In particular, the popup div container ignores my max-width and z-index settings.

I posted a small demonstration on jsfiddle .

Can someone please enlighten me? What am I missing? Many thanks in advance!

Answer 1

您需要将位置设置为绝对/相对/固定，才能使z-index工作http://jsfiddle.net/NMh8j/12/

Answer 2

If you change .faq>.body to position:fixed , the 240px width is observed, and the top : 12px is moving the popup over the underlying ?. You can then drop the left-20px as well as it will center itself.

jsFiddle update

Answer 3

Your .head hasn't any position specified, change your CSS to :

.faq:hover>.head { 
   position: relative;
   border-color:#cccccc; 
   border-bottom-color:#ff0000; 
   z-index:100;
}

z-index need the position property to be fixed ( fixed , absolute , relative .. but not static , which is the default value)