1

我对css有点陌生，让浏览器在布局上进行合作对我来说有点困难。我得到了一种我认为可行的格式，但是当我将它用于联系表单时，我意识到有些东西覆盖了我的输入字段，因此我无法在其中输入文本，但我不知道是什么。这是一个包含我所有 html 和 css 的 JSfiddle，欢迎提出任何建议。

html:

<body>
    <div class="header">
            <h1>MultiDimensional Imaging<br>
            <span class="catchphrase">Give better ultrasound service, make thousands more.</span></h1>
        <p class="stamp">OB/GYNS ONLY</p>
    </div>
    <div class="nav">
        <ul class="menu">
            <li><a href="http://mdifl.com">Home</a>
            </li>
            <li><a href="http://mdifl.com/how/">How it works</a>
            </li>
            <li><a href="http://mdifl.com/pricing/">Pricing</a>
            </li>
            <li><a href="http://mdifl.com/about/">About Us</a>
            </li>
            <li><a href="http://mdifl.com/contact/">Contact</a>
            </li>
        </ul>
    </div>
    <div class="content">
        <div class="floatingimage"></div>
        <div class="copy">
            <form name="contact_us" method="post" action="http://mdifl.com/contact/">
                <p>What's your name?</p>
                <input name="name" type="text" maxlength="40">
                <p>What's your phone number?</p>
                <input name="phonenumber" type="text" maxlength="40">
                <p>What's your email?</p>
                <input name="email" type="text" maxlength="40">
                <p>What message would you like to send us?</p>
                <textarea name="message" cols="40" rows="10"></textarea>
            </form>
        </div>
    </div>
    <div class="footer"> <a href="legal.php">Legal</a>|<a href="privacy.php">Privacy Policy</a>|<a href="http://www.sonosmile.com">3D Ultrasound Miami</a>

    </div>
</body>

CSS：

html {
    height:100%;
}
body {
    width:1250px;
    margin-left:auto;
    margin-right:auto;
    background-color:#CCC;
    background:-webkit-gradient(linear, left top, left bottom, from(#666666), to(#FFFFFF)) fixed;
    background: -moz-linear-gradient(top, #666, #FFF) fixed;
    /* for firefox 3.6+ */
    display:block;
}
h1 {
    font-family:"Courier New", Courier, monospace;
    font-size:40px;
    font-weight:bold;
}
h2 {
    font-size:25px;
    font-weight:bold;
}
h3 {
    font-size:24px;
    font-weight:bold;
}
h4 {
    position:relative;
    margin-bottom:-80px;
    padding:20px;
    font-size:20px;
    font-weight:bold;
    font-style:italic;
    text-align:center;
    width:380px;
    background-color:#AAC1D9;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: 4px 5px 5px 0px #999;
    -webkit-box-shadow: 4px 5px 5px 0px #999;
    box-shadow: 4px 5px 5px 0px #999;
}
.catchphrase {
    font-style:italic;
    font-family:"Times New Roman", Times, serif;
    font-size:23px;
}
.stamp {
    margin-left:83%;
    padding:0px;
    font-family:"Times New Roman", Times, serif;
    color:#F00;
    font-size:24px;
    font-weight:bold;
    font-style:oblique;
    transform:rotate(10deg);
    -ms-transform:rotate(10deg);
    /* IE 9 */
    -webkit-transform:rotate(10deg);
    /* Safari and Chrome */
    -moz-transform:rotate(10deg);
    /*mozilla*/
    position:relative;
    top:-15px;
    width:200px;
    border:solid;
    border-color:#F00;
}
input {
    z-index:10;
}
.floatingimage {
    position:relative;
    left:-250px;
    top:-150px;
    width:450px;
    height:542px;
    background-image:url("http://mdifl.com/img/volusoni.png");
    z-index:-1;
}
.header {
    background-image:url("http://mdifl.com/img/metaltexture.jpg");
    text-align:center;
    margin-top:100px;
    width:600px;
    height:130px;
    padding:7px;
    padding-right:25px;
    margin-left:auto;
    margin-right:auto;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: 4px 5px 5px 0px #999;
    -webkit-box-shadow: 4px 5px 5px 0px #999;
    box-shadow: 4px 5px 5px 0px #999;
}
.nav {
    margin-top:-20px;
    height:0px;
    margin-right:auto;
    margin-left:auto;
    width:630px;
}
:root .menu li a:hover {
    color:#00F \0/IE9;
}
/* IE9 */

/* internet explorer sucks monkey balls.*/
 .menu {
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.menu li {
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), color-stop(0.5, #f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    /* Adding a 1px inset highlight for a more polished efect: */
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    list-style: none;
}
.menu li:after {
    /* This creates a pseudo element inslide each LI */
    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;
    /* Gradients! */
    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168, 168, 168, 0.5)), color-stop(0.5, rgba(168, 168, 168, 0)), to(rgba(168, 168, 168, 0.5)));
    background-image:-moz-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
    background-image:-o-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
    background-image:-ms-linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
    background-image:linear-gradient(left, rgba(168, 168, 168, 0.5), rgba(168, 168, 168, 0) 50%, rgba(168, 168, 168, 0.5));
    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
    box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff, 1px 0 0 #a3a3a3, 2px 0 0 #fff;
    /* This will create a smooth transition for the opacity property */
    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}
/* Treating the first LI and li:after elements separately */
 .menu li:first-child {
    border-radius: 4px 0 0 4px;
}
.menu li:first-child:after, .menu li.selected:first-child:after {
    box-shadow:1px 0 0 #a3a3a3, 2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3, 2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3, 2px 0 0 #fff;
    border-radius:4px 0 0 4px;
}
.menu li:last-child {
    border-radius: 0 4px 4px 0;
}
/* Treating the last LI and li:after elements separately */
 .menu li:last-child:after, .menu li.selected:last-child:after {
    box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3, -2px 0 0 #fff;
    border-radius:0 4px 4px 0;
}
.menu li:hover:after, .menu li.selected:after, .menu li:target:after {
    /* This property triggers the CSS3 transition */
    opacity:1;
}
.menu:hover li.selected:after, .menu:hover li:target:after {
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}
.menu li.selected:hover:after, .menu li:target:hover:after {
    opacity:1 !important;
}
/* Styling the anchor elements */
 .menu li a {
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster, Arial, sans-serif;
    padding: 12px 12px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}
.content {
    width:800px;
    height:750px;
    position:relative;
    top:-75px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    -moz-border-radius: 20px;
    border-radius: 20px;
    z-index:-1;
}
.copy {
    display:inline;
    padding-left:20px;
    padding-right:20px;
    width:500px;
    position:absolute;
    top:125px;
    left:200px;
    background-color:#AAC1D9;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 4px 5px 5px 0px #999;
    -webkit-box-shadow: 4px 5px 5px 0px #999;
    box-shadow: 4px 5px 5px 0px #999;
}
.copy p {
    font-size:18px;
    font-weight:bold;
}
.copy li {
    font-size:18px;
    padding:10px;
    font-weight:100;
}
.photocontainer {
    position:relative;
    top:-80px;
    left:30px;
    width:300px;
    margin-right:10%;
    margin-left:auto;
}
.image1 {
    background-image:url("http://mdifl.com/img/2D-ultrasound-profile.jpg");
    position:absolute;
    top:0px;
    left:0px;
    height:194px;
    width:250px;
    animation:image1move 9s infinite;
    -webkit-animation:image1move 9s infinite;
}
@keyframes image1move {
    0% {
        z-index:1;
        top:0px;
        left:0px;
    }
    33% {
        z-index:2;
        top:10px;
        left:20px;
    }
    66% {
        z-index:3;
        top:20px;
        left:40px;
    }
    100% {
        z-index:1;
        top:0px;
        left:0px;
    }
}
@-webkit-keyframes image1move
/* Safari and Chrome */
 {
    0% {
        z-index:1;
        top:0px;
        left:0px;
    }
    33% {
        z-index:2;
        top:10px;
        left:20px;
    }
    66% {
        z-index:3;
        top:20px;
        left:40px;
    }
    100% {
        z-index:1;
        top:0px;
        left:0px;
    }
}
.image2 {
    z-index:3;
    background-image:url("http://mdifl.com/img/3D-ultrasound-face.jpg");
    position: absolute;
    top:0px;
    left:0px;
    height:194px;
    width:250px;
    animation:image2move 9s infinite;
    -webkit-animation:image2move 9s infinite;
}
@keyframes image2move {
    0% {
        z-index:2;
        top:10px;
        left:20px;
    }
    33% {
        z-index:3;
        top:20px;
        left:40px;
    }
    66% {
        z-index:1;
        top:0px;
        left:0px;
    }
    100% {
        z-index:2;
        top:10px;
        left:20px;
    }
}
@-webkit-keyframes image2move
/* Safari and Chrome */
 {
    0% {
        z-index:2;
        top:10px;
        left:20px;
    }
    33% {
        z-index:3;
        top:20px;
        left:40px;
    }
    66% {
        z-index:1;
        top:0px;
        left:0px;
    }
    100% {
        z-index:2;
        top:10px;
        left:20px;
    }
}
.image3 {
    background-image:url("http://mdifl.com/img/2D-ultrasound-color-doppler.jpg");
    position: absolute;
    top:0px;
    left:0px;
    height:194px;
    width:250px;
    animation:image3move 9s infinite;
    -webkit-animation:image3move 9s infinite;
}
@keyframes image3move {
    0% {
        z-index:3;
        top:20px;
        left:40px;
    }
    33% {
        z-index:1;
        top:0px;
        left:0px;
    }
    66% {
        z-index:2;
        top:10px;
        left:20px;
    }
    100% {
        z-index:3;
        top:20px;
        left:40px;
    }
}
@-webkit-keyframes image3move
/* Safari and Chrome */
 {
    0% {
        z-index:3;
        top:20px;
        left:40px;
    }
    33% {
        z-index:1;
        top:0px;
        left:0px;
    }
    66% {
        z-index:2;
        top:10px;
        left:20px;
    }
    100% {
        z-index:3;
        top:20px;
        left:40px;
    }
}
.footer {
    width:100%;
    margin-top:-50px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.footer a {
    padding-right:10px;
    padding-left:10px;
    text-decoration:none;
    color:#666;
}
:root .footer a:hover {
    color:#00F \0/IE9;
}
/* IE9 */

/* internet explorer sucks monkey balls.*/
 .footer a:hover {
    background-color:#CCC;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
4

2 回答 2

4

z-indexof.content是负数，导致它被放置在堆栈的底部。您可以定位到<body>并给它一个z-index值 >= 0或者您可以将z-indexof更改.content为 >= 0，然后只给出.nav一个.header更高的值：

.content {
     position: relative;
     z-index: 1;
}

.header {
     position: relative;
     z-index: 2;
}

.nav {
    position: relative;
    z-index: 3;
}

示例：http: //jsfiddle.net/zadrs/1/

于 2013-09-26T00:21:34.623 回答
2

这是因为您在该类上放置了一个负索引content，所以它位于所有其他元素的后面（以及其中的输入）。重新排序您的 z-indexes，以便content该类不在与输入字段重叠的任何其他元素后面。

于 2013-09-26T00:27:40.910 回答