CSS：如何在 window 容器中包含绝对元素

Question

CSS 有办法在 window 容器中包含绝对值 div 吗？（如果div位置+div宽度>window.innerWidth，将div向左平移）

我试图以 100% CSS (https://codepen.io/team/css-tricks/pen/ZYoJda) 实现导航菜单，但是当我在屏幕右侧有菜单时，弹出菜单被屏幕分割。

这是修改后的片段：

nav > ul > li {
  display: inline-block;
}
nav > ul > li ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0.2s 1s;
}

nav > ul > li ul li {
  width: 300px;
}
nav > ul > li:hover ul {
  visibility: visible;
  transition-delay: 0s;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
nav li {
  width: 100px;
  background: #eee;
  margin: 2px;
  position: relative;
  padding: 10px;
  width: 15%;
}
nav a {
  display: block;
  
}

div {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    min-height: 200px;
}

body {
  padding: 10px;
}

<div>
<nav>
  <ul>
    <li>No Menu 1</li>
    <li>No Menu 2</li>
    <li>Menu 3
      <ul>
        <li><a href="#">Menu 3-1</a></li>
        <li><a href="#">Menu 3-2</a></li>
        <li><a href="#">Menu 3-3</a></li>
      </ul>
    </li>
    <li>Menu 4
      <ul>
        <li><a href="#">Menu 4-1</a></li>
        <li><a href="#">Menu 4-2</a></li>
        <li><a href="#">Menu 4-3</a></li>
      </ul>
      </li>
    <li>
      Menu 5
      <ul>
        <li><a href="#">Menu 5-1</a></li>
        <li><a href="#">Menu 5-2</a></li>
        <li><a href="#">Menu 5-3</a></li>
      </ul>
    </li>
  </ul>
</nav>
</div>

Answer 1

我找到了使用 JS 的解决方案（我更喜欢 CSS）。

我假设结构如下：

<ul>
  <li>Menu 1
    <ul class="dropdown">
      <li>Menu 1-1</li>
      <li>Menu 1-2</li>
    </ul>
  </li>
</ul>

我实现了以下JS：

const menus = document.querySelectorAll('.dropdown');

menus.forEach(menu => {
  const info = menu.getBoundingClientRect();
  const position = info.left + info.width;

  if (position > window.innerWidth) {
    // Function to update style
    this.rdr.setStyle(menu, 'left', (window.innerWidth - position) + 'px');
  }
});

CSS：如何在 window 容器中包含绝对元素

CSS: how to contain absolute element inside window container

javascript

css

screen