html - CSS 弄乱了我的代码

Question

我的页面在可以访问我提供的 CSS 文件时无法正确显示。当它只是 .html 时，它看起来像这样，当它可以访问 css 和图像文件时，它看起来像这样，当它只有 css 时，它只有你可以在第二张图片中看到的橙色小矩形。它应该在背景上显示文本输入框。

我很想知道它有什么问题以及如何修复它，这就是代码的样子

<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Find The Twin</title>

    <link href="css/estilos.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <!-- LOGIN -->
    <div class="login"  id="loguin">
        <div class="cabezalTarjeta">login | registro</div>
        <h2>Mail:</h2>
        <div class="respuestas clearfix">
            <input type="text" id="mail"/>
        </div>
        <h2>Nombre:</h2>
        <div class="respuestas clearfix">
            <input type="text" id="nombre"/>
        </div>
        <h2>País:</h2>
        <div class="respuestas clearfix">
            <select id="pais">
                <option>Seleccione su país...</option>
                <option>Argentina</option>
                <option>Brasil</option>
                <option>Paraguay</option>
                <option>Perú</option>
                <option>Uruguay</option>
            </select>
        </div>
        <h2>Edad:</h2>
        <div class="respuestas clearfix">
            <input type="text" id="edad"/>
        </div>
        <input type="button" id="comenzarJuego" value="Comenzar juego">
    </div><!-- FIN LOGIN -->

    <!-- INICIO CONFIGURACION -->
    <div class="configuracion" id="configuracion">
        <div class="cabezalTarjeta">Configuración</div>

        <h2>Medidas</h2>
             <div class="respuestas clearfix">
            <h2>Ancho:</h2>
            <input type="text" id="ancho"/>
            <h2>Alto:</h2>              
            <input type="text" id="alto"/>
        </div>
        <input type="button" id="asignarValores" value="Asignar valores">
    </div><!-- FIN CONFIGURACION -->

    <div class="contenido">
        <!-- INICIO CABEZAL -->
        <div class="cabezal clearfix">
            <img src="img/logo.png">
            <div id="intentos"></div>
            <!-- DIV PARA PONER EL MENU ADENTRO -->
             <div class="contenedorMenu clearfix">


             </div><!-- FIN DIV PARA EL MENU -->

        </div>
        <!-- FIN CABEZAL -->

        <!-- INICIO JUEGO -->
        <div class="contenedorInterior">
            <div class="juego">
                <table>
                <tr>
                    <td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td>
                </tr>
                <tr>
                <td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_cebra.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td>
                </tr>
                <tr>
                <td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_hipopotamo.png"></td><td><img src="img/piezas/img_vacio.png"></td>
                </tr>
                <tr>
                <td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td><td><img src="img/piezas/img_vacio.png"></td>
                </tr>

                </table>

            </div> <!-- FIN JUEGO -->


         <!-- EJEMPLO DE TABLAS CON DATOS 
         <div class="tablas">
            <table>
            <tr><th>País</th><th>Promedio</th></tr>
            <tr><td>Uruguay</td><td>11.5</td></tr>
            <tr><td>Brasil</td><td>16</td></tr>
            </table>
        </div>

        -->
        </div><!-- FIN CONTENEDOR INTERIOR -->


    </div> <!-- FIN CONTENEDOR-->



    <img src="img/cometa.png" class="cometa">
    <img src="img/plane.png" class="avion">
</body>

这是css文件

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

body
{
    background:url(../img/background.jpg) fixed;
    background-size:cover;
        margin:0px;
        padding:0px;
        font-family: 'Droid Sans', sans-serif;
}

.overlay
{
    background-color: rgba(0,0,0,0.50);
    width:100%;
    height:100%;
    z-index: 110;
    position:absolute;
    display: none;
}


.login, .configuracion
{
    width:280px;
    /*height:420px;*/
    background-color: #FC0;
    border-style:solid;
    border-width:1px;
    border-color:#000;
    position:absolute;
    top:50px;
    left:50%;
    z-index:120;
    margin-left:-140px;
    display:none;
}

.cabezalTarjeta
{
    background-color: #E67739;
    width:240px;
    height:30px;
    margin:15px;
    color:#fff;
    font-size:20px;
    padding:70px 10px 0px 0px;
    text-align:right;
    font-weight:bold;
}
 #intentos{
     float:right;
      color:#333;
      background-color: #E67739;
    padding:10px ;
    margin:0px;
    font-family: 'Droid Serif', serif;
    font-size:25px;
    line-height: 28px;} 
.tarjeta h2, .login h2, .configuracion h2
{
    color:#333;
    padding:10px 15px 0 15px;
    margin:0px;
    font-family: 'Droid Serif', serif;
    font-size:25px;
    line-height: 28px;
}

.tarjeta input[type="radio"]
{
    float:left;
    clear:left;
    display:block;
    margin:5px 2px 0px 10px;
}

.login input[type="text"], select,  .configuracion input[type="text"]
{
    width: 240px;
    height:30px;
    margin:5px 2px 0px 14px;
    font-size:20px;
    font-family: 'Droid Serif', serif;
}

.tarjeta label, .configuracion label
{
    float:left;
    display:block;
    clear:right;
    margin: 5px 10px 0px 3px;
    width:230px;
}


#botonRespuesta, #comenzarJuego, #reiniciarJuego, #asignarValores
{
    display:block;
    width:200px;
    height:40px;
    margin:0px auto 15px auto;
    color:#29505E;
    font-weight:bold;
    font-size:15px;

}

.contenido
{
    width:960px;
    margin:0 auto;
}

.juego table
{
    margin:0 auto;
}

.contenido ul
{
    float:right;
    margin-top:50px;


}

.contenido li
{
    float:left;
    list-style-type:none;
    font-weight:bold;
    font-size:16px;
    color:#FFF;
    padding:15px;
    background-color:#FC0;
    margin: 0 10px;
}

.cometa
{
    position:fixed;
    right:0;
    top:100px;
}

.avion
{
    position:fixed;
    left:10px;
    top:150px;
}

.tablas
{
    margin:50px 0;
}

.tablas table
{
    margin: 0 auto;
    font-size:14px;
    background-color:rgba(0,0,0,.7);
    color:#EEE;
    width:500px;
}

.tablas td, .tablas th
{
    padding:10px 30px;
    border-bottom: 1px solid #666;
    text-align:center;
}

.tablas th
{
    font-size:20px;
    font-weight:bold;
}

score 0 · Accepted Answer

只需将输入元素的 css 更改为高于您想要在其后面的 html 代码元素的 Z-index。默认情况下，一切都位于 z-index:0 上；

如果你想在上面“分层”一些东西，只需输入 z-index:1; 或 z-index:100；这已经在您的代码中用于覆盖（例如 z-index:110;）这可能很好，但如果您希望您的字段高于此，那么只需将 z-index:111 或更高的输入字段放入您的 css页。

html - CSS 弄乱了我的代码

1 回答 1

Related

Reference