Здравствуйте, подскажите, как сделать, чтобы при увеличении высоты блока он не двигал нижестоящие, а показывался поверх них?
Вот как когда сейчас выглядит:
<style>
body{
padding: 0;
margin: 0;
}
.wrapper{
width: 33%;
max-height: 100px;
overflow: hidden;
border: 1px solid darkmagenta;
cursor: pointer;
}
.wrapper:hover{
overflow: unset;
max-height: 10%;
}
.box{
height: 100px;
}
.container{
display: flex;
flex-wrap: wrap;
}
</style>
<body>
<div class="container">
<div class="wrapper">
<div class="box">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
</div>
</div>
<div class="wrapper">
<div class="box">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
</div>
</div>
<div class="wrapper">
<div class="box">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
</div>
</div>
<div class="wrapper">
<div class="box">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
</div>
</div>
<div class="wrapper">
<div class="box">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
</div>
</div>
<div class="wrapper">
<div class="box">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit cupiditate vero harum inventore provident
</div>
</div>
</div>
</body>
</html>
Простой
Средний