CSS login Modal opening but only appears in background
<p>My login modal (both, the trigger &amp; the actual modal code) is all in the header bar of the page. works perfectly on most of my pages.</p>

<p>But on some pages where there may be some existing styling, the modal open alright and the page background becomes dark as usual, but... some of the styling on the page "overlay" and appear on top of the modal.. As a result, the modal is not clickable...</p>

<p>Is there any way to modify the modal .css so when it's triggered, it always stays on top of everything else?</p>

<p>Here's the .css code to the modal:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>&gt; .cd-user-modal {
&gt;       position: fixed !important;
&gt;       top: 0 !important;
&gt;       left: 0 !important;
&gt;       width: 100% !important;
&gt;       height: 100% !important;
&gt;       background: rgba(52, 54, 66, 0.9) !important;
&gt;       z-index: 3 !important;
&gt;       overflow-y: auto !important;
&gt;       cursor: pointer !important;
&gt;       visibility: hidden !important;
&gt;       opacity: 0 !important;
&gt;       -webkit-transition: opacity 0.3s, visibility 0.3s !important;
&gt;       -moz-transition: opacity 0.3s, visibility 0.3s !important;
&gt;       transition: opacity 0.3s, visibility 0.3s !important;
&gt;     }
&gt;     .cd-user-modal.is-visible {
&gt;       visibility: visible !important;
&gt;       opacity: 1 !important;
&gt;     }
&gt;     .cd-user-modal.is-visible .cd-user-modal-container {
&gt;       -webkit-transform: translateY(0) !important;
&gt;       -moz-transform: translateY(0) !important;
&gt;       -ms-transform: translateY(0) !important;
&gt;       -o-transform: translateY(0) !important;
&gt;       transform: translateY(0) !important;
&gt;     }
&gt;     .cd-user-modal-container {
&gt;       position: relative !important;
&gt;       width: 90% !important;
&gt;       max-width: 600px !important;
&gt;       background: #FFF !important;
&gt;       margin: 3em auto 4em !important;
&gt;       cursor: auto !important;
&gt;       border-radius: 0.25em !important;
&gt;       -webkit-transform: translateY(-30px) !important;
&gt;       -moz-transform: translateY(-30px) !important;
&gt;       -ms-transform: translateY(-30px) !important;
&gt;       -o-transform: translateY(-30px) !important;
&gt;       transform: translateY(-30px) !important;
&gt;       -webkit-transition-property: -webkit-transform !important;
&gt;       -moz-transition-property: -moz-transform !important;
&gt;       transition-property: transform !important;
&gt;       -webkit-transition-duration: 0.3s !important;
&gt;       -moz-transition-duration: 0.3s !important;
&gt;       transition-duration: 0.3s !important;
&gt;     }
&gt;     .cd-user-modal-container .cd-switcher:after {
&gt;       content: "" !important;
&gt;       display: table !important;
&gt;       clear: both !important;
&gt;     }
&gt;     .cd-user-modal-container .cd-switcher li {
&gt;       width: 50% !important;
&gt;       float: left !important;
&gt;       text-align: center !important;
&gt;     }
&gt;     .cd-user-modal-container .cd-switcher li:first-child a {
&gt;       border-radius: .25em 0 0 0 !important;
&gt;     }
&gt;     .cd-user-modal-container .cd-switcher li:last-child a {
&gt;       border-radius: 0 .25em 0 0 !important;
&gt;     }
&gt;     .cd-user-modal-container .cd-switcher a {
&gt;       display: block !important;
&gt;       width: 100% !important;
&gt;       height: 50px !important;
&gt;       line-height: 50px !important;
&gt;       background: #d2d8d8 !important;
&gt;       color: #809191 !important;
&gt;     }
&gt;     .cd-user-modal-container .cd-switcher a.selected {
&gt;       background: #FFF !important;
&gt;       color: #505260 !important;
&gt;     }
&gt;     @media only screen and (min-width: 600px) {
&gt;       .cd-user-modal-container {
&gt;         margin: 4em auto !important;
&gt;       }
&gt;       .cd-user-modal-container .cd-switcher a {
&gt;         height: 70px !important;
&gt;         line-height: 70px !important;
&gt;       }
&gt;     }
&gt;     .cd-form {
&gt;       padding: 1.4em !important;
&gt;     }
&gt;     .cd-form .fieldset {
&gt;       position: relative !important;
&gt;       margin: 1.4em 0 !important;
&gt;     }
&gt;     .cd-form .fieldset:first-child {
&gt;       margin-top: 0 !important;
&gt;     }
&gt;     .cd-form .fieldset:last-child {
&gt;       margin-bottom: 0 !important;
&gt;     }
&gt;     .cd-form label {
&gt;       font-size: 14px !important;
&gt;       font-size: 0.875rem !important;
&gt;     }
&gt;     .cd-form label.image-replace {
&gt;       /* replace text with an icon */
&gt;       display: inline-block !important;
&gt;       position: absolute !important;
&gt;       left: 15px !important;
&gt;       top: 50% !important;
&gt;       bottom: auto !important;
&gt;       -webkit-transform: translateY(-50%);
&gt;       -moz-transform: translateY(-50%);
&gt;       -ms-transform: translateY(-50%);
&gt;       -o-transform: translateY(-50%);
&gt;       transform: translateY(-50%);
&gt;       height: 20px !important;
&gt;       width: 20px !important;
&gt;       overflow: hidden !important;
&gt;       text-indent: 100% !important;
&gt;       white-space: nowrap !important;
&gt;       color: transparent !important;
&gt;       text-shadow: none !important;
&gt;       background-repeat: no-repeat !important;
&gt;       background-position: 50% 0 !important;
&gt;     }
&gt;     .cd-form label.cd-username {
&gt;       background-image: url("../img/cd-icon-username.svg") !important;
&gt;     }
&gt;     .cd-form label.cd-email {
&gt;       background-image: url("../img/cd-icon-email.svg") !important;
&gt;     }
&gt;     .cd-form label.cd-password {
&gt;       background-image: url("../img/cd-icon-password.svg") !important;
&gt;     }
&gt;     .cd-form input {
&gt;       margin: 0 !important;
&gt;       padding: 0 !important;
&gt;       border-radius: 0.25em !important;
&gt;     }
&gt;     .cd-form input.full-width {
&gt;       width: 100% !important;
&gt;     }
&gt;     .cd-form input.has-padding {
&gt;       padding: 12px 20px 12px 50px !important;
&gt;     }
&gt;     .cd-form input.has-border {
&gt;       border: 1px solid #d2d8d8 !important;
&gt;       -webkit-appearance: none;
&gt;       -moz-appearance: none;
&gt;       -ms-appearance: none;
&gt;       -o-appearance: none;
&gt;       appearance: none;
&gt;     }
&gt;     .cd-form input.has-border:focus {
&gt;       border-color: #343642;
&gt;       box-shadow: 0 0 5px rgba(52, 54, 66, 0.1);
&gt;       outline: none;
&gt;     }
&gt;     .cd-form input.has-error {
&gt;       border: 1px solid #d76666;
&gt;     }
&gt;     .cd-form input[type=password] {
&gt;       /* space left for the HIDE button */
&gt;       padding-right: 65px;
&gt;     }
&gt;     .cd-form input[type=submit] {
&gt;       padding: 16px 0 !important;
&gt;       cursor: pointer !important;
&gt;       background: #2f889a !important;
&gt;       color: #FFF !important;
&gt;       font-weight: bold;
&gt;       border: none !important;
&gt;       -webkit-appearance: none !important;
&gt;       -moz-appearance: none !important;
&gt;       -ms-appearance: none !important;
&gt;       -o-appearance: none !important;
&gt;       appearance: none !important;
&gt;     }
&gt;     .no-touch .cd-form input[type=submit]:hover,
&gt;     .no-touch .cd-form input[type=submit]:focus {
&gt;       background: #3599ae !important;
&gt;       outline: none !important;
&gt;     }
&gt;     .cd-form .hide-password {
&gt;       display: inline-block;
&gt;       position: absolute;
&gt;       right: 0;
&gt;       top: 0;
&gt;       padding: 6px 15px;
&gt;       border-left: 1px solid #d2d8d8 !important;
&gt;       top: 50%;
&gt;       bottom: auto;
&gt;       -webkit-transform: translateY(-50%);
&gt;       -moz-transform: translateY(-50%);
&gt;       -ms-transform: translateY(-50%);
&gt;       -o-transform: translateY(-50%);
&gt;       transform: translateY(-50%);
&gt;       font-size: 14px;
&gt;       font-size: 0.875rem;
&gt;       color: #343642 !important;
&gt;     }
&gt;     .cd-form .cd-error-message {
&gt;       display: inline-block;
&gt;       position: absolute;
&gt;       left: -5px;
&gt;       bottom: -35px;
&gt;       background: rgba(215, 102, 102, 0.9);
&gt;       padding: .8em;
&gt;       z-index: 2;
&gt;       color: #FFF;
&gt;       font-size: 13px;
&gt;       font-size: 0.8125rem;
&gt;       border-radius: 0.25em;
&gt;       /* prevent click and touch events */
&gt;       pointer-events: none;
&gt;       visibility: hidden;
&gt;       opacity: 0;
&gt;       -webkit-transition: opacity 0.2s 0, visibility 0 0.2s;
&gt;       -moz-transition: opacity 0.2s 0, visibility 0 0.2s;
&gt;       transition: opacity 0.2s 0, visibility 0 0.2s;
&gt;     }
&gt;     .cd-form .cd-error-message::after {
&gt;       /* triangle */
&gt;       content: '';
&gt;       position: absolute;
&gt;       left: 22px;
&gt;       bottom: 100%;
&gt;       height: 0;
&gt;       width: 0;
&gt;       border-left: 8px solid transparent;
&gt;       border-right: 8px solid transparent;
&gt;       border-bottom: 8px solid rgba(215, 102, 102, 0.9);
&gt;     }
&gt;     .cd-form .cd-error-message.is-visible {
&gt;       opacity: 1;
&gt;       visibility: visible;
&gt;       -webkit-transition: opacity 0.2s 0, visibility 0 0;
&gt;       -moz-transition: opacity 0.2s 0, visibility 0 0;
&gt;       transition: opacity 0.2s 0, visibility 0 0;
&gt;     }
&gt;     @media only screen and (min-width: 600px) {
&gt;       .cd-form {
&gt;         padding: 2em;
&gt;       }
&gt;       .cd-form .fieldset {
&gt;         margin: 2em 0 !important;
&gt;       }
&gt;       .cd-form .fieldset:first-child {
&gt;         margin-top: 0 !important;
&gt;       }
&gt;       .cd-form .fieldset:last-child {
&gt;         margin-bottom: 0 !important;
&gt;       }
&gt;       .cd-form input.has-padding {
&gt;         padding: 16px 20px 16px 50px !important;
&gt;       }
&gt;       .cd-form input[type=submit] {
&gt;         padding: 16px 0 !important;
&gt;       }
&gt;     }
&gt;     .cd-form-message {
&gt;       padding: 1.4em 1.4em 0;
&gt;       font-size: 14px;
&gt;       font-size: 0.875rem;
&gt;       line-height: 1.4;
&gt;       text-align: center;
&gt;     }
&gt;     @media only screen and (min-width: 600px) {
&gt;       .cd-form-message {
&gt;         padding: 2em 2em 0;
&gt;       }
&gt;     }
&gt;     .cd-form-bottom-message {
&gt;       position: absolute;
&gt;       width: 100%;
&gt;       left: 0;
&gt;       bottom: -30px;
&gt;       text-align: center;
&gt;       font-size: 14px;
&gt;       font-size: 0.875rem;
&gt;     }
&gt;     .cd-form-bottom-message a {
&gt;       color: #FFF;
&gt;       text-decoration: underline;
&gt;     }
&gt;     .cd-close-form {
&gt;       /* form X button on top right */
&gt;       display: block;
&gt;       position: absolute;
&gt;       width: 40px;
&gt;       height: 40px;
&gt;       right: 0;
&gt;       top: -40px;
&gt;       background: url("../img/cd-icon-close.svg") no-repeat center center;
&gt;       text-indent: 100%;
&gt;       white-space: nowrap;
&gt;       overflow: hidden;
&gt;     }
&gt;     @media only screen and (min-width: 1170px) {
&gt;       .cd-close-form {
&gt;         display: none;
&gt;       }
&gt;     }
&gt;     #cd-login,
&gt;     #cd-signup,
&gt;     #cd-reset-password {
&gt;       display: none;
&gt;     }
&gt;     #cd-login.is-selected,
&gt;     #cd-signup.is-selected,
&gt;     #cd-reset-password.is- selected {
&gt;       display: block;
&gt;     }</code></pre>
</div>
</div>
</p>

<p>I will also provide here the actual link to my page. The triggers are on the top right (sign in / sign up) <a href="http://examscan.us/shulemberger/services.php" rel="nofollow">My sample page with the login modal</a></p>

<p>Should anyone need additionally the specific source code, I will gladly provide it. But I think you'll see it right in the source code.</p>