如何在更改屏幕宽度的同时使绝对定位的元素在另一个元素之前结束？

问题描述

让我们假设我们有一个“父”块，它由许多元素（包括一个按钮）组成。通过按下此按钮，用户应该看到一个“滑动”元素，该元素将覆盖父块而不是整个宽度，而只会覆盖按钮本身（如笔上所看到的块1和2）。因此，幻灯片应该永远在按钮之前结束。即使改变了屏幕的宽度。如何实施？

See on Code Pen

<div class='parent'>
 <div class='first'>1</div>
 <div class='second'>2</div>
 <div class='btn'>Button</div>
 <div class='third'>3</div>

   <div class='slide'>
       Hello 
   </div>
</div>

 .parent {
    display: flex; 
}

 .first,.second,.third {
    padding: 30px;
}

 .first {
   background-color: salmon;
   flex-basis: 120px;
}

 .second {
   background-color: yellow;
   flex-grow: 1
}

.third {
   background-color: #56D7F7;
   flex-grow: 1
}

.btn {
   background-color: red;
   cursor: pointer;
}

.slide {
  position: absolute;
  left: 0
}

解决方法

您可以使用一些CSS样式的Javascript来实现。要打开幻灯片，请按计算的数量按比例放大；要关闭，只需将其缩放回原始大小即可。

您可能不希望缩放slide元素，因为如果其中包含任何内容，这似乎会有点歪斜，但是没有太多的工作来更改此解决方案以使用翻译。

我不认为有一个纯粹的CSS解决方案，因为您必须计算按钮的位置，但是我当然可能错了！

let open = false;

slide.style.setProperty('transform-origin','left top');
slide.style.setProperty('transition','linear .4s all');

button.addEventListener('click',(event) => { 
  if (open) {
    slide.style.setProperty('transform',`scaleX(1)`);
    open = false;

  } else {
    const first = slide.offsetWidth;
    const last = button.offsetLeft;
    const scale = last / first;
    
    slide.style.setProperty('transform',`scaleX(${scale})`);

    open = true;
  }
})

.parent {
  display: flex;
  position: relative;
}

.first,.second,.third {
  padding: 30px;
}

.first {
  background-color: salmon;
  flex-basis: 120px;
}

.second {
  background-color: yellow;
  flex-grow: 1
}

.third {
  background-color: #56D7F7;
  flex-grow: 1
}

.btn {
  background-color: red;
  cursor: pointer;
}

.slide {
  position: absolute;
  background-color: green;
  width: 40px;
  left: 0;
  top: 0;
  bottom: 0;
}

<div class='parent'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div id="button" class='btn'>Button</div>
  <div class='third'>3</div>

  <div id="slide" class='slide'>
    <div class='hello'>
    </div>
  </div>
</div>