title: How can I grey out page except for one element?
body: <p>How can I make a greyed out overlay on a page, but have one element in that page not greyed out?</p>
  
  <p>There are many questions like this asked but none of them work:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/1511745/hide-all-elements-except-one-div-for-print-view">Hide all elements except one div for print view</a> - This one does not work for my situation as I do not want to hide everything.</li>
  <li><a href="https://stackoverflow.com/questions/22249885/disable-everything-except-a-div-element">Disable everything except a DIV element</a> - This one the second answer seems similar to mine. But even if I change z-index of my desired ungreyed out element the whole page stays greyed out. Also, I found no difference between using <code>div</code> and <code>iframe</code>.</li>
  <li><a href="https://stackoverflow.com/questions/26087286/want-to-make-the-whole-page-in-grayscale-except-specified-div">Want to make the whole page in grayscale except specified div</a> - This one just makes everything else greyscale but I do not want that.</li>
  </ul>
  
  <p>From the example below I want everything greyed out except for <code>&lt;input class="edit-title" value="Site Title"&gt;</code>. Right now my code greys out most of the page, I can grey out the whole page if I change</p>
  
  <pre><code>.overlay {
    z-index: -1;
  }
  </code></pre>
  
  <p>to </p>
  
  <pre><code>.overlay {
    z-index: 0;
  }
  </code></pre>
  
  <p>Is there a way to grey out everything except <code>&lt;input class="edit-title" value="Site Title"&gt;</code>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    box-sizing: border-box;
  }
  
  .overlay {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    background: rgba(0, 0, 0, .4);
    z-index: -1;
  }
  
  edit-title {
    z-index: 100;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  body,
  input,
  optgroup,
  select,
  textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }
  
  body {
    font-size: 13px;
    line-height: 1.4;
    color: #555;
    margin: 0;
    padding: 0;
    background: white;
    overflow-x: hidden;
  }
  
  .button {
    font-weight: bold;
    color: #fff;
    border: 1px solid #44aa76;
    border-width: 0 0 3px 0;
    background-color: #66cc98;
    padding: 5px;
    border-radius: 6px;
    text-align: center;
  }
  
  .button:focus,
  .button:hover,
  .active {
    cursor: pointer;
    background-color: #44aa76;
    color: #fff;
    outline: none;
  }
  
  header {
    width: 100%;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: center;
    padding: 30px 0 10px;
    margin-bottom: 10px;
  }
  
  input {
    font-size: 13px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 8px;
  }
  
  input:focus {
    outline: none;
    border-color: #ddd;
  }
  
  [type="search"] {
    -webkit-appearance: textfield;
  }
  
  [type="search"]::-webkit-search-cancel-button,
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  .search {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }
  
  .search input[type="search"] {
    width: 100%;
  }
  
  label {
    font-size: 13px;
    margin-right: 5px;
  }
  
  .save-button {
    width: 30px;
    height: 30px;
    line-height: 27px;
    padding: 0;
    margin: 0 10px;
  }
  
  h1 {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 22px;
    padding: 4px 0;
  }
  
  .container {
    position: relative;
    padding: 0 15px;
    width: 360px;
    max-width: 100%;
    margin: 0;
  }
  
  .reading-list {
    margin-bottom: 15px;
  }
  
  .reading-item {
    border-radius: 3px;
    padding: 0;
    margin: 10px 0 0 0;
    background-color: #f7f7f7;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.5s ease 0s;
  }
  
  .reading-item .item-link {
    text-decoration: none;
    display: block;
    width: 100%;
    color: #555;
    padding: 10px 50px 10px 56px;
    min-height: 56px;
  }
  
  .reading-item .item-link:focus,
  .reading-item .item-link:hover {
    color: #66cc98;
    background-color: #fff;
  }
  
  .reading-item .item-link span {
    display: block;
  }
  
  .reading-item .item-link span.title {
    font-weight: bold;
  }
  
  .reading-item .favicon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 1px;
  }
  
  .reading-item .item-link:hover .favicon {
    border-color: #66cc98;
  }
  
  .reading-item .delete-button {
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 100%;
    padding: 0;
    width: 20px;
    height: 20px;
    border: 0;
    background-color: transparent;
    color: #ccc;
    transform: rotateZ(0) scale(1);
    transition: transform 0.3s ease, box-shadow 0.5s ease;
  }
  
  .reading-item .edit-button,
  .reading-item .save-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 0;
    width: 10px;
    height: 10px;
    border: 0;
    background-color: transparent;
    color: #ccc;
    border-radius: 0;
    margin: 0;
  }
  
  .reading-item .delete-button:hover {
    background-color: #ccc;
    color: #fff;
    transform: rotateZ(90deg) scale(2);
    box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="popup-page"&gt;
    &lt;div class="container"&gt;
      &lt;header&gt;
        &lt;h1 data-localize="appName"&gt;Reading List&lt;/h1&gt;
        &lt;button class="button save-button" id="savepage"&gt;+&lt;/button&gt;
      &lt;/header&gt;
      &lt;div class="search"&gt;
        &lt;label for="my-search" data-localize="search"&gt;Search&lt;/label&gt;
        &lt;input type="search" id="my-search" name="search" autocomplete="off"&gt;
      &lt;/div&gt;
  
      &lt;div class="reading-list" id="reading-list"&gt;
        &lt;div class="reading-item read"&gt;
          &lt;a value="www.example.com" class="button delete-button"&gt;×&lt;/a&gt;
          &lt;a class="item-link" href="www.example.com" alt="Reading List"&gt;
            &lt;input class="edit-title" value="Site Title"&gt;
            &lt;span class="host"&gt;example.com&lt;/span&gt;
          &lt;/a&gt;
          &lt;img src="/icons/save.svg" class="button save-button"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class="overlay" id="overlay"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/qyca9489/" rel="noreferrer">https://jsfiddle.net/qyca9489/</a></p>