css - posicionamiento - ¿Ocultar contenido desplazable detrás de divs de posición fija transparentes al desplazarse por la página?
posicionamiento de divs (7)
- He arreglado la imagen de fondo
- El fondo del encabezado es transparente.
- No quiero que mi contenido anule mi encabezado transparente
Se me ocurrió una solución desplazando el div en lugar del cuerpo:
<div>
<div class="header"></div>
<div class="content"></div>
</div>
.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }
Tengo un encabezado llamado div que se configura con una posición fija. El problema es que cuando me desplazo por la página, el contenido de la página aparece detrás del encabezado (el encabezado es transparente).
Sé mucho sobre css, pero parece que no puedo resolver esto. He intentado configurar el desbordamiento en oculto, pero sabía que no funcionaría (y no lo hizo).
Esto es muy difícil de explicar, así que hice lo mejor que pude.
html:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
Aquí hay una captura de pantalla del problema:
¿Tiene #header una altura establecida?
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
Bastante seguro de que esto no funcionaría en IE aunque ...
Acabo de llegar tarde, pero en caso de que alguien más se tope con esto en el futuro, aquí está su solución.
Su código CSS:
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
Su HTML:
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
Esto le proporcionará un encabezado que coincide perfectamente con su sitio y que flota en la parte superior. El contenido principal se desplazará libre del encabezado y desaparecerá cuando pase el encabezado. Su .bottom-wrapper padding-top debe ser la altura del contenido de su contenedor de encabezado.
¡Aclamaciones!
Creo que es tarde para responder. Pero luego, alguien eche un vistazo, esto será útil.
Simplemente agregue el fondo a la clase de cabecera
Aquí está el código ->
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:999;
background-color:#FFFFFF;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
<!DOCTYPE html>
<html>
<body>
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
</body>
</html>
Fije la posición del div de contenido debajo del encabezado + desbordamiento-y el div de contenido.
Probablemente estés buscando el z-index Le permite especificar el orden vertical de los elementos en la página, por lo que un elemento con z-index: 10 está flotando sobre (visualmente) un elemento con z-index: 5 .
Dé el contenido z-index: 5 y vea si funciona.
Tenía un problema similar y encontré una solución para mi caso. Debe aplicarse si está utilizando una imagen de fondo de pantalla completa o un color sólido (incluido el blanco).
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
Esto me da el aspecto de una imagen de página completa con un encabezado fijo transparente y cuando el contenido del cuerpo se desplaza, se oculta detrás del encabezado. Las imágenes aparecen sin problemas.
Podría hacer lo mismo con un fondo de color sólido, aunque, posiblemente, habría sido más fácil.
2 notas: el encabezado tiene una altura establecida, solo lo he probado en FF y Chrome.