move z-index setting to zero instant container, and add ability for zindex to be set on container

3 files changed, 10 insertions, 2 deletions

diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
index ce38e28b9..a78607afa 100644
--- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -31,7 +31,6 @@ export const SlideAnimation =
     animation-iteration-count: 1;
     animation-fill-mode: ${props => props.animationDirection || 'none'};
     position: relative;
-    z-index: -1;
 `;
 
 export interface SlideAnimationComponentProps {
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index c45f6e5e9..02b16e39f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -26,6 +26,7 @@ export interface ContainerProps {
     className?: string;
     backgroundColor?: ColorOption;
     hasBoxShadow?: boolean;
+    zIndex?: number;
 }
 
 const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
@@ -52,6 +53,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
     ${props => cssRuleIfExists(props, 'border-bottom')}
+    ${props => cssRuleIfExists(props, 'z-index')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 56e4f091c..cbbcf979d 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -5,13 +5,20 @@ import { ColorOption } from '../style/theme';
 import { BuyButton } from './buy_button';
 import { InstantHeading } from './instant_heading';
 import { OrderDetails } from './order_details';
+import { SlidingError } from './sliding_error';
 import { Container, Flex } from './ui';
 
 export interface ZeroExInstantContainerProps {}
 
 export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
     <Container width="350px">
-        <Container backgroundColor={ColorOption.white} borderRadius="3px" hasBoxShadow={true}>
+        <Container
+            zIndex={2}
+            position="relative"
+            backgroundColor={ColorOption.white}
+            borderRadius="3px"
+            hasBoxShadow={true}
+        >
             <Flex direction="column" justify="flex-start">
                 <InstantHeading />
                 <OrderDetails />