Question

我正在制作导航栏。它可以扩展为大于视口的高度。所以我打了一个overflow-y: auto。它运作良好和花花公子。

在悬停时，我想要水平扩展，但是从我正在读取的任何溢出属性而不管x / y都会阻止重叠。

我希望能够滚动导航，但绝对定位的元素位于父元素的边界上，尽管overflow-y设置为auto。

这是一个粗略而简单的例子：

HTML：

<div class="links">
  <div class='navGroup'>
    <div class='icon'>somePic1</div>
    <div class='link'>link1</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic2</div>
    <div class='link'>link2</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic3</div>
    <div class='link'>link3</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic4</div>
    <div class='link'>link4</div>
  </div>
  <div class='navGroup'>
    <div class='icon'>somePic5</div>
    <div class='link'>link5</div>
  </div>
</div>
<div class="mainContent">
Some Content
</div>

CSS：

body {
  display: flex;
}

div.links {
  height: 50px;
  width: 100px;
  overflow-y: auto;
}

div.mainContent {
  background:green;
}

div.link {
  display: none;
}

div.navGroup {
  position: relative;
  width: 100px;
}
div.navGroup:hover {
  background: red;
}

div.navGroup:hover div.link {
  width: 300px;
  display: block;
  position: absolute;
  top: 0;
  left: 50px;
  background: blue;
}

如果有人想要使用代码，那么这是一个codepen链接：https://codepen.io/andrewsunglaekim/pen/LyWrym

请注意，如果您对overflow: auto;发表评论，它会溢出，但所有链接都会显示，并且在设定的高度上无法滚动。

编辑我忘了提及设置overflow-x: visible没有做任何事情。显然，解释器默认将其更改为自动...

非常感谢任何工作，谢谢！

overflow-y不允许绝对位置水平重叠

0 个答案: