我正在try 使一个绝对定位的类(SELECT)位于另一个绝对定位的类(抽屉)之上.我试过几种解决方案,但都不能奏效.此外,似乎两个z指数都不会让它发挥作用.

How it looks like

What I want

代码:

https://codepen.io/Luis-Henrique-Valgoi/pen/bGmzeNp

var label = document.querySelector('.label');
var select = document.querySelector('.select');

var clickHandler = function() {
  select.classList.toggle('hidden');
};

label.addEventListener('click', clickHandler);
body {
  background-color: blue;
  position: relative;
}

.drawer {
  position: absolute;
  background-color: white;
  height: 200px;
  width: 500px;
  right: 0;
  top: 0;
  overflow: hidden;
}

.field {
  position: relative;
}

.input {
  background-color: green;
}

.label {
  background-color: yellow;
}

.select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  background-color: red;
  transform: translate3d(0px, 20px, 0px);
  display: block;
  overflow: auto;
  will-change: transform;
  top: 0px;
  left: 0px;
}

.select.hidden {
  display: none;
}
<div class="drawer">
  <div class="field">
    <div class="input">
      <p>field</p>
    </div>
  </div>
  <div class="field">
    <div class="input">
      <p>field</p>
    </div>
  </div>
  <div class="field">
    <div class="label">
      <p>select</p>
    </div>
    <div class="select hidden">
      <p>option 1</p>
      <p>option 2</p>
      <p>option 3</p>
    </div>
  </div>
</div>

推荐答案

当您有多个绝对定位元素时,要控制它们的堆叠方式,可以 for each 绝对容器指定一个z-index并给它一个数字.较大的数字与其余数字重叠.

但在本例中,您的.drawer类的样式看起来是overflow: hidden;,它将剪裁任何流出容器的内容.Line在演示中 comments 道.

var label = document.querySelector(".label");
var select = document.querySelector(".select");

var clickHandler = function () {
    select.classList.toggle("hidden");
};

label.addEventListener("click", clickHandler);
body {
    background-color: blue;
    position: relative;
}

.drawer {
    position: absolute;
    background-color: white;
    height: 200px;
    width: 500px;
    right: 0;
    top: 0;
/*     overflow: hidden; */
}

.field {
    position: relative;
}

.input {
    background-color: green;
}

.label {
    background-color: yellow;
}

.select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background-color: red;
    transform: translate3d(0px, 20px, 0px);
    display: block;
    overflow: auto;
    will-change: transform;
    top: 0px;
    left: 0px;
}

.select.hidden {
    display: none;
}
<div class="drawer">
    <div class="field">
        <div class="input">
            <p>field</p>
        </div>
    </div>
    <div class="field">
        <div class="input">
            <p>field</p>
        </div>
    </div>
    <div class="field">
        <div class="label">
            <p>select</p>
        </div>
        <div class="select hidden">
            <p>option 1</p>
            <p>option 2</p>
            <p>option 3</p>
        </div>
    </div>
</div>

Html相关问答推荐

将容器水平偏离中心放置在桌面上;在移动设备上平稳地集中缩小规模

R中的动态Webscraping

我如何 Select 外部html文件元素作为选项,并显示在一个div与jQuery?

assets资源 净值元素不会扩展到涵盖子项

如果DIV没有特定的sibling 姐妹,则以CSS为目标

角化、剪裁、边缘,但仅在底部2和平滑包装上

禁用所有行,但在16角中单击编辑按钮的行除外

来自元标记的响应文本

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

如何使用 Tailwind CSS 分隔导航栏中的元素?

:after 伪元素没有出现,即使它有 content 属性

获取链接到功能的网页表单

SVG 填充 colored颜色 不使用轮廓填充空白区域

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

如何配置 prettier 使其以 Vue.js 模板语法的特定方式运行?

Angular:从服务器下载 HTML 并打印

W3Schools 幻灯片相同高度

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列?

如何向上移动图像并溢出图像的一部分而另一部分不溢出

基本上,我想要两列包含文本和图像,但第二列是倒置的