如何在全屏，图像幻灯片放映中创建输入字段(How can I create Input field over full screen, image slideshow)

我将我的页面背景变成了一个循环播放一系列图像的幻灯片，但我希望能够在顶部显示字段。如何阻止字段落后于图像？

<!doctype> <html> <header> <meta charset="utf-8"> <title>Playcation 2013</title> <script src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/modernizer.js"></script> <link rel="stylesheet" type="text/css" href="styles/index.css"> </header> <body id="page"> <input type="submit" value="Send"> <ul class="cb-slideshow"> <li><span>Image 01</span><div></div></li> <li><span>Image 02</span><div></div></li> <li><span>Image 03</span><div></div></li> <li><span>Image 04</span><div></h3></div></li> </ul> </body>

CSS

.cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; }

I made the background of my page into a slideshow that cycles a series of images but I want to be able to display fields on top. How do I stop the fields from going behind the images?

<!doctype> <html> <header> <meta charset="utf-8"> <title>Playcation 2013</title> <script src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/modernizer.js"></script> <link rel="stylesheet" type="text/css" href="styles/index.css"> </header> <body id="page"> <input type="submit" value="Send"> <ul class="cb-slideshow"> <li><span>Image 01</span><div></div></li> <li><span>Image 02</span><div></div></li> <li><span>Image 03</span><div></div></li> <li><span>Image 04</span><div></h3></div></li> </ul> </body>

CSS

.cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; }