如何打开 div 并使消息可读？答案

【问题标题】：How to open div and making message readible?如何打开 div 并使消息可读？
【发布时间】：2016-12-18 11:05:06
【问题描述】：

我用 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

【问题讨论】：

您是否进行了任何更改？单击“打开”时没有推送任何内容。
对不起，我改变了问题而不是代码，但是打开的消息仍然不可读
也许可以给它添加一个背景，这样下面的文字就会被覆盖——见 fork：codepen.io/azizn/pen/oYJrgg?editors=1111
我怎样才能保持简单，即没有背景？
把它弄模糊什么的

标签： javascript html css reactjs

【解决方案1】：

您需要将属性visibility 设置为hidden 的类。

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

【讨论】：