title: How to 'disable collisions' without position:absolute in CSS
body: <h2>Background Information</h2>
  <br/>
  I am working on a horizontal menu in HTML(Pug) and CSS(SASS). I would like to make it so that whenever you click on an icon, it becomes highlighted. Here is an approximation of what I want:
  <br/>
  [A menu like the one I want from https://codepen.io/ainalem/pen/pXrVmQ][1]
  <br/>
  <h2>The Problem</h2>
  I want to use a seperate element (called .bg-block) that will go behind the selected element.
  <h2>Don't start making fun of me yet...</h2>
  Sounds like a beginner's problem, right?
  <pre><code>position: absolute
  </code></pre>
  <p>Done! No problem, and probably the first thing you learn! But what if you can't use <em>position: absolute</em>?</p>
  <h2>To get to the point...</h2>
  I want to disable collisons and have an element with the behavior of _position: absolute_, without using _position: absolute_. Is it even possible? I doubt, it, but I don't doubt the power of StackOverflow.
  <h2>But why?</h2>
  I'm doing this because if my element is position: relative, I can use top:, left:, right: and bottom: relative to it's normal position. I think this would work better when I want to adjust where the .bg-block is.
  <br/>
  Also, I'm interested in any other way possible and in the power of StackOverflow. 
  <br/>
  If you need some background code to play around with, here it is, from my pen:
  <pre><code>.menu
    display: flex
    flex-direction: row
    align-items: center
    justify-content: center
    
    *
      height: 100px
      width: 100px
      margin: 10px
      cursor: pointer
      display: flex
      flex-direction: column
      align-items: center
      justify-content: center
      transition: transform 80ms ease-in
    
    p
      cursor: text
      margin-top: 0
      letter-spacing: 0px
      
      
    img
      margin-bottom: 5px
      
    .home, .search, .inbox
      &amp;:active
        transform: scale(0.95)
      
      
    .bg-block
      position: absolute
      background-color: lightblue
      z-index: -1
      position: relative
  
  </code></pre>
  <pre><code>.menu
    .bg-block
    .home
      img(src=&quot;https://cdn0.iconfinder.com/data/icons/typicons-2/24/home-256.png&quot;)
      p Home
      
    .search
      img(src=&quot;https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-256.png&quot;)
      p Search
    .inbox
      img(src=&quot;https://cdn2.iconfinder.com/data/icons/maki/100/post-256.png&quot;)
      p Inbox
  
  </code></pre>
  <p>PLEASE NOTE: I'm using SASS (with the SASS formatting, not SCSS) and Pug for my HTML. I'm sorry for any inconvenience you might have, but if you have an answer in normal HTML and CSS I would love to hear them, too (and plus it'll be the same thing in PUG and SASS just better looking).</p>