CSS text reveal on hover with z-index is causing divs to move-CodePudding

When I hover over my first div to reveal the full text, the second div's position changes to go behind that first div. I need the second div to remain where it is, with the text from the first div overlapping it.

Demo: https://codepen.io/adivity/pen/OJEzoPm

<html>
<body>
  <div >
    <div>1) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
    </div>
    <div>2) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
    </div>
    <div>3) This is the full title that I want to be revealed. That is super duper long and totally will overlap the next div.
    </div>
  </div>
</body>
</html>

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 80px;
  background-color: grey;
  
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  max-width: 100px;
 }

CodePudding user response：

Removing position: absolute from .container div:hover fixed the issue for me. Is that what you were looking for?

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---remove this
  max-width: 100px;
}

CodePudding user response：

Here you can try this logic :

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
  background-color: grey;
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  max-width: 100px;
}

<html>
<body>
  <div >
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

CodePudding user response：

It is actually overlapping but you'll have to remove the background color of the divs to see the overlap.

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
/*   background-color: grey; */
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute;
  max-width: 100px;
}

<html>
<body>
  <div >
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>

If you want the divs to stay at their own positions, just remove the "position: absolute" rule fron the css.

.container {
  max-width: 100px;
  margin: 0 auto;
}
.container div {
  height: 100px;
/*   background-color: grey; */
}
.container div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
/*   position: absolute; */
  max-width: 100px;
}

<html>
<body>
  <div >
    <div>1) This is the full title that I want to be revealed
    </div>
    <div>2) This is the full title that I want to be revealed
    </div>
    <div>3) This is the full title that I want to be revealed
    </div>
  </div>
</body>
</html>