Question

I am trying to move GCLI‘s input from the bottom of the page to the top. However, I can’t get it to look quite right. Why can’t I get the .gcli-panel-connector <div> to cover up the .gcli-tt <div>’s border? I think it has something to do with the z-index.

Please compare these two live demos:

• Original code where the input is at the bottom and the border is properly covered
• Altered code where the input is at the top, but the border is not covered as desired

Answer 1

for .gcli-panel-connector add:

position: relative;
z-index: 1;
top: 1px;

keep in mind that z-index works only with positioned elements.