css 如何限制相对绝对样式元素的重叠

zpjtge22 于 2023-01-22 发布在其他

关注(0)|答案(2)|浏览(174)

我正在尝试从头开始开发多选。当然我必须使用相对绝对下拉菜单（我需要呈现它超过其他元素）。
因为我也有移动"滑动"菜单我面临的问题：我的多选渲染在我的菜单上方

下面您可以看到其他条件：

菜单：

.button-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 75px);
    position: absolute;
    top: 75px;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    background-color: transparent;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    padding-right: 0;

输入：

.input-area  {
    height: 40px;
    width: 100%;
    border: 1px solid;
    border-color: var(--grey-light);
    display: flex;
}

下拉列表：

.select-content {
    height: 120px;
    width: 100%;
    border: 1px solid;
    border-color: var(--grey-light);
    overflow-y: scroll;
    background-color: var(--pink-super-light);
}

我该如何解决这个问题？我必须使用相对绝对值，因为我需要渲染下拉菜单在其他元素之上，但在侧边菜单之下。我尝试在菜单和下拉菜单中使用z索引，但没有得到任何有用的结果。可能我错过了一些东西...有变通方法吗？
目标：开发下拉多选功能，它可以显示在其他元素之上，但可以正确使用侧菜单。
谢谢你抽出时间。

css

来源：https://stackoverflow.com/questions/75159331/how-to-restrict-overlapping-of-element-with-relative-absolute-styles

2条答案

按热度按时间

hgtggwj01#

你的代码和名字是不清楚永远对不起，但我会尽力帮助。
让我们澄清一些事情在css中的定位。
首先，你需要知道市场上最常用的3种仓位之间的区别。

**· Position Relative：**将元素从其所在位置移动到其自身的边。
**· Position Absolute：**从第一个父元素的两侧移动元素。
**·位置Fixed：**从窗侧固定元素位置。

现在，让我们分析您的代码...
首先，菜单需要占据fixed的位置，而不是绝对位置，因为它需要占据整个屏幕的特定位置。
其次，下拉菜单激活按钮需要位置relative，以便您可以将选项absolute定位到它。
因此，您必须做的是为整个下拉菜单输入和位置为relative的内容提供一个父级，而子级将是绝对的。
这些是关于位置的一些注解。
但是，如果元素相互重叠呢？！
这是由z-index属性处理的，该属性只接受数字，因此z-index的数字值越大，屏幕上的元素排序就越高。
但请注意，z-index属性将不会对任何元素起作用，直到该元素为position取一个值，该值可以是绝对值或其他值，但不是静态的，或者该元素取任何transform值，例如可以是scale(1)。
现在我觉得你的问题很容易自己解决。