Question

背景信息

我正在使用HTML（Pug）和CSS（SASS）中的水平菜单。我想这样做，以便每当您单击图标时，它都会突出显示。这是我想要的近似值：
A menu like the one I want from https://codepen.io/ainalem/pen/pXrVmQ

问题

我想使用一个单独的元素（称为.bg-block），该元素将位于所选元素的后面。

还没开始取笑我...

听起来像初学者的问题，对吧？

position: absolute

完成！没问题，这可能是您学习的第一件事！但是，如果您不能使用 position：absolute 呢？

要切入点...

我想禁用collisons，并设置一个具有 position：absolute 行为的元素，而不使用 position：absolute 。可能吗我对此表示怀疑，但我毫不怀疑StackOverflow的功能。

但是为什么？

之所以这样做，是因为如果我的元素是position：相对，我可以使用top：，left：，right：和bottom：相对于它的正常位置。我认为当我要调整.bg-block的位置时，这样做会更好。
另外，我对其他任何可能的方式以及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

请注意：我的HTML使用的是SASS（格式为SASS，不是SCSS）和Pug。对于给您带来的任何不便，我们深表歉意。但是，如果您能以普通的HTML和CSS给出答案，我也希望能听到他们的声音（而且在PUG和SASS中看起来也一样）。 / p>

非常感谢大家提供的答案。我知道这可能会使您感到困惑，但是希望您能理解。

再次感谢，而不是John Doe

Answer 1

您可以在CSS中设置具有负边距的元素。这意味着您可以通过使margin-left为元素的宽度（但为负）和margin-top为元素的高度（再次为负）来有效地禁用与该元素的碰撞。将其应用于img应该可以解决您的问题。
另外，要执行此操作，您应该将bg-block元素放在各个图像元素中。

Answer 2

如果您更改HTML代码，则可以使用position:absolute，因为positon:absolute是获得所需内容的逻辑方法。要正确设置位置，您需要考虑一个适合您元素的缩小尺寸容器，以便您可以轻松定义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 3

使用边距，效果很好。

如何在没有位置的情况下“禁用碰撞”：CSS中的绝对值

背景信息

问题

还没开始取笑我...

要切入点...

但是为什么？

3 个答案: