html - CSS:为什么我的 HTML 元素以某种方式相对定位？

Question

相对定位，我的意思是当高度时，当我尝试添加标题时，下面的其他元素将被“向下推”。

document.querySelector(".toggler").addEventListener("click", function(event){
  this.parentElement.classList.toggle("up");
});

*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
}
.box{
  height:100%;
  widows: 100%;
  background-image:url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.slide{
  background:red;
  height:77vh;
  width:55vw;
  
  position:relative;
  left:38vw;
  
  transform:translateY(100vh);
  transition:transform 0.4s ease-out;
}
.toggler{
  /*triangle button*/
  position:absolute;
  top:-3vh;
  width:0px;
  height:0px;
  border-left: 27.5vw solid transparent;
  border-right:27.5vw solid transparent;
  border-bottom: 3vh solid white;
}
/*See JS for 'up' is used.*/
.slide.up{
  transform:translateY(23vh);
}
.slide.up .toggler{
  transform:translateY(3vh) rotateX(180deg);
}

<div class='box'>
  <div class='slide up'>
    <span class='toggler'></span>
  </div>
</div>

现在，如果您尝试在 DIV 中输入带有 class='box' 的单词，红色矩形 slider 将被向下推，即使这两个元素甚至没有接触。

您在该 DIV 中使用 class="slide up"的 DIV 之前键入的单词将显示在左上角的结果中。

我花了很长时间试图找出问题所在。我做不到。

EDIT-1:这个问题与 JS 无关。我删除了JS代码，问题依旧。

EDIT-2:我将 .slide 类上的 CSS“位置”从相对更改为绝对。虽然没有奏效，但结果有点不同。使用 RELATIVE，当我尝试添加标题时，矩形会被下推，但您无法向下滚动以查看其余部分。使用 ABSOLUTE，您可以向下滚动以查看矩形的隐藏部分。我不知道为什么会这样。我有溢出:隐藏在 .box 上。

Answer 1

position:relative; 不同于position:absolute:它仍然保持元素在文档流中。 relative 只是意味着您可以使用 top 或 left。但它仍在文档流中，当您将内容添加到其上方的容器时，它就会移动。

如果您想要一个不这样做的元素，请使用 position:absolute。