fixed - ejemplos - Div posicionado fijo dentro de un div padre relativo

div html ejemplos

Question

Actualmente estoy construyendo un sitio web receptivo y necesito un menú para ser arreglado, por lo tanto, no me desplazo cuando el resto del sitio se desplaza. el problema es que es un diseño fluido y quiero que el elemento de menú "posición fija" se arregle en relación con el elemento principal que contiene y no a la ventana del navegador. ¿Hay de todos modos esto se puede hacer?

Answer 1

Aquí hay una solución más genérica, que no depende de la altura del menú / encabezado. Su solución Pure CSS, totalmente receptiva, funciona a la perfección en IE8 +, Firefox, Chrome, Safari, Opera. Es compatible con el desplazamiento de contenido sin afectar el menú / encabezado.

Pruébalo con ese violín de trabajo

El HTML:

<div class="Container">
<div class="First">
<p>The First div height is not fixed</p>
<p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, using Pure CSS 2.1 only</p>
</div>
<div class="Second">
<div class="Wrapper">
<div class="Centered">
<p>The Second div should always span the available Container space.</p>
<p>This content is vertically Centered.</p>
</div>
</div>
</div>
</div>

El CSS:

*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '''';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '''';
clear: both;
display: block;
}
/*This part his relevant only for Vertically centering*/
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Wrapper:before
{
content: '''';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}

Answer 2

Esta pregunta surgió primero en Google, aunque antigua, así que estoy publicando la respuesta de trabajo que encontré, que puede ser de utilidad para otra persona.

Esto requiere 3 divs incluyendo el div fijo.

HTML

<div class="wrapper">
<div class="parent">
<div class="child"></div>
</div>
</div>

CSS

.wrapper { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }

Answer 3

Esto es posible si mueve el <div> fijo usando márgenes y no posiciones:

#wrap{ position:absolute;left:100px;top:100px; }
#fixed{
position:fixed;
width:10px;
height:10px;
background-color:#333;
margin-left:200px;
margin-top:200px;
}

Y este HTML:

<div id="wrap">
<div id="fixed"></div>
</div>

Juega un poco con este jsfiddle .

Answer 4

Gavin,

El problema que está teniendo es una mala interpretación del posicionamiento. Si desea que sea "fijo" en relación con el padre, entonces realmente quiere que su #fixed sea position:absolute que actualizará su posición con respecto al padre.

Esta pregunta describe completamente los tipos de posicionamiento y cómo usarlos de manera efectiva.

En resumen, tu CSS debería ser

#wrap{
position:relative;
}
#fixed{
position:absolute;
top:30px;
left:40px;
}

Answer 5

Probar posición: pegajoso en el elemento padre.

Answer 6

Puedes arreglar la envoltura usando posicionamiento absoluto. y la divisa interior da una posición fija.

.wrapper{
position:absolute;
left:10%;// or some valve in px
top:10%; // or some valve in px
}

y div dentro de eso

.wrapper .fixed-element{
position:fixed;
width:100%;
height:100%;
margin-left:auto; // to center this div inside at center give auto margin
margin-right:auto;
}

prueba esto podría funcionar para ti

Answer 7

Una cosa simple que puede hacer es colocar su DIV fijo en relación con el resto de su página con los valores de%.

Echa un vistazo a este jsfiddle aquí donde el DIV fijo es una barra lateral.

div#wrapper {
margin: auto;
width: 80%;
}
div#main {
width: 60%;
}
div#sidebar {
position: fixed;
width: 30%;
left: 60%;
}

Y una breve imagen a continuación que describe el diseño anterior:

Answer 8

Una solución fácil que no implica recurrir a JavaScript y que no romperá las transformaciones de CSS es simplemente tener un elemento sin desplazamiento, del mismo tamaño que su elemento de desplazamiento, posicionado de manera absoluta sobre él.

La estructura básica de HTML sería

<div class="parent-to-position-by">
<div class="fixed-elements">
<div class="fixed">
I am &quot;fixed positioned&quot;
</div>
</div>
<div class="scrolling-contents">
Lots of contents which may be scrolled.
</div>
</div>

• parent-to-position-by sería el div relativo para posicionar algo fijo con respecto a.
• scrolling-contents abarcaría el tamaño de este div y contendría sus contenidos principales
• fixed-elements es solo un div posición absoluta que abarca el mismo espacio sobre la parte superior del div scrolling-contents .
• posicionando de forma absoluta el div con la clase fixed , logra el mismo efecto que si estuviera fijo con respecto al div padre. (o los contenidos de desplazamiento, ya que abarcan ese espacio completo)

Aquí hay un js-fiddle con un ejemplo de trabajo.