I have a little animation that increases the height the <div> element. The problem is that the element below is shifted. How to fix it?

Code:

 /* Π”ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ */ #ddesc { position: relative; top: 30px; right: 20px; border-bottom: solid; border-top: solid; border-width: 2px; color: #bbb; font-size: 15px; text-shadow: 1px 1px 1px black; padding-left: 250px; } #ddesc.close { height: 15px; } /*ПослС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ класс `.close` убираСтся ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π² 15 пиксСлСй значСния `height` Π½Π΅ выполняСтся */ 
 <div id="ddesc" class="close"><strong id="bdesct">ОписаниС</strong> <button id="bdesc" class="close"></button> <p id="desc" class="close"></p> </div> <!-- Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт --> <div class="author">Автор: <a href="11.html" id="author">Автор</a></div> <!--"ΡƒΠ΅Π·ΠΆΠ°ΡŽΡ‰ΠΈΠΉ" элСмСнт -->

What comes out:

enter image description here

enter image description here

    1 answer 1

    Meaning if you catch a remake for yourself - it works by clicking on the block (not hover )

     * { margin: 0; padding: 0; box-sizing: border-box; } .items { width: 70%; margin: auto; } .outer { width: 100%; height: 100px; font-size: 14px; position: absolute; background: pink; overflow: hidden; transition: all .5s linear; z-index: 10; padding: 10px; font-size: 10px; outline: 3px solid transparent; } .item { width: 25%; height: 100px; position: relative; float: left; margin: 10px; outline: none; } .item:focus .outer { height: auto; overflow: none; background: pink; z-index: 1000; outline: 3px solid red; background: #fbfbfb; } 
     <div class="items"> <div class="item" tabindex="-1"> <div class="outer"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?400 </div> </div> <div class="item" tabindex="-2"> <div class="outer"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?300 </div> </div> <div class="item" tabindex="-3"> <div class="outer"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?200 </div> </div> <div class="item" tabindex="-4"> <div class="outer"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus expedita facere vitae nihil ad id voluptatem, ducimus aut animi, molestiae sapiente. Fugiat, magnam! Quod eos maiores, quas tempore fugiat incidunt tempora distinctio ab odio asperiores amet, perspiciatis, sapiente adipisci fugit laboriosam rerum! Tempore ipsum illum maxime temporibus, accusantium sit necessitatibus esse molestias, pariatur vitae corporis ex modi inventore quis beatae rem odio sed asperiores assumenda! Totam, excepturi molestiae quas aspernatur soluta illum aut tempore nam enim aliquam doloremque error repellat est quaerat odit perferendis nulla, eaque nemo minima illo laborum ipsa maxime ad amet? Error minus aspernatur possimus quia cum.560 </div> </div> <div class="item" tabindex="-5"> <div class="outer"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?600 </div> </div> <div class="item" tabindex="-6"> <div class="outer"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione, minus sint, pariatur nihil accusamus est eveniet iste in, labore quisquam quae. Natus accusamus, culpa illum quidem fugit, qui aperiam repudiandae adipisci harum tempora aspernatur eaque, officia odit in ut ratione possimus voluptate ipsum ea quae quaerat enim tenetur Quaerat deserunt dolores voluptas impedit, nisi soluta odit quia vitae dicta aliquam labore dolore ex molestiae est qui esse exercitationem sapiente dignissimos ut omnis, nobis quasi architecto! Asperiores adipisci, cum ut a amet tempore aliquid omnis modi deserunt aut nemo totam natus cumque dolor maiores recusandae sequi, laboriosam?700 </div> </div> </div>