There is a hidden content that appears in the block when a parent is hover. There is also some padding that also appears on hover. As a result, other blocks are shifted. How to make sure that they do not leave? Screen below.

enter image description here

Example of one block:

.content .hides { display: none; } .hides { position: relative; } .hides .fa-shopping-basket { background-color: #f15927; padding: 5px 10px; border-radius: 3px; color: #fff; margin-left: 23px; font-size: 15px; } .itempos { margin-top: 20px; margin-bottom: 40px; } .hides:hover { display: block; } .itempos:hover .hides { display: block; } .itempos:hover { border: 3px solid blue; padding-left: 0; padding-right: 0; } .itempos:hover .itemcont { padding: 15px; } 
 <div class="col-md-2 itempos"> <div class="itemcont"> <div class="image"> <img class="img-responsive" src="img/pos1.png" alt=""> </div> <a href="" class="name">Диск сцепления ClutchNet (6-ти лепестковая металлокерамика с демпфером)</a> <a href="" class="category">Трансмиссия </a> <div class="price">8 600 руб. <span>9900 руб.</span> </div> <div class="hides"> <a class="podr" href="">Подробнее</a> <a class="crt" href=""><i class="fa fa-shopping-basket fa-1x" aria-hidden="true"></i></a> </div> </div> </div>

  • Flexbox Complete Guide - Konstantin Basharkevich
  • Used display: flex; flex-wrap: wrap; , it is already better, but all the same, instead of one element, the entire line is moved down. Is it possible to somehow not move them? - Alexander
  • Well or .itempos:nth-child(6n+1) { clear: left; } .itempos:nth-child(6n+1) { clear: left; } if you don't want to bother with flexbox . Pseudo-class : nth-child - Konstantin Basharkevich
  • Do you want the top element to overlap the bottom? - Konstantin Basharkevich
  • When hovering - yes. - Alexander

2 answers 2

 html { font-family: sans-serif; font-size: .9em; } body { padding: 15px; } .title { margin: 0 0 15px; font-size: 1.5rem; } .entry-list { margin: 0 -10px; padding: 0; display: flex; flex-wrap: wrap; width: 330px; list-style: none; } .entry-list_i { margin: 0 0 15px; padding: 0; width: 33%; } .entry { padding: 10px; position: relative; border: 1px solid transparent; border-bottom: none; } .entry_title { margin: 0 0 10px; font-size: 1.2rem; } .entry_hidden { padding: 0 10px 10px; position: absolute; left: -1px; right: -1px; display: none; box-sizing: border-box; background: #fff; border-width: 1px; border-style: solid; border-color: inherit; border-top: none; } .entry:hover { z-index: 10; border-color: #66aacc; } .entry:hover .entry_hidden { display: block; } 
 <section> <h1 class="title">Item List</h1> <ul class="entry-list"> <li class="entry-list_i"> <article class="entry"> <h2 class="entry_title">Item #1</h2> <p>Description</p> <a href="#">Link</a> <div class="entry_hidden"> <p>Hidden block</p> <a href="#">Hidden link</a> </div> </article> </li> <li class="entry-list_i"> <article class="entry"> <h2 class="entry_title">Item #2</h2> <p>Description</p> <a href="#">Link</a> <div class="entry_hidden"> <p>Hidden block</p> <a href="#">Hidden link</a> </div> </article> </li> <li class="entry-list_i"> <article class="entry"> <h2 class="entry_title">Item #3</h2> <p>Description</p> <a href="#">Link</a> <div class="entry_hidden"> <p>Hidden block</p> <a href="#">Hidden link</a> </div> </article> </li> <li class="entry-list_i"> <article class="entry"> <h2 class="entry_title">Item #4</h2> <p>Description</p> <a href="#">Link</a> <div class="entry_hidden"> <p>Hidden block</p> <a href="#">Hidden link</a> </div> </article> </li> <li class="entry-list_i"> <article class="entry"> <h2 class="entry_title">Item #5</h2> <p>Description</p> <a href="#">Link</a> <div class="entry_hidden"> <p>Hidden block</p> <a href="#">Hidden link</a> </div> </article> </li> <li class="entry-list_i"> <article class="entry"> <h2 class="entry_title">Item #6</h2> <p>Description</p> <a href="#">Link</a> <div class="entry_hidden"> <p>Hidden block</p> <a href="#">Hidden link</a> </div> </article> </li> <li class="entry-list_i"> <article class="entry"> <h2 class="entry_title">Item #7</h2> <p>Description</p> <a href="#">Link</a> <div class="entry_hidden"> <p>Hidden block</p> <a href="#">Hidden link</a> </div> </article> </li> </ul>

    It is obvious to merge each row of blocks into a separate container block. In any other case, all the blocks will be for themselves. Or to make absolute positioning for all blocks, then they will not move from their seats. In any case, this is not a css task.