Posición CSS: fijo dentro de un elemento posicionado

Tengo un div posicionado cuyo contenido puede ser demasiado largo para que aparezcan las barras de desplazamiento (overflow:auto conjunto). Funciona como un cuadro de diálogo en una aplicación ajax. Quiero arreglar un botón de cierre en la esquina superior derecha para que cuando el usuario se desplace, no se desplace.Posición CSS: fijo dentro de un elemento posicionado

Lo probé con position:fixed; right:0; top:0 pero colocó el botón en la parte superior derecha de la página no en el div (en firefox).

¿Es posible hacer esta colocación del botón usando CSS solamente sin hackear con el offsetWidth/Height en js en cada evento de desplazamiento?

ps: la altura y el ancho del div no es un valor fijo, depende del tamaño del contenido y el tamaño de la ventana del navegador. El usuario también puede redimensionarlo si así lo desea.

Fuente

2011-02-10 Calmarius

Puede valer la pena considerar el uso de un div con una imagen de fondo de posición fija para el botón. – cloudrave

@NickM parece una buena idea, pero ¿cómo haría clic en el botón? – ithil

@ithil Siempre que el alto y el ancho del div se configuren para coincidir con el de la imagen de fondo, se debe poder hacer clic en él. En cuanto a * manejo * del clic, eso depende de si está usando HTML simple o JS. Si solo es HTML, podría envolver el div en una etiqueta 'a' con un' href' (o incluso simplemente usar una etiqueta 'a' en lugar de' div' y establecerla como 'display: inline-block'). Si es JS, puede escuchar un clic en el 'div'. ¿Entendí tu pregunta correctamente? – cloudrave

Puede usar el position:fixed;, pero sin el conjunto left y top. Luego, lo empujará hacia la derecha usando margin-left, para colocarlo en la posición correcta que desee.

Comprobar una demo aquí: http://jsbin.com/icili5

Fuente

2011-02-10 20:39:00 Sotiris

; de nada, muchachos :) – Sotiris

@Sotiris puede proporcionar una referencia que explique por qué esto ¿Deberia trabajar? ¿Por qué los navegadores colocan un elemento 'fijo' de esta manera cuando' top' y 'left' no están especificados? http://stackoverflow.com/questions/8712047/positionfixed-when-left-top-right-bottom-arent-specified-desired-results-in – Flash

Escribí el JS más intrincado hasta que tropecé con esto. Bonito. – collin

Position:fixed ofrece una posición absoluta con respecto a la ventana NAVEGADOR. así que, por supuesto, va allí.

Mientras position:absolute se refiere al elemento padre, por lo que si usted pone su botón <div> dentro del < div> del contenedor, se debe posicionar en el que quería que fuera. Algo así como

EDITAR: gracias a @Sotiris, que tiene un punto, la solución se puede lograr utilizando una posición: fija y un margen izquierdo. De esta manera: http://jsfiddle.net/NeK4k/

Fuente

2011-02-10 20:32:03

El usuario puede desplazar el botón de cerrar si uso absoluto (ese fue mi primer intento antes de intentar solucionarlo) – Calmarius

Parece que todo el mundo ha leído mal y quiere mantenerlo en la pantalla. En ese caso, debe usar javascript para ubicarlo correctamente en relación con el div en cuestión, o use javascript para desplazarse correctamente mientras usa la posición: absolute – Dominic

parecer, las transformaciones CSS se pueden utilizar

" 'transform' establece un nuevo sistema de coordenadas local en el elemento",

pero ... esto no es un navegador cruzado, parece que solo Opera funciona correctamente

Fuente

2012-04-03 10:44:40 4esn0k

Ahora funciona en Chrome y Firefox. Aquí hay un ejemplo. http://codepen.io/anon/pen/ZOqrYo –

Gracias @PatrickMcElhaney por su ejemplo, esta es la solución que estaba buscando :) – c01gat3

Si su botón de cierre va a ser texto, esto funciona muy bien para mí:

#close { 
    position: fixed; 
    width: 70%; /* the width of the parent */ 
    text-align: right; 
} 
#close span { 
    cursor: pointer; 
}

Luego, su HTML solo puede ser:

<div id="close"><span id="x">X</span></div>

Fuente

2014-03-26 18:19:14 thatmiddleway

La solución seleccionada actual parece haber entendido mal el problema.

El truco es no usar posicionamiento absoluto ni fijo. En cambio, tenga el botón de cierre fuera del div con su posición establecida en relativo y un flotador izquierdo para que esté inmediatamente a la derecha del div. A continuación, establezca un margen izquierdo negativo y un índice z positivo para que aparezca encima del div.

He aquí un ejemplo:

#close 
    { 
     position: relative; 
     float: left; 
     margin-top: 50vh; 
     margin-left: -100px; 
     z-index: 2; 
    } 

#dialog 
    { 
     height: 100vh; 
     width: 100vw; 
     position: relative; 
     overflow: scroll; 
     float: left; 
    } 

<body> 
    <div id="dialog"> 
    **** 
    </div> 

    <div id="close"> </div> 
</body>

Fuente

2015-02-08 11:26:52 Joseph

Una respuesta impresionante, me puso en el camino a una mejor solución para tener un elemento fijo dentro de un div desplazable – RebelFist

Sé que esto es una entrada antigua, pero tenía la misma pregunta, pero no encontró una respuesta que establece la relación fija elemento a un padre div.La barra de desplazamiento en medium.com es una gran solución de CSS puro para establecer algo position: fixed; en relación con un elemento principal en lugar de la ventana gráfica (un poco *). Esto se logra mediante el establecimiento de los padres div-position: relative; y tener una envoltura de botón con el botón position: absolute; y, por supuesto, es position: fixed; de la siguiente manera:

<div class="wrapper"> 
    <div class="content"> 
    Your long content here 
    </div> 

    <div class="button-wrapper"> 
    <button class="button">This is your button</button> 
    </div> 
</div> 

<style> 
    .wrapper { 
    position: relative; 
    } 

    .button-wrapper { 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 50px; 
    } 

    .button { 
    position: fixed; 
    top: 0; 
    width: 50px; 
    } 
</style>

working example

* Dado que los elementos fijos no se desplazan con la página la posición vertical seguirá siendo relativa a la ventana gráfica, pero la posición horizontal es relativa al elemento principal con esta solución.

Fuente

2016-08-02 19:05:07 Lifehack

Pruebe posición: adhesivo en el elemento primario del elemento que desea reparar.

Más información aquí: http://html5-demos.appspot.com/static/css/sticky.html. Precaución: compruebe la compatibilidad de la versión del navegador.

Fuente

2017-06-30 09:01:18

Posición CSS: fijo dentro de un elemento posicionado

Respuesta

Cuestiones relacionadas