reactjs做组件时html元素重叠的方法

元素重叠有多种方法

1，使用z-index

2，使用css的position属性，父relative-子absolute搭配

3，使用css的float方法

4，其他

在编写reactjs组件时，希望这个组件内所有内容是一个整体，否则在使用组件过程中会出现很多问题。比如一个图片滚动carousel组件，有至少三部分：图片，向左按钮，向右按钮，按钮需要在图片上面。简单代码如下：

<div id="main">
    <div id="picdiv"><img id="pic"/></div>
    <div id="leftbutton"></div>
    <div id="rightbutton"></div>
</div>

1，如果使用z-index，将main的z-index设为1，将picdiv和pic设为2，将leftbutton和rightbutton设为3，能达到按钮在图片上的效果。但与其他控件组合使用时，会出问题。我们在该控件上叠加“点赞按钮”，如果不设置z-index大于等于3，则点赞按钮在下面无法显示。如果维护很多z-index则比较费劲，在reactjs开发中很不合适。

2，使用css的position属性能避免第一种方法产生的问题。我们将main的position设置为relative，leftbutton和rightbutton设置为absolute，显示效果上一样，并且该组件所有元素在一个z-index上。当此组件与其他控件结合使用时，不会出现z-index混乱，也不用费心维护z-index。

.main {
    position:relative;
}
.leftbutton, .rightbotton {
    position:absolute;
}

3，其他方式待考。