How to align nested column to another div?

Liskari 0
Viewed 31

When you hover above the second item, the hide show under the second item.

What I want: The "hide" shows under the FIRST item, left aligned.

Is that possible even it stays nested with the second one?

Tried it with margin-left: -30px and it works, but its not responsive. Is there any solution how i can make it responsive, too?

Thanks for any help!!

Thanks for any help!!

.container {
  display: flex;
}

.item {
  padding: 1px;
  cursor: pointer;
  position: relativ;
}

.hide {
    opacity: 0;
    position: relative;
}

.item:hover .hide {
  display: block;
  opacity: 1;
}
    <div class="container">
       <div class="item">item
      </div>
   <div class="item">item
     <div class="hide">hide</div>
    </div>
  </div>

https://codepen.io/Liskari/pen/yLjepRr

css html
1 Answers

You can position it absolute against the container to achieve this. For this to work you need to remove position: relative from the .item class. Otherwise the absolute positioning would work relative to the .item. Instead you want to add position: relative to .container:

.container {
  display: flex;
  position: relative;
}

.item {
  padding: 1px;
  cursor: pointer;
}

.hide {
    opacity: 0;
    position: absolute;
    left: 0;
}

.item:hover .hide {
  display: block;
  opacity: 1;
}
 <div class="container">
    <div class="item">item
    </div>
   <div class="item">item
     <div class="hide">hide</div>
    </div>
  </div>

preator0
Related