主页 / 问题 / 1595945
Accepted
BlackStar1991
Asked:2024-10-07 19:15:51 +0000 UTC2024-10-07 19:15:51 +0000 UTC

跟踪具有绝对值的元素的位置

  • 772

有这样一个功能性任务的基本例子。两个块，子级相对于父级具有绝对定位并且大于其大小。它超出了边缘。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.absolute {
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
  background-color: pink;
}
<div class="block">
  <div class="absolute"></div>
</div>

问题 - 如何确保孩子永远不会离开屏幕的可见区域？ 限制器

如何编写一个处理程序（也许有人知道 CSS 中的解决方案），以保证在调整浏览器窗口大小时，子窗口（粉色块）不会超出范围。也就是说，一旦范围接近带有“position:absolute;”的块它的父级开始移动，并且仅当视口变得小于宽度时： calc(100% + 40px);显示屏会坏。

为了清楚起见，另一个例子

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.absolute {
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
  background-color: pink;
}
<div class="block">
  <img class="absolute" src="https://placehold.co/340x340?text=Hello+World" alt="image">
</div>

调整范围大小时，浏览器由父元素引导并缩放元素，.block但我感兴趣的是如何绑定到子元素position:absolute;

javascript

2 个回答

  1. Best Answer

    您可以使用容器的边距来补偿空间，其值是内部元素超出边界的值

    body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  
  margin: 20px;
}

.absolute {
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
  background-color: pink;
}
    <div class="block">
  <img class="absolute" src="https://placehold.co/340x340?text=Hello+World" alt="image">
</div>

    • 1

  2. 我仍然不确定我是否正确理解了这个问题。我重点关注作者添加的图片。我的方法假设我们知道 CSS 级别的块位置。

    @property --block-left {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --block-top {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --toggler {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

body {
  margin: 0;
  position: relative;
  --block-left: 0px;
  --block-top: 0px;
}

.block {
  position: relative;
  margin-left: var(--block-left);
  margin-top: var(--block-top);
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  box-sizing: border-box;
  animation: anim 3s ease-in-out alternate infinite;
}

.absolute {
  position: absolute;
/*
    left: max(-20px, calc(-1 * var(--block-left)));
    top: max(-20px, calc(-1 * var(--block-top)));

    left: min(calc((100vw - 340px) - var(--block-left)), -20px);
    top: min(calc((100dvh - 340px) - var(--block-top)), -20px);
*/
  left: calc( (1 - var(--toggler)) * max(-20px, calc(-1 * var(--block-left))) + var(--toggler) * min(calc((100vw - 140px) - var(--block-left)), -20px));
  top: calc( (1 - var(--toggler)) * max(-20px, calc(-1 * var(--block-top))) + var(--toggler) * min(calc((100dvh - 140px) - var(--block-top)), -20px));
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
}

@keyframes anim {
  from {
    --block-left: 0px;
    --block-top: 0px;
    --toggler: 0;
  }
  to {
    --block-left: calc(100vw - 100px);
    --block-top: calc(100dvh - 100px);
    --toggler: 1;
  }
}
    <div class="block">
  <img class="absolute" src="https://placehold.co/140x140?text=Hello+World" alt="image">
</div>

    • 1

相关问题