title: Div within div to show outside the div
body: <p>I cant seem to be able to do this with relative and absolute positioning like I have with other things, but what I want to achieve is to have a div, with another div within it, however this inner div must appear outside the outer div on screen.</p>
  
  <pre><code>&lt;div class="OuterDiv"&gt;
      &lt;span&gt;Other things&lt;/span&gt;
      &lt;div class="InnerDiv"&gt;
          &lt;span&gt;Inner content&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/H6iMi.png" alt="div placements">
  <br /></p>
  
  <p>EDIT : OK, so this I think is more complex than people are thinking. Using position relative and absolute I have already gotten other things on my page to work. What I have when I try this problem using positioning is</p>
  
  <p><img src="https://i.stack.imgur.com/dmBPs.png" alt="Second Description"></p>
  
  <p>And then disappears completely when moved far enough outside of the outer div</p>
  
  <p>More of my code,</p>
  
  <pre><code>&lt;div class="Item Menu Active" style="display: inline-block;"&gt;
  &lt;div class="ItemList" style="left: -315.859375px;"&gt;
      &lt;div class="Item" style="display: inline-block;"&gt;
          &lt;span&gt;N&lt;/span&gt;
          &lt;div class="ItemList"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Item" style="display: inline-block;"&gt;
          &lt;span&gt;O&lt;/span&gt;
          &lt;div class="ItemList"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Item" style="display: inline-block;"&gt;
          &lt;span&gt;P&lt;/span&gt;
          &lt;div class="ItemList"&gt;
              &lt;div class="Item ClickItem"&gt;
                  &lt;span&gt;p1&lt;/span&gt;
                  &lt;div class="ItemList"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Item" style="display: inline-block;"&gt;
          &lt;span&gt;Q&lt;/span&gt;
          &lt;div class="ItemList"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  .Item {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  padding: 5px 10px 5px 10px;
  cursor: pointer;
  }
  .ItemList {
  display: none;
  z-index: 1;
  min-width: 75px;
  position: absolute;
  top: 100%;
  left: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
  white-space: initial;
  padding: 5px 5px 5px 5px;
  background-color: white;
  border: 1px solid black;
  cursor: default;
  }
  </code></pre>
  
  <p>EDIT 2 : Yes <code>overflow:visible</code> was my problem, issue is that overwrites the <code>overflow-x</code> and <code>overflow-y</code> that I am already using on the .ItemList for vertical scrolling on smaller screens. Any further suggestions?</p>