Tengo un elemento para el que estoy comprobando el evento de clic. y cuando hizo clic, quiero agregar un elemento div basado en las coordenadas del evento. El código está aquí:
$('.quick-popup-icon').click(function (e) { var popup = document.createElement("div") popup.style.top = e.pageY + "px" popup.style.marginLeft = e.pageX + "px" popup.style.position = "absolute" document.body.append(popup) }Cuando la posición del cuerpo no es relativa, funciona bien y el elemento agrega las coordenadas exactas. Pero cuando nuestro cuerpo tiene una posición relativa y necesitamos desplazarnos todo se desmorona. Y debido a que nuestra aplicación es una extensión de Chrome, no puedo cambiar la posición del cuerpo. Aquí está mi pregunta específicamente: ¿Cómo puedo agregar un elemento con la posición absoluta en un documento con la posición relativa para obtener las coordenadas del evento?
La razón por la que todo se desmorona cuando el cuerpo está position: relative; es que un elemento absoluto dentro de un elemento principal con posición relativa o absoluta se ve afectado por la posición del elemento principal.
Por ejemplo, si tiene un div relativo de 200 px desde la izquierda del cuerpo y 500 px desde la parte superior del cuerpo, y tiene un div absoluto dentro de ese div relativo con top: 0; y left: 0 , el div absoluto será 0px desde la parte superior e izquierda del div principal . Aquí hay un ejemplo:
.parent { position: relative; top: 50px; left: 50px; width: 100px; height: 100px; border: 1px solid; } .child { background: blue; width: 50px; height: 50px; position: absolute; top: 0; left: 0; } <div class="parent"> <div class="child"></div> </div>Sin embargo, en el mismo caso, si tuviéramos que hacer que el niño tenga una posición de fijo, arriba: 0 y izquierda: 0 lo haría ir a la esquina superior izquierda de la página.
Ejemplo:
.parent { position: relative; top: 50px; left: 50px; width: 100px; height: 100px; border: 1px solid; } .child { background: blue; width: 50px; height: 50px; /* just changed this line */ position: fixed; top: 0; left: 0; } <div class="parent"> <div class="child"></div> </div> Básicamente, simplemente haga su position: fixed .
EDITAR Si no puede ver el div, agregar un índice z al elemento fijo puede ayudar.
avísame si algo no funciona como quieres para que podamos resolverlo juntos. explicación en código desc.
$('.quick-popup-icon').click(function (e) { const pY = $(this).offset().top, pX = $(this).offset().left; $('<div></div>') .css({ 'top' : (e.clientY - pY ) + "px", 'left' : (e.clientX - pX ) + "px" }) .appendTo( $('body') ); }); // The .offset() method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) relative to the document. // The clientX property returns the coordinate (according to the client area) of the mouse pointer // A demonstration of the differences between clientX and clientY and screenX and screenY: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_screenxy_clientxy body{ position:relative; } body>span{ display:block; position:relative; background:gray; width:50%; min-height:100px; } body>div{ position:absolute; width:10px; height:10px; background:red; z-index:1000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="quick-popup-icon"></span>Creo que estás buscando esto. La mejor de las suertes .
$(function () { $('.quick-popup-icon').click(function (e) { var popup = document.createElement("div") popup.style.top = e.pageY + "px" popup.style.left= e.pageX + "px" popup.style.position = "absolute" popup.style.background="red" popup.style.width="50px" popup.style.height="50px" document.body.append(popup) }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body style="position: relative;"> <div style="background:#228877"> <span style=" display:block;width: 100%;height: 200px" class="quick-popup-icon"></span> </div> </body>