允许绝对定位元素比父绝对定位元素更宽

Question

背景

我有一个小的单级CSS弹出菜单（从技术上讲，它是一个扩展元素）。它绝对位于父级绝对定位元素的左下方，该元素相当窄。请参阅下面的第二个h1元素：

<div id="controls">
   <h1>Controls 1</h1>
   <h1 id="size" class="poplinks button">
      Size
      <a href="#" class="button selected" title="small"><img src=""></a>
      <a href="#" class="button" title="medium"><img src=""></a>
      <a href="#" class="button" title="large"><img src=""></a>
   </h1>
</div>

这非常简单地变成了一个扩展菜单/弹出窗口，如下所示：

.poplinks:hover {
   width:auto;
}
.poplinks a {
   display:none;
}
.poplinks:hover a {
   display:inline-block;
}

问题

这导致以下类似按钮的元素：

h1具有样式width:48px;，并且还有一个样式规则可以在悬停时将width:auto;应用于h1元素，因此它应该能够展开。但是，在悬停时，子菜单被强制保持不比父元素的宽度宽，当我希望它向右延伸时（在父元素包含框之外）。

我想看到的内容（通过将元素移动到父元素之外获得，但我希望它保留在内部以继承样式，因此当我将菜单栏从左侧移动到顶部时，它会自动跟随）：< / p>

这可能吗？你有什么建议吗？

为自己in a JS Fiddle查看此操作。

浏览器

注意：我计划在Firefox，Chrome和IE 8中使用它。我正在Firefox和Firefox中进行主要设计。 Chrome和基本完成后，将添加条件CSS以使IE正常工作，并尽可能接近我。

原理

我绝对定位父菜单的原因是我正在构建一个类似应用程序的页面来显示图像。该页面将托管在父Windows应用程序中，不需要大量识别信息：只显示所需的图像。我选择使菜单绝对定位，而不是使用内联块或浮点数或其他方法来使我的菜单列到位（有两个）。但是，它不一定是这种方式。如果您对替代布局或策略有建议，我会全力以赴。

Answer 1

首先，您的#controls需要overflow:visible。然后，#size应该明确left而不是right。最后，.poplinks需要white-space: nowrap来阻止换行。

http://jsfiddle.net/VaWeK/11/

Answer 2

我正在写此答案，因为将来可能再次需要它。

尽管我在选择的答案中找到了这个，但它也提到了OP提出的许多其他细节，最终以某种方式隐藏了解决我的问题的重要部分。

对我来说，诀窍是：white-space: nowrap。

我需要一个下拉组件，我认为这是一个常见的用例。

下面的代码使用React和styled-components。

const styled = window.styled;

const LS = {};

LS.DropdownButton_DIV = styled.div`
  position: relative;
  width: 150px;
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  border: 1px solid silver;
  user-select: none;
  cursor: pointer;
  margin-bottom: 100px;
`;

LS.Dropdown_DIV = styled.div`
  position: absolute;
  left: 0;
  top: 100%;
  display: ${props => props.open ? "block" : "none"};
`;

LS.DropdownItem_DIV = styled.div`
  display: flex;
  padding-left: 8px;
  border: 1px solid silver;
  /* THIS IS WHAT SOLVES THE PROBLEM */  
  white-space: ${props => props.noWrap ? "nowrap" : "initial"};
`;

function App() {

  const [open1,setOpen1] = React.useState(false);
  const [open2,setOpen2] = React.useState(false);

  function toggleDropdown1() {
    setOpen1((prevState) => !prevState);
  }
  
  function toggleDropdown2() {
    setOpen2((prevState) => !prevState);
  }

  return(
    <React.Fragment>
    
      <LS.DropdownButton_DIV onClick={toggleDropdown1}>
        Dropdown Button 1
        <LS.Dropdown_DIV open={open1}>
          <LS.DropdownItem_DIV>
            Dropdown Item Longer Than Parent
          </LS.DropdownItem_DIV>
        </LS.Dropdown_DIV>
      </LS.DropdownButton_DIV>
      
      <LS.DropdownButton_DIV onClick={toggleDropdown2}>
        Dropdown Button 2
        <LS.Dropdown_DIV open={open2}>
          <LS.DropdownItem_DIV noWrap={true}>
            Dropdown Item Longer Than Parent
          </LS.DropdownItem_DIV>
        </LS.Dropdown_DIV>
      </LS.DropdownButton_DIV>
      
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

* {
 box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/styled-components@4.0.1/dist/styled-components.min.js"></script>
<div id="root"/>

Answer 3

两种方式：您可以硬编码绝对定义的宽度，也可以执行大于100％的相对宽度。宽度100％将是包含div的100％（只要div具有定义的宽度）。如果此div具有绝对宽度，意味着它使用像素而不是百分比或em来定义，那么您可以简单地使悬停css比父div更宽。例如，如果您的父div为100px宽，则子项上的悬停应为200px宽或200％或类似值。