How to 'disable collisions' without position:absolute in CSS

Question

Background Information

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:
[A menu like the one I want from https://codepen.io/ainalem/pen/pXrVmQ][1]

The Problem

I want to use a seperate element (called .bg-block) that will go behind the selected element.

Don't start making fun of me yet...

Sounds like a beginner's problem, right?

position: absolute

Done! No problem, and probably the first thing you learn! But what if you can't use position: absolute?

To get to the point...

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.

But why?

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.
Also, I'm interested in any other way possible and in the power of StackOverflow.
If you need some background code to play around with, here it is, from my pen:

.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
    &:active
      transform: scale(0.95)
    
    
  .bg-block
    position: absolute
    background-color: lightblue
    z-index: -1
    position: relative

.menu
  .bg-block
  .home
    img(src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/home-256.png")
    p Home
    
  .search
    img(src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-256.png")
    p Search
  .inbox
    img(src="https://cdn2.iconfinder.com/data/icons/maki/100/post-256.png")
    p Inbox

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).

user_8620333 · Answer

You can use position:absolute if you change your HTML code because positon:absolute is the logical way to have what you want. To correctly set up the position you need to consider a shrink-to-fit container that will fit your elements so that you can easily define the space for your position:absolute element.

Here is a basic example. Hover to see the result:

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  display: flex;
  position:relative;
  z-index:0;
}

.wrapper > *{
  height: 100px;
  width: 100px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease-in;
}

.menu p {
  cursor: text;
  margin-top: 0;
  letter-spacing: 0px;
}

.menu img {
  margin-bottom: 5px;
  width:100px;
}

.menu .home:active,
.menu .search:active,
.menu .inbox:active {
  transform: scale(0.95);
}

.menu .bg-block {
  position: absolute;
  top:0;
  left:0;
  background-color: lightblue;
  z-index: -1;
  transition: transform 300ms ease-in;
}

.menu .home:hover ~ .bg-block,
.menu .home:active ~ .bg-block{
  transform:translateX(0);
}
.menu .search:hover ~ .bg-block,
.menu .search:active ~ .bg-block{
  transform:translateX(100%);
}
.menu .inbox:hover ~ .bg-block,
.menu .inbox:active ~ .bg-block{
  transform:translateX(200%);
}



  
    Home
  
  
    Search
  
  
    Inbox

And if you really don't want position:absolute consider an element with 0 size (will not affect the other element) with an overlowing child (you can use pseudo element) but this is less cleaner that the previous one:

.menu {
  display: flex;
  justify-content: center;
}


.menu > *{
  height: 100px;
  width: 100px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease-in;
}

.menu p {
  cursor: text;
  margin-top: 0;
  letter-spacing: 0px;
}

.menu img {
  margin-bottom: 5px;
  width:100px;
}

.menu .home:active,
.menu .search:active,
.menu .inbox:active {
  transform: scale(0.95);
}

.menu .bg-block {
  width:0;
  height:0;
  padding:0;
  display:block;
  position:relative;
  z-index:-1;
  transition: transform 300ms ease-in;
  direction: rtl;
}
.menu .bg-block:before {
  content:"";
  display:block;
  height:100px;
  width:100px;
  padding:10px;
  background-color: lightblue;
}

.menu .home:hover ~ .bg-block,
.menu .home:active ~ .bg-block{
  transform:translateX(-240px);
}
.menu .search:hover ~ .bg-block,
.menu .search:active ~ .bg-block{
  transform:translateX(-120px);
}
.menu .inbox:hover ~ .bg-block,
.menu .inbox:active ~ .bg-block{
  transform:translateX(0);
}


  
    Home
  
  
    Search
  
  
    Inbox

Another trick is to use box-shadow to show the colored box instead of pseudo element:

.menu {
  display: flex;
  justify-content: center;
}


.menu > *{
  height: 100px;
  width: 100px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease-in;
}

.menu p {
  cursor: text;
  margin-top: 0;
  letter-spacing: 0px;
}

.menu img {
  margin-bottom: 5px;
  width:100px;
}

.menu .home:active,
.menu .search:active,
.menu .inbox:active {
  transform: scale(0.95);
}

.menu .bg-block {
  width:0;
  height:0;
  padding:0;
  position:relative;
  z-index:-1;
  transition: transform 300ms ease-in;
  box-shadow:-60px 60px 0 60px lightblue;
}

.menu .home:hover ~ .bg-block,
.menu .home:active ~ .bg-block{
  transform:translateX(-240px);
}
.menu .search:hover ~ .bg-block,
.menu .search:active ~ .bg-block{
  transform:translateX(-120px);
}
.menu .inbox:hover ~ .bg-block,
.menu .inbox:active ~ .bg-block{
  transform:translateX(0);
}


  
    Home
  
  
    Search
  
  
    Inbox

user_11279919 · Answer

You can style elements with negative margins in css. This means that you can effectively disable collisions with that element by having margin-left be the width of the element (but negative) and margin-top be the height of the element (once again negative). Applying this to img should solve your problem.
Also, to make this work, you should put the bg-block element inside the individual image elements.

user_13914872 · Answer

Use margins, they work very well.