Как «отключить столкновения» без позиции: абсолют в CSS

Question

Справочная информация

Я работаю над горизонтальным меню в HTML (Pug) и CSS (SASS).Я хотел бы сделать так, чтобы всякий раз, когда вы нажимаете на значок, он становится подсвеченным.Вот приблизительное значение того, что я хочу: Меню, подобное тому, которое я хочу от https://codepen.io/ainalem/pen/pXrVmQ

Проблема

Я хочу использовать отдельный элемент (называемый .bg-block), который будет идти за выбранным элементом.

Не начинайте смеяться надо мнойпока ...

Звучит как проблема новичка, верно?

position: absolute

Готово!Нет проблем, и, вероятно, первое, что вы узнаете!Но что, если вы не можете использовать position: absolute ?

Чтобы добраться до точки ...

Я хочу отключить столкновения и получить элемент с поведением позиция: абсолютная , без использования позиция: абсолютная .Это вообще возможно?Я сомневаюсь в этом, но я не сомневаюсь в силе StackOverflow.

Но почему?

Я делаю это потому, что если мой элемент position: относительный, я могу использовать top:, left:, right: и bottom: относительно его нормального положения.Я думаю, что это будет работать лучше, когда я хочу отрегулировать, где находится .bg-блок.Кроме того, меня интересует любой другой возможный способ и мощь StackOverflow.Если вам нужен некоторый фоновый код, чтобы поиграть с ним, вот оно, из моего пера:

.menu
  display: flex
  flex-direction: row
  align-items: center
  justify-content: center

  *
    height: 100px
    width: 100px
    margin: 10px
    cursor: pointer
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    transition: transform 80ms ease-in

  p
    cursor: text
    margin-top: 0
    letter-spacing: 0px


  img
    margin-bottom: 5px

  .home, .search, .inbox
    &:active
      transform: scale(0.95)


  .bg-block
    position: absolute
    background-color: lightblue
    z-index: -1
    position: relative

.menu
  .bg-block
  .home
    img(src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/home-256.png")
    p Home

  .search
    img(src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-256.png")
    p Search
  .inbox
    img(src="https://cdn2.iconfinder.com/data/icons/maki/100/post-256.png")
    p Inbox

ОБРАТИТЕ ВНИМАНИЕ: я использую SASS (с форматированием SASS, а не SCSS) и мопс для моего HTML.Я прошу прощения за любые неудобства, которые у вас могут возникнуть, но если у вас есть ответ в обычном HTML и CSS, я бы тоже хотел их услышать (и, кроме того, в PUG и SASS это будет то же самое, просто лучше выглядеть).

Большое спасибо всем заранее за любые ответы, которые вы можете дать.Я знаю, что это может немного запутать, но, надеюсь, вы поймете.

Еще раз спасибо, не Джон Доу

Answer 1

Вы можете использовать position:absolute, если измените свой HTML-код, потому что positon:absolute - логичный способ получить то, что вы хотите.Чтобы правильно настроить положение, вам нужно рассмотреть контейнер с усадкой 1004 *, который будет соответствовать вашим элементам, чтобы вы могли легко определить пространство для элемента position:absolute.

Здесьэто основной пример.Наведите, чтобы увидеть результат:

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  display: flex;
  position:relative;
  z-index:0;
}

.wrapper > *{
  height: 100px;
  width: 100px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease-in;
}

.menu p {
  cursor: text;
  margin-top: 0;
  letter-spacing: 0px;
}

.menu img {
  margin-bottom: 5px;
  width:100px;
}

.menu .home:active,
.menu .search:active,
.menu .inbox:active {
  transform: scale(0.95);
}

.menu .bg-block {
  position: absolute;
  top:0;
  left:0;
  background-color: lightblue;
  z-index: -1;
  transition: transform 300ms ease-in;
}

.menu .home:hover ~ .bg-block,
.menu .home:active ~ .bg-block{
  transform:translateX(0);
}
.menu .search:hover ~ .bg-block,
.menu .search:active ~ .bg-block{
  transform:translateX(100%);
}
.menu .inbox:hover ~ .bg-block,
.menu .inbox:active ~ .bg-block{
  transform:translateX(200%);
}

<div class="menu">
<div class="wrapper">
  <div class="home"><img src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/home-256.png" />
    <p>Home</p>
  </div>
  <div class="search"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-256.png" />
    <p>Search</p>
  </div>
  <div class="inbox"><img src="https://cdn2.iconfinder.com/data/icons/maki/100/post-256.png" />
    <p>Inbox</p>
  </div>
  <div class="bg-block"></div>
 </div>
</div>

И если вы действительно не хотите, position:absolute рассмотрите элемент с размером 0 (не повлияет на другой элемент) с дочерним элементом с перекрытием (вы можетеиспользовать псевдоэлемент), но он менее чист, чем предыдущий:

.menu {
  display: flex;
  justify-content: center;
}


.menu > *{
  height: 100px;
  width: 100px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease-in;
}

.menu p {
  cursor: text;
  margin-top: 0;
  letter-spacing: 0px;
}

.menu img {
  margin-bottom: 5px;
  width:100px;
}

.menu .home:active,
.menu .search:active,
.menu .inbox:active {
  transform: scale(0.95);
}

.menu .bg-block {
  width:0;
  height:0;
  padding:0;
  display:block;
  position:relative;
  z-index:-1;
  transition: transform 300ms ease-in;
  direction: rtl;
}
.menu .bg-block:before {
  content:"";
  display:block;
  height:100px;
  width:100px;
  padding:10px;
  background-color: lightblue;
}

.menu .home:hover ~ .bg-block,
.menu .home:active ~ .bg-block{
  transform:translateX(-240px);
}
.menu .search:hover ~ .bg-block,
.menu .search:active ~ .bg-block{
  transform:translateX(-120px);
}
.menu .inbox:hover ~ .bg-block,
.menu .inbox:active ~ .bg-block{
  transform:translateX(0);
}

<div class="menu">
  <div class="home"><img src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/home-256.png" />
    <p>Home</p>
  </div>
  <div class="search"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-256.png" />
    <p>Search</p>
  </div>
  <div class="inbox"><img src="https://cdn2.iconfinder.com/data/icons/maki/100/post-256.png" />
    <p>Inbox</p>
  </div>
  <div class="bg-block"></div>
</div>

Другая хитрость заключается в использовании box-shadow для отображения цветной рамки вместо псевдоэлемента:

.menu {
  display: flex;
  justify-content: center;
}


.menu > *{
  height: 100px;
  width: 100px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 80ms ease-in;
}

.menu p {
  cursor: text;
  margin-top: 0;
  letter-spacing: 0px;
}

.menu img {
  margin-bottom: 5px;
  width:100px;
}

.menu .home:active,
.menu .search:active,
.menu .inbox:active {
  transform: scale(0.95);
}

.menu .bg-block {
  width:0;
  height:0;
  padding:0;
  position:relative;
  z-index:-1;
  transition: transform 300ms ease-in;
  box-shadow:-60px 60px 0 60px lightblue;
}

.menu .home:hover ~ .bg-block,
.menu .home:active ~ .bg-block{
  transform:translateX(-240px);
}
.menu .search:hover ~ .bg-block,
.menu .search:active ~ .bg-block{
  transform:translateX(-120px);
}
.menu .inbox:hover ~ .bg-block,
.menu .inbox:active ~ .bg-block{
  transform:translateX(0);
}

<div class="menu">
  <div class="home"><img src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/home-256.png" />
    <p>Home</p>
  </div>
  <div class="search"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/67-256.png" />
    <p>Search</p>
  </div>
  <div class="inbox"><img src="https://cdn2.iconfinder.com/data/icons/maki/100/post-256.png" />
    <p>Inbox</p>
  </div>
  <div class="bg-block"></div>
</div>

Answer 2

Вы можете стилизовать элементы с отрицательными полями в CSS. Это означает, что вы можете эффективно отключить столкновения с этим элементом, указав margin-left ширину элемента (но отрицательную) и margin-top высоту элемента (еще раз отрицательную). Применение этого к img должно решить вашу проблему.
Кроме того, чтобы сделать это, вы должны поместить элемент bg-block внутри отдельных элементов изображения.