refactor: Removed z-indexes #135 (#136)

assets/index.less

@@ -36,7 +36,6 @@
     height: 4px;
     border-radius: @border-radius-base;
     background-color: tint(@primary-color, 60%);
-    z-index: 1;
   }
 
   &-handle {
@@ -49,7 +48,6 @@
     border-radius: 50%;
     border: solid 2px tint(@primary-color, 50%);
     background-color: #fff;
-    z-index: 2;
 
     &:hover {
       border-color: tint(@primary-color, 20%);
@@ -68,7 +66,6 @@
     left: 0;
     width: 100%;
     font-size: 12px;
-    z-index: 3;
   }
 
   &-mark-text {
@@ -89,7 +86,6 @@
     width: 100%;
     height: 4px;
     background: transparent;
-    z-index: 1;
   }
 
   &-dot {
@@ -236,7 +232,6 @@
   position: absolute;
   left: -9999px;
   top: -9999px;
-  z-index: 4;
   visibility: visible;
 
   .borderBox();
@@ -278,4 +273,4 @@
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
   }
-}
+}

examples/custom-handles.js

@@ -16,7 +16,6 @@ const handleStyle = {
   background: '#fff',
   fontSize: '14px',
   textAlign: 'center',
-  zIndex: 3,
 };
 
 const CustomHandle = props => {

src/Slider.jsx

@@ -468,11 +468,11 @@ class Slider extends React.Component {
              onTouchStart={disabled ? noop : this.onTouchStart.bind(this)}
              onMouseDown={disabled ? noop : this.onMouseDown.bind(this)}
         >
-          {handles}
           {tracks}
           <Steps prefixCls={prefixCls} vertical = {vertical} marks={marks} dots={dots} step={step}
                  included={isIncluded} lowerBound={bounds[0]}
                  upperBound={bounds[bounds.length - 1]} max={max} min={min} />
+          {handles}
           <Marks className={prefixCls + '-mark'} vertical = {vertical} marks={marks}
                  included={isIncluded} lowerBound={bounds[0]}
                  upperBound={bounds[bounds.length - 1]} max={max} min={min} />