我对 position:relative 有疑问；我的导航和我的 Logo 位于导航中间，一切正常，但是当我设置我的 slider (FlexSlider) 时，我的 Logo 状态在后面而不是前面，我的 slider 图像有 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;}
如果您需要任何额外信息，请随时提出要求。 谢谢!
最佳答案
你可以尝试改变这三个部分:
#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 设置为绝对值。
关于jquery - 相对位置不适用于元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22774369/