html - 如何在位置 :absolute with CSS only? 时强制两个元素之间的空格

Question

我正在尝试制作一个菜单，当鼠标位于 div 上时显示，其中一些按钮位于 div 的顶部，一些按钮位于底部。

.session {
    position: relative;
    width: 300px;
}
.button {
    background-color: white;
    border: 1px solid black;
    width: 20px;
    height: 20px;
}
.button:hover {
    cursor: pointer
}
.top-menu, .bottom-menu {
    display: none;
}
.session:hover .top-menu{
    position: absolute;
    display: block;
    top: 0px;
    right: -20px;
}
.session:hover .bottom-menu {
    position: absolute;
    display: block;
    bottom: 0px;
    right: -20px;
}
.big-box {
    background-color: red;
    height: 300px;
}
.normal-box {
    background-color: green;
    height: 100px;
}
.small-box {
    background-color: blue;
    height: 50px;
}

<div class="big-box session">
    <div class="top-menu">
        <div class="button-1 button">1</div>
        <div class="button-2 button">2</div>
        <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
        <div class="button-a button">a</div>
    </div>
</div>
<div class="normal-box session">
    <div class="top-menu">
        <div class="button-1 button">1</div>
        <div class="button-2 button">2</div>
        <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
        <div class="button-a button">a</div>
    </div>
</div>
<div class="small-box session">
    <div class="top-menu">
        <div class="button-1 button">1</div>
        <div class="button-2 button">2</div>
        <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
        <div class="button-a button">a</div>
    </div>
</div>

The JSFiddle demo

它工作正常，但正如您将鼠标移至底部蓝色 session 时所见，按钮相互覆盖。当部分太小时，我希望它在下面使用空格。通常当我有 position: relative 时，它会自动将另一个 div 插入下一行，但我无法找到一种方法来实现相同的效果而不使用 position: absolute。在实际情况下，section 的高度取决于它包含的内容，因此不可能为特定的 div 硬编码位置。

那么，有没有一种方法，只使用 CSS，让我在使用 position: absolute 时留下一些空间，或者有什么方法可以让我使用 position: relative 实现同样的效果？

附言已经有一个答案了。这很棒，但如果可以在没有 flex box 的情况下完成这项工作，那就更好了。

Answer 1

position: absolute; 将 .top-menu 和 .bottom-menu 从文档流中移除，因此他们不会意识到彼此在页面上的位置。这意味着它们将重叠并且不会影响页面上其他元素的位置。

position: relative; 将不合适，因为这会将元素从其在页面上绘制的位置移动，这意味着很难定位 .bottom-menu 在父元素的底部而不求助于像素值。

通过对 flexbox 模型的一些重组和使用，如果 .top-menu 可以移动 .bottom-menu侵占其空间。

需要进行以下更改:

• 将 .top-menu 和 .bottom-menu 包装在一个名为 .menu 的新 div 中
• 为 .menu 添加以下规则:
  • display: none; 默认隐藏
  • flex-direction: column; 告诉子元素自上而下排列
  • justify-content: space-between; 告诉子元素均匀分布。一个在顶部，一个在底部
  • left: 100%; 在其父项的右侧显示菜单
  • min-height: 100%; 告诉菜单默认是其父级的整个高度
  • position: absolute; 允许left position工作
• 为 .session:hover .menu 添加以下规则:
  • display: flex; 告诉其子级使用 flexbox 模型并在其父级悬停时显示菜单
• 删除 .session:hover .top-menu 和 .session:hover .bottom-menu

.session {
  position: relative;
  width: 300px;
}
.button {
  background-color: white;
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
.button:hover {
  cursor: pointer
}
.menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  left: 100%;
  min-height: 100%;
  position: absolute;
}
.session:hover .menu {
  display: flex;
}
.big-box {
  background-color: red;
  height: 300px;
}
.normal-box {
  background-color: green;
  height: 100px;
}
.small-box {
  background-color: blue;
  height: 50px;
}

<div class="big-box session">
  <div class="menu">
    <div class="top-menu">
      <div class="button-1 button">1</div>
      <div class="button-2 button">2</div>
      <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
      <div class="button-a button">a</div>
    </div>
  </div>
</div>
<div class="normal-box session">

  <div class="menu">
    <div class="top-menu">
      <div class="button-1 button">1</div>
      <div class="button-2 button">2</div>
      <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
      <div class="button-a button">a</div>
    </div>
  </div>
</div>
<div class="small-box session">
  <div class="menu">
    <div class="top-menu">
      <div class="button-1 button">1</div>
      <div class="button-2 button">2</div>
      <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
      <div class="button-a button">a</div>
    </div>
  </div>
</div>

替代方法

如果需要 IE8 支持，则 flexbox 不是一个选项。幸运的是，我们可以使用相同的标记实现类似的结果，但使用 positioning 和 padding:

• 为 .menu 添加以下规则:
  • box-sizing: border-box; 确保 padding 包含在 height
  中
  • padding-bottom: 22px; 是底部 padding 等于 bottom-menu 的 height。这将用于为 bottom-menu
  “预留”空间
• 为 .session:hover .menu 添加以下规则:
  • display: block; 悬停其父项时显示菜单
• 为 .bottom-menu 添加以下规则:
  • bottom: 0; 将其定位在其父级.menu 的底部。这会将其放置在底部的“保留”padding 空间
  • position: absolute; 允许bottom position工作

这背后的原理是，因为 .top-menu 在文档流中，它会导致父级 .menu 在 height 中展开> 适合它。通过将 padding 添加到 .menu 的底部，.bottom-menu 可以position绝对 因为它将始终使用该空间并且不会遮挡 .top-menu。

.session {
  position: relative;
  width: 300px;
}
.button {
  background-color: white;
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
.button:hover {
  cursor: pointer
}
.menu {
  box-sizing: border-box;
  display: none;
  left: 100%;
  min-height: 100%;
  padding-bottom: 22px;
  position: absolute;
}
.session:hover .menu {
  display: block;
}
.bottom-menu {
  bottom: 0;
  position: absolute;
}
.big-box {
  background-color: red;
  height: 300px;
}
.normal-box {
  background-color: green;
  height: 100px;
}
.small-box {
  background-color: blue;
  height: 50px;
}

<div class="big-box session">
  <div class="menu">
    <div class="top-menu">
      <div class="button-1 button">1</div>
      <div class="button-2 button">2</div>
      <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
      <div class="button-a button">a</div>
    </div>
  </div>
</div>
<div class="normal-box session">

  <div class="menu">
    <div class="top-menu">
      <div class="button-1 button">1</div>
      <div class="button-2 button">2</div>
      <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
      <div class="button-a button">a</div>
    </div>
  </div>
</div>
<div class="small-box session">
  <div class="menu">
    <div class="top-menu">
      <div class="button-1 button">1</div>
      <div class="button-2 button">2</div>
      <div class="button-3 button">3</div>
    </div>
    <div class="bottom-menu">
      <div class="button-a button">a</div>
    </div>
  </div>
</div>