位置相對不適用於元素

我有位置問題：相對;我有我的導航與我的標誌在導航中間，一切正常，但當我設置我的滑塊（FlexSlider）我的標誌statys而不是面前，我的滑塊圖像有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;}

如果您需要任何額外的信息，可隨時提出要求。謝謝！

來源

2014-03-31 Alex

你可以嘗試改變這三個部分：

#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-指數線約層位置的事情。也許它可以幫助你一點。比它後面的大多數Z指數更小。

另請注意，絕對元素對於其上的第一個元素是絕對的。如果你不希望#logo與#nav相關，你需要使#nav position：absolute。

來源

2014-04-01 00:10:52 Zini

位置相對不適用於元素

回答

相關問題