css - que - span html significado

Posición fija pero relativa al contenedor.

Question

Estoy tratando de arreglar un div para que siempre se pegue a la parte superior de la pantalla, usando:

position: fixed;
top: 0px;
right: 0px;

Sin embargo, el div está dentro de un contenedor centrado. Cuando uso la position:fixed , corrige el div relación con la ventana del navegador, por ejemplo, está contra el lado derecho del navegador. En su lugar, debe ser fijo en relación con el contenedor.

Sé que position:absolute se puede usar para arreglar un elemento en relación con el div , pero cuando se desplaza hacia abajo en la página, el elemento desaparece y no se pega a la parte superior como con position:fixed .

¿Hay algún truco o solución para lograr esto?

Answer 1

Sí, según las especificaciones, hay un camino.

Si bien estoy de acuerdo en que Graeme Blackwood debería ser la respuesta aceptada, ya que prácticamente resuelve el problema, debe tenerse en cuenta que un elemento fijo puede colocarse en relación con su contenedor.

Noté por accidente que al aplicar

-webkit-transform: translateZ(0);

para el cuerpo, se convirtió en un niño fijo en relación con él (en lugar de la ventana gráfica). Así que mis elementos fijos a la left y top propiedades top ahora eran relativas al contenedor.

Así que investigué un poco y descubrí que el problema ya estaba cubierto por Eric Meyer e incluso si se sentía como un "truco", resulta que esto forma parte de las especificaciones:

Para los elementos cuyo diseño está gobernado por el modelo de cuadro CSS, cualquier valor que no sea ninguno para la transformación resulta en la creación de un contexto de apilamiento y un bloque que contiene. El objeto actúa como un bloque de contención para los descendientes de posición fija.

http://www.w3.org/TR/css3-transforms/

Por lo tanto, si aplica cualquier transformación a un elemento padre, se convertirá en el bloque contenedor.

Pero...

El problema es que la implementación parece defectuosa / creativa, porque los elementos también dejan de comportarse como fijos (incluso si este bit no parece ser parte de la especificación).

El mismo comportamiento se encontrará en Safari, Chrome y Firefox, pero no en IE11 (donde el elemento fijo seguirá siendo fijo).

Otra cosa interesante (no documentada) es que cuando un elemento fijo está contenido dentro de un elemento transformado, mientras que sus propiedades top e left ahora estarán relacionadas con el contenedor, respetando la propiedad de box-sizing , su contexto de desplazamiento se extenderá sobre el borde del elemento, como si box-sizing se estableció en border-box . Para algunos creativos, esto podría convertirse en un juguete :)

TEST

Answer 2

Dos elementos HTML y CSS puro (navegadores modernos).

Vea este ejemplo de jsFiddle. Cambie el tamaño y vea cómo los elementos fijos se mueven incluso con los elementos flotantes en los que se encuentran. Use la barra de desplazamiento más interna para ver cómo funcionaría el desplazamiento en un sitio (los elementos fijos permanecen fijos).

Como muchos han dicho aquí, una tecla no establece ninguna configuración posicional en el elemento fixed (sin valores top , right , bottom o left ).

Más bien, colocamos todos los elementos fijos (observe cómo el último cuadro tiene cuatro de ellos) primero en el cuadro en el que se colocarán, así:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Luego usamos el margin-top y el margin-left para "moverlos" en relación con su contenedor, algo así como lo hace este CSS:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Tenga en cuenta que debido a que fixed elementos fixed ignoran todos los demás elementos de diseño, el contenedor final en nuestro violín puede tener múltiples elementos fixed y aún tener todos esos elementos relacionados con la esquina superior izquierda. Pero esto solo es cierto si todos se colocan primero en el contenedor, ya que este violín de comparación muestra que si se dispersa dentro del contenido del contenedor, el posicionamiento no es confiable .

Si la envoltura es static , relative o absolute en el posicionamiento, no importa.

Answer 3

Con CSS puro no puedes lograrlo; al menos yo no tengo Sin embargo puedes hacerlo con jQuery de manera muy simple. Te explicaré mi problema, y ​​con un pequeño cambio puedes usarlo.

Así que para empezar, quería que mi elemento tuviera una parte superior fija (desde la parte superior de la ventana) y un componente izquierdo para heredar del elemento principal (porque el elemento principal está centrado). Para configurar el componente izquierdo, simplemente coloque su elemento en el elemento primario y establezca la position:relative para el elemento principal.

Luego, necesita saber cuánto de la parte superior de su elemento está cuando la barra de desplazamiento está en la parte superior (y cero desplazado); Hay dos opciones de nuevo. Lo primero es que es estático (algún número) o hay que leerlo desde el elemento padre.

En mi caso es de 150 píxeles desde la parte superior estática. Entonces, cuando ves 150, ¿cuánto es el elemento de la parte superior cuando no hemos desplazado?

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css(''top'',150+wtop+''px'');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css(''top'',150+wtop+''px'');
});

Answer 4

Creé un jsfiddle para demostrar cómo funciona esto usando transformar.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$(''.fixedContainer'').on(''click'', function() {
    $(''.right'').animate({''width'': ''0px''});
  $(''.left'').animate({''width'': ''100%''});
});

https://jsfiddle.net/bx6ktwnn/1/

Answer 5

En realidad, esto es posible y la respuesta aceptada solo se refiere a la centralización, lo cual es bastante sencillo. Además, realmente no es necesario utilizar JavaScript.

Esto te permitirá lidiar con cualquier escenario:

Configure todo como lo haría si quisiera posicionar: absoluto dentro de una posición: contenedor relativo, y luego cree un nuevo div de posición fija dentro del div con position: absolute , pero no establezca sus propiedades superior e izquierda. Luego se fijará donde lo desee, en relación con el contenedor.

Por ejemplo:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Lamentablemente, esperaba que este hilo resolviera mi problema con los píxeles de desenfoque de sombra de caja de WebKit de Android como márgenes en elementos de posición fija, pero parece que es un error.
De todos modos, espero que esto ayude!

Answer 6

Es posible si usas JavaScript. En este caso, el plugin jQuery Sticky-Kit :

Answer 7

Esto es fácil (según HTML abajo)

El truco es NO usar la parte superior o izquierda en el elemento (div) con "posición: fijo;". Si no se especifican, el elemento "contenido fijo" aparecerá RELATIVO al elemento que lo contiene (el div con "position: relative;") ¡INSTEAD OF relativo a la ventana del navegador!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv(''divTermsOfUse'');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Lo anterior me permitió ubicar un botón de "X" de cierre en la parte superior de una gran cantidad de texto en un div con desplazamiento vertical. La "X" se encuentra en su lugar (no se mueve con el texto desplazado y, sin embargo, se mueve hacia la izquierda o hacia la derecha con el contenedor div adjunto cuando el usuario redimensiona el ancho de la ventana del navegador. ¡El elemento envolvente horizontalmente!

Antes de que funcionara, la "X" se desplazaba hacia arriba y fuera de la vista cuando bajaba el contenido del texto.

Disculpas por no proporcionar mi función hideDiv () de javascript, pero innecesariamente prolongaría esta publicación. Opté por mantenerlo lo más corto posible.

Answer 8

He creado este complemento de jQuery para resolver un problema similar que estaba teniendo donde tenía un contenedor centrado (datos tabulares), y quería que el encabezado se corrigiera en la parte superior de la página cuando se desplazaba la lista, pero quería anclarlo a Los datos tabulares estarán en cualquier lugar donde coloque el contenedor (centrado, izquierda, derecha) y también permita que se mueva hacia la izquierda y hacia la derecha con la página cuando se desplaza horizontalmente.

Aquí está el enlace a este complemento de jQuery que puede resolver este problema:

https://github.com/bigspotteddog/ScrollToFixed

La descripción de este plugin es la siguiente:

Este complemento se utiliza para fijar elementos en la parte superior de la página, si el elemento se hubiera desplazado fuera de la vista, verticalmente; sin embargo, permite que el elemento continúe moviéndose hacia la izquierda o hacia la derecha con el desplazamiento horizontal.

Dada una opción marginTop, el elemento dejará de moverse verticalmente hacia arriba una vez que el desplazamiento vertical haya alcanzado la posición de destino; pero, el elemento aún se moverá horizontalmente a medida que la página se desplaza hacia la izquierda o hacia la derecha. Una vez que la página se ha desplazado hacia atrás pasando la posición de destino, el elemento se restaurará a su posición original en la página.

Este complemento se ha probado en Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Uso para su caso particular:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $(''#mydiv'').scrollToFixed();
});

Answer 9

Hice algo así hace un tiempo atrás. Era bastante nuevo en JavaScript, así que estoy seguro de que puedes hacerlo mejor, pero aquí hay un punto de partida:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Necesitará establecer su ancho, y luego obtiene el ancho de la ventana y cambia el margen cada pocos segundos. Sé que es pesado, pero funciona.

Answer 10

La respuesta es sí, siempre y cuando no establezca la left: 0 o right: 0 después de establecer la posición div en fijo.

http://jsfiddle.net/T2PL5/85/

Echa un vistazo a la barra lateral div. Es fijo, pero está relacionado con el padre, no con el punto de vista de la ventana.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

Answer 11

Mi proyecto es .NET ASP Core 2 Plantilla MVC Angular 4 con Bootstrap 4. Agregar "sticky-top" en el componente principal de la aplicación html (es decir, app.component.html) en la primera fila funcionó de la siguiente manera:

<div class=''row sticky-top''>
    <div class=''col-sm-12''>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class=''col-sm-3''>
        <nav-menu></nav-menu>
    </div>
    <div class=''col-sm-9 body-content''>
        <router-outlet></router-outlet>
    </div>
</div>

¿Es esa la convención o he simplificado demasiado esto?

Answer 12

Mira esto:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>

Answer 13

Otra solución extraña para lograr una posición fija relativa es convertir su contenedor en un iframe, de esa manera su elemento fijo puede fijarse a la ventana gráfica del contenedor y no a toda la página.

Answer 14

Puede utilizar la position: sticky propiedad position: sticky .

Aquí hay un ejemplo CODEPEN demuestra el uso y también en qué se diferencia de la position: fixed .

A continuación se explica cómo se comporta:

1. Un elemento con posición adhesiva se posiciona en función de la posición de desplazamiento del usuario. Básicamente actúa como position: relative hasta que un elemento se desplaza más allá de un desplazamiento específico, en cuyo caso se convierte en posición: fija. Cuando se desplaza hacia atrás, vuelve a su posición anterior (relativa).

2. Afecta el flujo de otros elementos en la página, es decir, ocupa un espacio específico en la página (al igual que position: relative ).

3. Si se define dentro de algún contenedor, se posiciona con respecto a ese contenedor. Si el contenedor tiene algún desbordamiento (desplazamiento), dependiendo del desplazamiento de desplazamiento, se convierte en posición: fijo.

Entonces, si desea lograr la funcionalidad fija pero dentro de un contenedor, use sticky.

Answer 15

Puedes darle una oportunidad a mi plugin jQuery, FixTo .

Uso:

$(''#mydiv'').fixTo(''#centeredContainer'');

Answer 16

Respuesta corta: no. (Ahora es posible con la transformación CSS. Consulte la edición a continuación)

Respuesta larga: el problema con el uso de posicionamiento "fijo" es que elimina el flujo del elemento. por lo tanto, no se puede volver a colocar en relación con su padre porque es como si no tuviera uno. Sin embargo, si el contenedor es de un ancho fijo y conocido, puede usar algo como:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edición (03/2015):

Esta es información obsoleta. Ahora es posible centrar el contenido de un tamaño dinámico (horizontal y verticalmente) con la ayuda de la magia de la transformación CSS3. Se aplica el mismo principio, pero en lugar de usar el margen para compensar su contenedor, puede usar translateX(-50%) . Esto no funciona con el truco de margen anterior porque no sabe cuánto compensarlo a menos que el ancho sea fijo y no pueda usar valores relativos (como 50% ) porque será relativo al padre y no a la matriz. Elemento al que se aplica. transform comporta de manera diferente. Sus valores son relativos al elemento al que se aplican. Por lo tanto, 50% para transform significa la mitad del ancho del elemento, mientras que 50% para el margen es la mitad del ancho del elemento principal. Esta es una solución de IE9 +

Usando un código similar al del ejemplo anterior, recreé el mismo escenario utilizando un ancho y una altura completamente dinámicos:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Si quieres que esté centrado, puedes hacerlo también:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Población:

jsFiddle: Centrado solo horizontalmente
jsFiddle: Centrado tanto horizontal como verticalmente
El crédito original va al usuario aaronk6 por señalarlo en esta respuesta.

Answer 17

Simplemente saque los estilos superior e izquierdo de la posición fija div. Aquí un ejemplo

<div id=''body'' style=''height:200%; position: absolute; width: 100%; ''>
    <div id=''parent'' style=''display: block; margin: 0px auto; width: 200px;''>
        <div id=''content'' style=''position: fixed;''>content</div>
    </div>
</div> 

El #content div se sentará dondequiera que se coloque el div padre, pero se fijará allí.

Answer 18

Tengo el mismo problema, uno de los miembros de nuestro equipo me da una solución. Para permitir la posición del arreglo div y en relación con otro div, nuestra solución es utilizar un contenedor padre que envuelva el div arreglo y el div de desplazamiento.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

css

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

Answer 19

Tuve que hacer esto con un anuncio que mi cliente quería sentarse fuera del área de contenido. Simplemente hice lo siguiente y funcionó a la perfección!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

Answer 20

position: sticky que es una nueva forma de posicionar elementos que es conceptualmente similar a position: fixed . La diferencia es que un elemento con position: sticky comporta como position: relative dentro de su elemento primario, hasta que se alcanza un umbral de desplazamiento dado en la ventana gráfica.

En Chrome 56 (actualmente beta desde diciembre de 2016, estable en enero de 2017) posición: sticky está de vuelta.

https://developers.google.com/web/updates/2016/12/position-sticky

Más detalles están en Stick your landings! Posición: tierras pegajosas en WebKit .

Answer 21

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}