Question

我有一个元素，我通过点击收缩和扩展。在其合同状态下，它必须保持在另一个元素之上。此其他元素的位置将相对于视口发生变化。我无法弄清楚如何做到这一点。

在我展示的例子中，我希望粉红色的粉红色正方形始终保持在青色广场上方（青色广场仅作为粉红色正方形所在的标记），并且扩展的粉红色正方形占据整个视口。

只有三种状态：

1）粉红色元素在收缩时将位于青色元素之上。

2）当粉红色元素展开时，它会移动到视口的右上角，同时扩展其宽度和高度以匹配视口。

3）粉红色元素占据整个视口。

现在，当调整视口大小时，缩小的粉红色元素不会保留在青色元素的顶部。

我下面有一个片段，还有一个CodePen。

＆＃13;

let parent = document.getElementById("parent");
let dynamicChild = document.getElementById("dynamicChild");

window.addEventListener('click', function() {
  if (dynamicChild.style.width === '50px') {
    dynamicChild.style.width = '100%';
    dynamicChild.style.height = '100%';

    dynamicChild.style.right = '0';
    dynamicChild.style.top = '0';
  }  else {
    dynamicChild.style.width = '50px';
    dynamicChild.style.height = '50px';

    dynamicChild.style.right = '100px';
    dynamicChild.style.top = '46px';
  }
}, false)

＆＃13;

/* STATIC, doesn't change */
html, body {
  height: 100%;
}

/* STATIC, doesn't change */
body {
  margin: 0;
  position: relative;
  width: 100%;
  background-color: black;
}

/* STATIC, doesn't change */
#wrapper {
  padding-top: 20px;
}

/* STATIC, doesn't change */
#parent {
  width: 80%;
  margin: 0 auto;
  height: 100px;
  border: 1px solid #999;
  
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* #dynamicChild's width and height change */
#staticChild, #dynamicChild {
  width: 50px;
  height: 50px;
}

/* STATIC, doesn't change */
#staticChild {
  background-color: teal;
}

/* #dynamicChild's position will change. */
#dynamicChild {
  background-color: pink;
  position: absolute;
  right: 100px;
  top: 46px;
  transition-property: width, height, top, right;
  transition-timing-property: ease-in;
  transition-duration: 2s;
  transition-delay: 0;
}

＆＃13;

<div id="wrapper">
  <div id="parent">
    <div id="staticChild"></div>
    <div id="dynamicChild"></div>
  </div> 
</div>

＆＃13;

Answer 1

我不知道这是否是您正在寻找的内容，但您的动态孩子会position: absolute top: 100px。所以总是渲染到视口顶部下方100px。

如果您希望静态子项位于动态子项下方：

提升你充满活力的孩子
降低你的静态孩子
请勿使用position: absolute和top: 100px。有很多选择

如何扩展和收缩元素，使其在收缩状态下始终位于另一个元素上方？

1 个答案: