根据屏幕大小和父 div 位置定位子 div答案

【问题标题】：Positioning a children div depending on screen size and parent div position根据屏幕大小和父 div 位置定位子 div
【发布时间】：2015-06-16 18:07:17
【问题描述】：

我有一个 div（基本上是一个按钮），它显示另一个 div（基本上是某些项目的容器）。

检查现实世界的例子：

还有一个working example in Plunkr。

如您所见，容器层放置在带有

的按钮下方

position: absolute;

如果按钮位于页面左上角的某处，则效果很好，但如果按钮位于页面底部或右侧某处，则效果不佳，因为它始终显示在按钮下方，并且向右展开。这会导致图层在网页可见区域之外呈现并创建滚动。

有什么方法我可以只用 CSS 做以下事情：

如果右侧没有足够的空间，则通过将图层的右上角放在按钮的右下角来渲染图层。
如果底部没有足够的空间，则将图层放在按钮的顶部进行渲染。

请注意，我以前不知道图层的宽度或高度。

这可以是HTML5/CSS3的方案，我不需要支持旧浏览器。

【问题讨论】：

CSS 无法检测到元素的布局和空间......所以我认为 JS 将是这里的答案。
@Paulie_D 我认为经过 15 年和下一代 CSS 标准，如果没有 JS，这将最终成为可能:(
哦，天哪，不... CSS 无法检测到任何东西，它不太可能检测到...它基于选择器的样式并相应地应用规则。
好吧，您正在使用角度，那么谁不实施检查，打开并在需要时向容器添加类？将容器放在顶部，您可以进行转换。顶部示例：Plunkr
@BogdanKuštan 是的，我知道我可以用 JS 做到这一点。我一直在寻找纯 CSS 解决方案，因为我不想在代码中加载与视觉相关的内容。

标签： javascript html css

【解决方案1】：

AFAIK 是不可能的。可能的方法是使用 javascript 检测它，或者如果您只想使用 CSS，则必须定义位置类。示例：

HTML

<div class="dropdown btm-right">
  <span class="button">Button</span>
  <div class="items">
    <span class="item">Item</span>
  </div>
</div>

CSS

.dropdown {
  display: inline-block;
  position: fixed;
}
.dropdown:hover .items {
  display: inline-block;
}
.dropdown.btm-right {
  bottom: 10px;
  right: 10px;
}
.dropdown.top-right {
  top: 10px;
  right: 10px;
}
.dropdown .button {
  position: relative;
  z-index: 1;
}
.dropdown .items {
  position: absolute;
  display: none;
}
.dropdown.btm-right .items {
  right: 0;
  bottom: 100%;
}
.dropdown.top-right .items {
  top: 100%;
  right: 0;
}

然后我们可以使用btm-right 或top-right 类来定位下拉菜单。谢谢！

【讨论】：