I am learning to design a bulletin board application on React that shows several "sticky notes" on a page. While the components are working correctly I believe that the "notes" on the page are rendering over each other. Sticky Notes rendering over each other(left screen). Here is the HTML,CSS and JavaScript file of my code. https://drive.google.com/open?id=0Bx_XCzMeXydQcm1pQ3Z6d3NOVXM

我正在学习在React上设计一个公告板应用程序,它在页面上显示几个“便笺”。虽然组件工作正常但我相信页面上的“注释”是相互渲染的。粘滞便笺互相渲染(左侧屏幕)。这是我的代码的HTML,CSS和JavaScript文件。 https://drive.google.com/open?id=0Bx_XCzMeXydQcm1pQ3Z6d3NOVXM

I don't think it is the problem with rendering multiple components. If I change line 86 of my render() function of Board Component in Note6.js to the following: <h1 key={i}>{note}</h1> and run it, it shows the output in different lines, which I hope to happen.(refer screen shot image's right window)

我认为渲染多个组件不是问题。如果我将Note6.js中Board Component的render()函数的第86行更改为以下内容:

{note} 并运行它,它会以不同的行显示输出,我希望发生。(参考屏幕截图图像的右侧窗口)

Please help!

1 个解决方案

#1

Problem is probably your the position you set for the note CSS class.

问题可能是你为note CSS类设置的位置。

div.note {
    height: 150px;
    width: 150px;
    background-color: yellow;
    margin: 2px 0;
    position: absolute; /* This line */
    cursor: -webkit-grab;
    -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2);
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2);
}

Try changing position: absolute; to something else, like float: left;

尝试改变位置:绝对;到其他东西,比如浮动:左;

#1