How to position an absolute element in the specific coordinates of the body with a relative position-CodePudding

I have an element that I'm checking the click event for it. and when it clicked I want to add a div element based on the coordinates of the event.The code is here:

$('.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)
}

When the body position isn't relative it's working fine and the element is adding in the exact coordinates. But when our body has a relative position and we need to scroll everything falls apart. And because our application is a Chrome extension I can't change the position of the body. Here is my question specifically: How can I append an element with the absolute position in a document with the relative position with getting the event coordinates.

CodePudding user response：

The reason why everything falls apart when the body is position: relative; is that an absolute element inside of a relative or absolute positioned parent element is affected by the position of the parent element.

For example, if you have a relative div 200px from the left of the body and 500px from the top of the body, and you have an absolute div inside of that relative div with top: 0; and left: 0, the absolute div will by 0px from the top and left of the parent div. Here's an example:

.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>

However, in the same case, if we were to make the child have a position of fixed, top:0 and left:0 would make it go to the top-left corner of the page.

Example:

.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>

Basically, just make your pop up position: fixed.

EDIT If you can't see the div, adding a z-index to the fixed element can help.

CodePudding user response：

let me know if something doesn't working as you want so we can solve this together. explaination at code 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>

CodePudding user response：

I think you are looking for this. Best of luck.

 $(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>