html - 如何在悬停时将文本定位在其他文本下方而不影响周围元素

Question

在悬停时，我的导航栏上出现了文本(从 0 到 1 改变不透明度并转换它的位置)，我希望每个悬停标签(.small-nav-text)出现在它对应的导航栏下项，但不影响其周围其他导航项的位置。现在文本太长，所以它会将其他导航项向左和向右推开。

这是我想要的图像:

JSFiddle:http://jsfiddle.net/agentemi1y/qtqvvk24/

我的 scss:

nav {
 li {
  display: inline-block;
 }
 a {
  margin: 0;
  padding: 0 2.1875rem;
  text-align: center;
  font-size: 1.16875rem;
  &:after {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, height 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s, height 0.3s;
    transition: transform 0.3s, opacity 0.3s, height 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  &:hover:before,
  &:focus:before {
    height: 6px;
  }
  &:hover::before,
  &:hover::after,
  &:focus::before,
  &:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
  }
  span:first-child {
    z-index: 2;
    display: block;
  }

  .small-nav-text {
    font-size: 0.875rem;
    z-index: 1;
    display: block;
    padding: 8px 0 0 0;
    color: rgba(0,0,0,0.4);
    text-transform: none;
    opacity: 0;
    border: 1px solid red;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  &:hover .small-nav-text,
  &:focus .small-nav-text {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
  }
}

我的 HTML:

<nav>
<p>
    Menu
</p>
<ul>
    <li>
        <a data-scroll href="#why">
            <span>Why</span>
            <span class="small-nav-text">some text here</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#how">
            <span>How</span>
            <span class="small-nav-text">Improving communication</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#product">
            <span>Product</span>
            <span class="small-nav-text">Our flagship product</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#team">
            <span>Team</span>
            <span class="small-nav-text">The gang</span>
        </a>
    </li>
    <li>
        <a data-scroll href="#contact">
            <span>Contact</span>
            <span class="small-nav-text">Let's talk</span>
        </a>
    </li>
</ul>

Answer 1

尝试 this .

您可以通过在父级上使用相对定位和在子级上使用绝对定位来解决此问题。

这会将它从文档流中移除，使其不会影响您的导航栏。

---

这是我添加的。

你的导航

nav a
{
    display: block;
    position: relative;
}

你的 nav a .small-nav-text

nav a .small-nav-text
{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
}

---

如果您希望所有文本显示在一行中，您可能不得不进一步调整小文本的宽度。

这是 JSFiddle再次链接。