diff --git a/addon/components/notification-container.js b/addon/components/notification-container.js
index ef51404c..a6705507 100644
--- a/addon/components/notification-container.js
+++ b/addon/components/notification-container.js
@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { htmlSafe } from '@ember/string';
 import { inject as service } from '@ember/service';
 
 import layout from '../templates/components/notification-container';
@@ -13,13 +12,7 @@ export default Component.extend({
   classNameBindings: ['computedPosition', ':ember-cli-notifications-notification__container'],
   attributeBindings: ['computedStyle:style', 'position:data-test-notification-container'],
 
-  zindex: '1060',
-
   computedPosition: computed('position', function() {
     return `ember-cli-notifications-notification__container--${this.get('position')}`;
   }),
-
-  computedStyle: computed('zindex', function() {
-    return htmlSafe(`z-index: ${this.get('zindex')};`);
-  })
 });
diff --git a/addon/styles/components/notification-container.css b/addon/styles/components/notification-container.css
index f8c38c78..3fbfd140 100644
--- a/addon/styles/components/notification-container.css
+++ b/addon/styles/components/notification-container.css
@@ -2,6 +2,7 @@
   --ecn-container-position: 10px;
   --ecn-container-width: 80%;
   --ecn-container-max-with: 400px;
+  --ecn-container-z-index: 1060;
 
   --ecn-icon-width: 30px;
   --ecn-icon-position: 10px;
@@ -28,6 +29,7 @@
   margin: 0 auto;
   width: var(--ecn-container-width);
   max-width: var(--ecn-container-max-with);
+  z-index: var(--ecn-container-z-index),
 }
 
 /* Position */
diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
index 6d91c142..9822145e 100644
--- a/tests/dummy/app/controllers/application.js
+++ b/tests/dummy/app/controllers/application.js
@@ -11,7 +11,6 @@ export default Controller.extend({
   clearDuration: 2800,
   htmlContent: false,
   position: 'top',
-  zindex: '9999',
   clearAll: true,
   cssClasses: 'profile-saved-success-notification',
 
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 00656dbe..00dfb82e 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,4 +1,4 @@
-{{notification-container position=position zindex=zindex}}
+{{notification-container position=position}}
 <div class="bg-blue white py4">
   <div class="max-width-4 mx-auto px2">
     <div class="mb3">
@@ -25,9 +25,9 @@
     <h2>Basic usage</h2>
     <hr>
     <p>Include the container component in your template.</p>
-    <p>Optionally, change the position or z-index value of the notifications container.</p>
+    <p>Optionally, change the position of the notifications container.</p>
     <p class="h5"><i>Default value is top</i></p>
-    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right" zindex="9999"&#125;&#125;</CodeBlock>
+    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right"&#125;&#125;</CodeBlock>
 
     <p>Inject the notifications service where required.</p>
     <CodeBlock @language="js">import Controller from '@ember/controller';