Question

我的位置有问题：相对;我的导航中间有我的导航徽标，一切正常但是当我设置我的滑块（FlexSlider）我的徽标状态而不是正面时，我的滑块图像宽度为100％，我不知道在哪里CSS中的问题。

我将代码留在下面，希望你们能教我一些魔力。

<!doctype html>
<html lang="es">
<head>

    <meta charset="UTF-8">

    <title>Kasa Lopez</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>

</head>
<body>

    <header id="header">

        <nav id="nav">
            <ul  id="nav-left">
                <li>
                    <a href="index.html">Inicio</a>
                </li>

                <li>
                    <a href="somos.html">Somos</a>
                </li>

                <li>
                    <a href="servicios.html">Servicios</a>
                </li>
            </ul>

                <h1 id="logo"><a href="index.html">Kasa Lopez</a></h1>

            <ul id="nav-right">
                    <li>
                        <a href="curriculum.html">Curriculum</a>
                    </li>

                    <li>
                        <a href="portafolio.html">Portafolio</a>
                    </li>

                    <li>
                        <a href="contacto.html">Contacto</a>
                    </li>
            </ul>


        </nav> <!-- Termina Menu -->

    </header>


    <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
                <img src="img/slider1.jpg" />
            </li>
            <li>
                <img src="img/slider2.jpg" />
            </li>
          </ul>
        </div>
    </section><!--Ends Slider-->

    <div id="main-container">

        <section class="cajas-titulo">
            <div class="line"></div>
                <article class="titulo">

                    <p>
                        Nuestro proceso de <span class="bold">Trabajo</span>
                    </p>

                </article>
            <div class="line2"></div>
        </section>

现在，css。

body { 

    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 16px;

}

/* CLASSES */

.cb { clear: both}


/* HEADER */

#header {

    background: white;
    height: 120px;
    width: 100%;

}

#nav {

    width: 748px;
    height: 120px;
    margin: 0 auto;
    position: relative;
}

#nav-left {

    float: left;
}


#nav-left, #nav-right {

    display: block;
    margin: 0;
    padding: 60px 0 0 0 ;
}

#nav-left li, #nav-right li {
    display: inline-block;
    margin-left: 50px;
}

#nav-left li:first-child {

    margin-left: 20px;
}

#nav-left li a, #nav-right li a {

    color: #9C9A9F;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: ease 0.5s;


}

#nav-left li a:hover, #nav-right li a:hover {

    border-bottom: 2px solid #EA7637;
}

#nav-right {

    float: right;
}

#logo {

    width: 135px;
    position: absolute;
    height: 220px;
    left: 310px;
    text-indent: -9999px;
    background: url('../img/logo.jpg') no-repeat;


}

#logo a {

    display: block;

}


/* SLIDER */

.slider {
    height: 580px;
    width: 100%;
}


.slider ul { margin: 0; padding: 0;}
.slider img { min-width: 100%; height: 580px;}
.slider li { display: none;}

如果您需要任何额外信息，请随时提出要求。谢谢！

Answer 1

您可以尝试更改这三个部分：

#logo {

    width: 135px;
    position: absolute;
    height: 220px;
    left: 310px;
    text-indent: -9999px;
    background: url('../img/logo.jpg') no-repeat;
    z-index:999999;
}

#nav {

    width: 748px;
    height: 120px;
    margin: 0 auto;
    position: relative;
    z-index:1;
}

.slider {
    height: 580px;
    width: 100%;
    z-index: 1;
    position:relative;
}

Z-index关于层位置的事情。也许它可以帮助你一点点。 z-index比其背后的大多数都要小。

还要注意，绝对元素对于相对于它的第一个元素是绝对的。如果你不希望#logo与#nav相关，你需要制作#nav position：absolute。

位置相对不适用于元素

1 个答案: