diff --git a/__tests__/src/components/OpenSeadragonViewer.test.js b/__tests__/src/components/OpenSeadragonViewer.test.js
index 1b387e1cf924ba4b64910bb5885ff470cf9eea0a..a6da5617a245d7838d63ecbe999cbada0049c0c7 100644
--- a/__tests__/src/components/OpenSeadragonViewer.test.js
+++ b/__tests__/src/components/OpenSeadragonViewer.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import OpenSeadragon from 'openseadragon';
 import { OpenSeadragonViewer } from '../../../src/components/OpenSeadragonViewer';
+import ZoomControls from '../../../src/containers/ZoomControls';
 
 jest.mock('openseadragon');
 
@@ -30,6 +31,9 @@ describe('OpenSeadragonViewer', () => {
   it('renders child components', () => {
     expect(wrapper.find('.foo').length).toBe(1);
   });
+  it('renders ZoomControls', () => {
+    expect(wrapper.find(ZoomControls).length).toBe(1);
+  });
   describe('tileSourcesMatch', () => {
     it('when they do not match', () => {
       expect(wrapper.instance().tileSourcesMatch([])).toBe(false);
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
index df58c9911fdc38cc7462a8b519b48bf299407e20..9c97077ddc3ae55b0f5a129e40bf5b708de3aa31 100644
--- a/src/components/OpenSeadragonViewer.js
+++ b/src/components/OpenSeadragonViewer.js
@@ -209,8 +209,8 @@ export class OpenSeadragonViewer extends Component {
           ref={this.ref}
         >
           { children }
+          <ZoomControls windowId={windowId} />
         </div>
-        <ZoomControls windowId={windowId} />
       </>
     );
   }
diff --git a/src/containers/ZoomControls.js b/src/containers/ZoomControls.js
index eeb3ed897c62805cd22c7f4d2d1d57137c36a4c5..2f468c4354379592b700fe2a77d50963ff69668f 100644
--- a/src/containers/ZoomControls.js
+++ b/src/containers/ZoomControls.js
@@ -34,6 +34,8 @@ const styles = theme => ({
   zoom_controls: {
     position: 'absolute',
     right: 0,
+    zIndex: 33,
+    top: 0,
   },
   ListItem: {
     paddingTop: 0,