Question 270614 in Html Question posted in
Some basic documentation can be found here.

Html – How to expand a child element without affecting the parent element?

I want that when I hover over a child class, it doesn’t affect the overflow of the parent. My expectation is to remove the line position: relative; in the parent, but this doesn’t work correctly when I have many nested positions.

.parent-1 {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: auto;
  box-sizing: border-box;
}

.child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  &:hover {
    position: absolute;
    height: 1000px;
  }
}
<div class="parent-1">
  <div class="child">
  </div>
</div>
Tags:

2

Answers


  1. 0

    Try the below solution

    .parent-1 {
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: auto;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transition: height 0.3s ease;
  /* Add smooth transition for height changes */
}

.container:hover .child {
  height: 1000px;
  position: absolute;
  bottom: 0;
  /* Position the expanding child at the bottom of the container */
}
    <div class="parent-1">
  <div class="container">
    <div class="child"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can not achieve that without position: relative. It helps to recognize where your element’s absolute position is. Otherwise, your elements will use the position (0,0) by default.

    If you want to have the same design but with a slightly different approach. You can try below solution with another wrapper element.

    .wrapper {
  position: relative;
}

.parent-1 {
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: auto;
  box-sizing: border-box;
}

.child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  &:hover {
    position: absolute;
    height: 1000px;
  }
}
    <div class="wrapper">
  <div class="parent-1">
    <div class="child">
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search