Question

相对父元素相对时，绝对定位元素的宽度受到限制

我有一个导航栏，该导航栏上有一个悬停菜单。菜单中将包含标签，并且标签中文本的长度会有所不同。

我希望菜单具有最小和最大宽度的子div必须将min-width / max-width设置为。但是无论菜单的宽度限制在最小宽度点上。

是否有可能使子div忽略父级的宽度，同时仍然保留子级（我不能将其移出父级，我知道这是一个简单的解决方案）？

这是我遇到的行为的一个示例：https://codepen.io/vee1234/pen/omQxWP

.navBar {
  background-color: #222;
  width: 50px;
  min-height: 100%;
  height: 100vh;
}

.navItem {
  color: #a1a1a1;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}

.menu {
font-family: "Open Sans", sans-serif;
  position: absolute;
  display: none;
  min-width: 200px;
  max-width: 600px;
  background-color: #333;
  z-index: 100;
  left: 100%;
  top: 20%;
}

.menu div a {
  display:block;
  border: 1px solid red;
}

.navItem:hover .menu {
  display: block;
}

 <div class="navBar">
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
    <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div class="menu">
        <div class="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
     <div class="navItem">
      <div>Nav Menu Trigger</div>
      <div className="menu">
        <div className="link">
          <a>string of any length</a>
          <a>string of any length - but this one is super long</a>
        </div>
      </div>
    </div>
  </div>

Answer 1

一个窍门是通过添加一些padding-right来使相对元素变大，该.menu { width:50px; padding-right:500px; margin-right:-500px; background:#000 content-box; height:100px; position:relative; color:#fff; } .menu div{ position:absolute; top:0; left:50px; background:blue; min-width:200px; max-width:500px; } .menu div a { border:1px solid; display:block; }不会影响文本进入内部的方式，但是会在绝对元素的宽度计算中进行计数。然后，仅对所需部分进行着色。您还可以添加负边距来纠正添加的填充。

<div class="menu">
 some text here
  <div>
    <a>some text here</a>
    <a>some text here some text here some text here some text here some text here some text here some text here some text here</a>
    <a>some text here</a>
  </div>
</div>

software update -l

Answer 2

绝对定位会将元素移出它在DOM中的实际位置，并将其放置在您告诉它的位置。因此，该元素会松开对有助于确定宽度的父元素的引用。您需要明确设置宽度。

当父级具有相对位置时，悬停菜单的最大宽度将被忽略

2 个答案: