Prevent the following objects from moving if the height increases in CSS-CodePudding

Here is a work of hiding and showing text.

In this study, hovering over the text above opens the text.

But when opening it moves the following.

In such a scenario what do I need to do so that the following object does not move?

Can it be opened on it?

.firstrow {
    display: block;
    background-color: lightblue;
    padding: 10px 10px 0;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 18px;
    min-height: 36px
    max-height: 36px;
}
.firstrow:hover {
    background-color: lightblue;
    padding: 10px 10px 0;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: visible;
    line-height: 18px;
    min-height: 36px
    max-height: 108px;
}
.secondrow {
    background-color: #ededed;
    padding: 10px;
    margin-top: 20px;
    display: block;
}

<div >
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div>

<div >
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div>

CodePudding user response：

You could use absolute positioning on the bottom section to prevent it from moving at all and set the z-index of the first row so it overlaps the second. I don't know what your design intent is but that's pretty much the simple version of what you could do here. See also: https://www.w3schools.com/cssref/pr_class_position.asp I also cleaned up your code a bit because you had a few issues and things you didn't need at all or were redundant.

.firstrow {
  display: block;
  background-color: lightblue;
  padding: 10px 10px 0;
  position: relative;
  overflow: hidden;
  line-height: 18px;
  max-height: 36px;
  z-index: 2;
}

.firstrow:hover {
  background-color: lightblue;
  padding: 10px 10px 0;
  position: relative;
  overflow: visible;
  max-height: 108px;
}

.secondrow {
  background-color: #ededed;
  padding: 10px;
  margin-top: 20px;
  display: block;
  position: absolute;
  top: 60px;
}

<div >
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

<div >
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>