元素重叠有多种方法
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,其他方式待考。