时间戳

首页 > 解决方案 > 即使在html，css，js中更改父级的宽度大小，如何防止坐标折叠

javascript - 即使在html，css，js中更改父级的宽度大小，如何防止坐标折叠

问题描述

div.area__box 使用 position: relative, absolute 放置在 div.area 中。

我的代码看起来像

<style type="text/css">
      .area {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        overflow: hidden;
        position: relative;
      }

      .area__box {
        position: absolute;
        width: 200px;
        height: 124px;
        left: 50px;
        top: 50px;
        background-color: red;
        cursor: move;
      }
</style>
<div.area>
  <div.area__box>
  </div>
</div>

即使父项的宽度大小发生更改，我也想防止坐标折叠

我的代码不起作用。

例如，当div.area的width大小为676px时，我在div.area__box中设置了position：absolute，left：50px，top：50px。之后，如果宽度大小从 676px 变为 462px，

设置的“left: 50px, top: 50px”值变得毫无意义

屏幕短 676px 时

在此处输入图像描述

屏幕短 462px 时

在此处输入图像描述

我怎么解决这个问题？如果您知道任何提示，请告诉我。

我的完整代码是：

<!DOCTYPE html>
<html>
  <head>
    <!--  -->
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .parent {
        width: 50vw;
        height: 380px;
      }
      .area {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        overflow: hidden;
        position: relative;
      }

      .area__box {
        position: absolute;
        width: 200px;
        height: 124px;
        left: 50px;
        top: 50px;
        background-color: red;
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="area">
        <div class="area__box"></div>
      </div>
    </div>

    <script type="text/javascript">
      let containerGlobalWidth;
      let containerGlobalHeight;
      let containerGlobalLeft;
      let containerGlobalTop;
      let containerGlobalRight;
      let containerGlobalBottom;

      let boxGlobalLeft;
      let boxGlobalTop;
      let boxGlobalRight;
      let boxGlobalBottom;
      const container = document.querySelector(".area");
      const box = container.querySelector(".area__box");

      const resizeObserver = new ResizeObserver(entries => {
        const {
          left: containerLeft2,
          top: containerTop2,
          right: containerRight2,
          bottom: containerBottom2
        } = container.getBoundingClientRect();

        const {
          left: boxLeft2,
          top: boxTop2,
          right: boxRight2,
          bottom: boxBottom2
        } = box.getBoundingClientRect();

        containerGlobalLeft = containerLeft2;
        containerGlobalTop = containerTop2;
        containerGlobalRight = containerRight2;
        containerGlobalBottom = containerBottom2;

        boxGlobalLeft = boxLeft2;
        boxGlobalTop = boxTop2;
        boxGlobalRight = boxRight2;
        boxGlobalBottom = boxBottom2;
      });

      resizeObserver.observe(document.body);

      const {
        width: containerWidth,
        height: containerHeight,
        left: containerLeft,
        top: containerTop,
        right: containerRight,
        bottom: containerBottom
      } = container.getBoundingClientRect();
      containerGlobalWidth = containerWidth;
      containerGlobalHeight = containerHeight;
      containerGlobalLeft = containerLeft;
      containerGlobalTop = containerTop;
      containerGlobalRight = containerRight;
      containerGlobalBottom = containerBottom;

      const {
        width: boxWidth,
        height: boxHeight
      } = box.getBoundingClientRect();

      let isDragging = null;
      let originLeft = null;
      let originTop = null;
      let originX = null;
      let originY = null;
    </script>
  </body>
</html>

感谢您阅读我的问题。

标签： javascripthtmlcssresponsive-design

解决方案

推荐阅读