css 如何让绝对定位元素位于相对元素内，而不扩展父元素空间，并在父元素外拉伸(z-index)？

uz75evzq 于 12个月前发布在其他

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

我有一个自动完成的组件，我正在使用（downshift + react-virtualize），它是：
1.使父div调整大小。
1.不脱离父容器。
我怎么才能让它们工作？
以下是我的大致情况：

const input = document.querySelector('.input')
const dropdown = document.querySelector('.dropdown')

dropdown.style.display = 'none'

input.addEventListener('click', (e) => {
  e.preventDefault()
  e.stopPropagation()
  
  dropdown.style.display = 'block'
})

window.addEventListener('click', (e) => {
  e.preventDefault()
  e.stopPropagation()
  
  dropdown.style.display = 'none'
})

.form {
  z-index: 1000px; /* simulates the system I have in the app */
  background: pink;
}

.scroller {
  overflow: auto;
  height: 300px;
}

.autocomplete {
  position: relative;
}

.input {
  display: block;
  width: 300px;
  background: cyan;
}

.input-container {
  position: relative;
  width: 300px;
}

.icon {
  position: absolute;
  right: 10px;
  top: 0px;
}

.dropdown {
  position: absolute;
  z-index: 2000px;
  background: green;
}

.list {
  height: 400px; /* really, I use JS to compute size */
}

.item {
  height: 100px;
  padding: 8px;
  display: flex;
  align-items: center;
}

.item:hover {
  background: #fcfcfc;
}

.stuff {
  z-index: 1500px;
  background: yellow;
}

<div class="form">
  <div class="scroller">
    <div class="intro">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="autocomplete">
      <div class="input-container">
        <input class="input" placeholder="Some text..." />
        <i class="icon">▾</i>
      </div>
      <div class="dropdown">
        <div class="list">
          <div class="item">item 1</div>
          <div class="item">item 2</div>
          <div class="item">item 3</div>
          <div class="item">item 4</div>
        </div>
      </div>
    </div>
  </div>
  <div class="stuff">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

我做错了什么？我如何才能让dropdown落在父节点上，而不把内容推下来？z-index值模拟了我在应用程序中到目前为止的复杂排列。
scroller上有overflow: auto，这似乎是罪魁祸首，但我希望这是一个单独的可滚动区域，只是与弹出它，并没有向下推内容。“如何获得位置绝对扩展溢出自动边界？”也许https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/会有所帮助。

Extending position absolute div outside overflow hidden div的

css

来源：https://stackoverflow.com/questions/77762238/how-to-have-absolutely-positioned-element-inside-a-relative-element-not-expand-p

2条答案

按热度按时间

vngu2lb81#

你应该更换下面的样式和测试。

.form {
      z-index: 1000px; /* simulates the system I have in the app */
      background: pink;
    }
    
    .autocomplete {
     position: relative;
      display: inline-block;
    }
    
    .input {
      display: block;
      width: 300px;
      background: cyan;
    }
    
    .input-container {
      position: relative;
      width: 300px;
    }
    
    .icon {
      position: absolute;
      right: 10px;
      top: 0px;
    }
    
    .dropdown {
      position: absolute;
      z-index: 99;
      background: green;
      overflow-y: auto;
      left: 0;
      right: 0;
    }
    
    .item {
      padding: 8px;
      display: flex;
      align-items: center;
    }
    
    .item:hover {
      background: #fcfcfc;
    }
    
    .stuff {
      z-index: 1500px;
      background: yellow;
    }

字符串

赞(0）回复(0）举报 12个月前

dxxyhpgq2#

在这里，我继续进行了我评论的更改。
我标出了需要改变的地方：

const input = document.querySelector('.input')
const dropdown = document.querySelector('.dropdown')

dropdown.style.display = 'none'

input.addEventListener('click', (e) => {
  e.preventDefault()
  e.stopPropagation()
  
  dropdown.style.display = 'block'
})

window.addEventListener('click', (e) => {
  e.preventDefault()
  e.stopPropagation()
  
  dropdown.style.display = 'none'
})

.form {
  z-index: 1000px; /* simulates the system I have in the app */
  background: pink;
}

.scroller {
  overflow: visible; /* <-- HERE */
  height: 300px;
}

.autocomplete {
  position: relative;
}

.input {
  display: block;
  width: 300px;
  background: cyan;
}

.input-container {
  position: relative;
  width: 300px;
}

.icon {
  position: absolute;
  right: 10px;
  top: 0px;
}

.dropdown {
  position: absolute;
  z-index: 2000; /* <-- HERE */
  // background: green; /* <-- HERE (moved to .list) */
}

.list {
  height: 400px; /* really, I use JS to compute size */
  background: green; /* <-- HERE (added) */
}

.item {
  height: 100px;
  padding: 8px;
  display: flex;
  align-items: center;
}

.item:hover {
  background: #fcfcfc;
}

.stuff {
  z-index: 1500px;
  background: yellow;
}

<div class="form">
  <div class="scroller">
    <div class="intro">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="autocomplete">
      <div class="input-container">
        <input class="input" placeholder="Some text..." />
        <i class="icon">▾</i>
      </div>
      <div class="dropdown">
        <div class="list">
          <div class="item">item 1</div>
          <div class="item">item 2</div>
          <div class="item">item 3</div>
          <div class="item">item 4</div>
        </div>
      </div>
    </div>
  </div>
  <div class="stuff">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

赞(0）回复(0）举报 12个月前

我来回答

css 如何让绝对定位元素位于相对元素内，而不扩展父元素空间，并在父元素外拉伸(z-index)？

2条答案

相关问题

热门标签

最新问答