Как расположить абсолютный элемент в определенных координатах тела с относительным положением?

ProgramBox

Как расположить абсолютный элемент в определенных координатах тела с относительным положением?

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

У меня есть элемент, который я проверяю на наличие события щелчка. и когда он щелкнул, я хочу добавить элемент div, основанный на координатах события.Код находится здесь:

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

Когда положение тела не является относительным, оно работает нормально, и элемент добавляет точные координаты. Но когда наше тело имеет относительное положение и нам нужно прокрутить, все разваливается на части. И поскольку наше приложение является расширением Chrome, я не могу изменить положение тела.
Вот мой конкретный вопрос: как я могу добавить элемент с абсолютной позицией в документ с относительной позицией с получением координат события.

1. У вас есть возможность сделать всплывающее position: fixed; окно ?

2. @isaacsan123 Да! Это не работает. на самом деле при добавлении фиксированной позиции div не появляется.

3. Ах, может быть, это проблема с индексом z. Попробуйте добавить что-то вроде z-index: 9000; , просто чтобы проверить это.

4. @isaacsan123 Это не работает. Я не вижу добавленного div.

5. Не могли бы вы опубликовать фрагмент кода, чтобы продемонстрировать ошибку? Было бы проще определить, что не работает, потому что в следующем примере, похоже, все работает нормально, если только вы не хотите, чтобы код выполнял какие-то другие функции, о которых я не знаю: codepen.io/isaac-svi/pen/dyREYQj

Ответ №1:

Причина, по которой все разваливается, когда тело находится position: relative; , заключается в том, что абсолютный элемент внутри относительного или абсолютного родительского элемента зависит от положения родительского элемента.

Например, если у вас есть относительный div 200 пикселей слева от тела и 500 пикселей сверху тела, и у вас есть абсолютный div внутри этого относительного div с top: 0; и left: 0 , абсолютный div будет на 0 пикселей сверху и слева от родительского div. Вот пример:

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

Однако в том же случае, если бы мы хотели, чтобы у ребенка было фиксированное положение, верхнее:0 и левое:0 заставили бы его перейти в верхний левый угол страницы.

Пример:

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

В принципе, просто сделайте свое всплывающее position: fixed окно .

ОТРЕДАКТИРУЙТЕ, если вы не видите div, добавление z-индекса к фиксированному элементу может помочь.

Ответ №2:

дайте мне знать, если что-то пойдет не так, как вы хотите, чтобы мы могли решить это вместе. пояснение по коду 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>

Ответ №3:

Я думаю, что вы ищете это. Желаю удачи.

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

Метки: Как расположить абсолютный элемент в определенных координатах тела с относительным положением?