Question

通过相对定位，我的意思是当高度方式时，当我尝试添加标题时，下面的其他元素将被按下＆＃39;。

＆＃13;

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

＆＃13;

*{
  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);
}

＆＃13;

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

＆＃13;

现在，如果您尝试使用class =＆＃39; box＆＃39;在DIV中键入某个单词，红色矩形滑块将被按下，即使这两个元素甚至不会触及。

你在DIV里面输入的那个单词，在它里面用类=＆＃34;向上滑动＆＃34;，将显示在左上角的结果中。

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

EDIT-1 ：这个问题与JS无关。我删除了JS代码，问题仍然存在。

EDIT-2 ：我改变了CSS＆＃39;的位置＆＃39; .slide类从相对到绝对。虽然它不起作用，但结果有点不同。使用RELATIVE，当我尝试添加标题时，矩形会向下推，但您无法向下滚动以查看其余部分。使用ABSOLUTE，您可以向下滚动以查看矩形的隐藏部分。我不知道为什么会这样。我有溢出：隐藏在.box。

Answer 1

position:relative;与position:absolute不同：它仍然将元素保留在文档流中。 relative只是意味着您可以使用top或{{1}等参数将其从默认位置（与使用＆＃34;静态＆＃34;时相同）移开}}。但它仍然在文档流程中，当您向其上方的容器添加内容时，它会被移动。

如果您想要一个不能这样做的元素，请使用left。

CSS：为什么我的HTML元素在某种程度上相对定位？

1 个答案: