Див Абсолют, я покрываю фиксированный Див

<!DOCTYPE html>
<html>
	<head>
		<title>
			Pagina de ejemplo
		</title>
		<link type="text/css" rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="cabecera">
		<p class="titulo" id="inicio"></p>
		<p class="inicio"></p>
		</div>
		<div class="menu">
		<ul>
		<li><a href="#inicio" class="enlace">Inicio</a></li>
		<li><a href="#contacto" class="enlace">Contacto</a></li>
		<li><a href="#articulos" class="enlace">Articulos</a></li>
		</ul>
		</div>
		<div  class="articulos" id="articulos">
		
		</div>
		<div class="contacto" id="contacto">
		<p>Contacto</p>
			<form class="formulario" action="mailto:tarea2@foc.es" method="post" enctype="text/plain">
				<label for="nombre">Nombre:</label> 
				<input type="text" name="nombre"> <br/>
				<label for="apellidos">Apellidos:</label> 
				<input type="text" name="apellidos"> <br/>
				<label for="email">email:</label> 
				<input type="email" name="email"> <br/>
				<label for="mensaje">Mensaje:</label> 
				<textarea class="textarea" placeholder="Escriba su mensaje..."></textarea> </br>
				<input type="submit" value="Enviar">
			</form>
		</div>
		<div class="pie">
		</div>
	</body>
</html>

Хорошо, получается, что при макете страницы я хочу оставить меню выше фиксированным, в таблице стилей есть фиксированная позиция, ниже У меня есть как описание, так и ниже некоторые статьи. У меня обоих они в абсолютном положении. Когда вы прокручиваете страницу вниз, меню фиксируется, с описанием ничего не происходит, но когда вы переходите к статьям, оно охватывает его. Я передаю код:

.menu {
    position:fixed;
    top:0;
    height:10%;
    right:0;
    left:0;
    bottom:auto;
    background-color:yellow;
    visibility:visible;
}
.menu ul {
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 0;
}

.menu ul li {
  float:left; 
  width: 33%;
  height: 100%;
  text-align:center;
  margin:20px 0px 0px 0px;
}
.cabecera {
    position: absolute;
    width:100%;
    height:20%;
    right: 0;
    top:10%;
    left: 0;
    bottom: auto;
    background-color:green;
    text-align:center;
}
.articulos{
    position:absolute;
    width:100%;
    height:80%;
    right: 0;
    top:30%;
    left: 0;
    bottom: auto;
    background-color:gray;
    text-align:center;
}
img {
    width:400px;
    height:220px;
    border-radius:25px;
}
.coche1{
    position:absolute;
    left:10%;
}
.coche2{
    position:absolute;
    right:10%;
}
.coche3{
    position:absolute;
    left:10%;
    top:300%;
}
.coche4{
    position:absolute;
    right:10%;
    top:300%;
}
.pie {
    height:700px;
    bottom:0;
}
1
задан 12.01.2017, 21:09
0 ответов

Размещает свойство z-index к div fixed, таково, который я схватил:

.menu {
    position:fixed;
    top:0;
    height:10%;
    right:0;
    left:0;
    bottom:auto;
    background-color:yellow;
    visibility:visible;
    z-index: 999;

}

Если ты видишь, что оно продолжает происходить, добавляет divs absolute нижний z-index.

0
ответ дан 03.12.2019, 17:41