javascript - 如何打开 div 并使消息可读？

Question

我用 reactjs 创建了一个可折叠的 div，这使得我的内容不可读。这是组件的一部分:

<div>
       {/*start collapse*/}
            <div className={"collapse" + (this.state.open ? ' in' : '')}>
            <div className="col-md-12 message"> Hello I am open nice to read this properly !!!<hr/> </div>
            </div
       {/*end collapse*/}
</div>
<div className="col-md-12 more">This should be in same position and not pushed downwards but not visible/ blurred when I click on open</div>
</div>

CSS 看起来像这样:

.message {
      position: relative;
}

div.more {
      position: absolute;
      top: 40px;
      z-index: -1;
}

div.hier {
      position: absolute;
      top: 60px;
      z-index: -1;
}

在 index.html 中我有同样的问题:

<div id="app"></div>
  <div>
    <div class="col-md-12 hier">This should be in same position and not pushed downwards but not visible/ blurred when I click on open</div>
  </div>

我使用哪个 CSS 来使 div 不可见/模糊并且在我点击打开时不被压下？

代码笔 here

Answer 1

您需要有一个属性 visibility 设置为 hidden 的类。

将此应用于 HTML 元素将使标记不可见，但会保持它在页面上的分配空间不变。