时间戳

首页 > 解决方案 > 垂直滚动时下拉内容固定在屏幕上

css - 垂直滚动时下拉内容固定在屏幕上

问题描述

我想在单击按钮时显示下拉菜单。但是下拉菜单显示不靠近单击的按钮，并且在垂直滚动页面时保持固定。下面是代码

 <div>
     <div onClick={this.handle_click}>
         {toggle}
     </div>
     {this.movie_list.opened &&
         <div className="dropdown_contents">
            {React.Children.map(
                contents,
                (child, index) => { return (
                            child && <div
                                key={index}
                                className="dropdown_item"
                                onClick={this.handle_item_click}>{child} 
                             </div>); }
             )}
          </div>
       }
  </div>);

CSS如下

.dropdown_wrapper {
    position: relative;
}

.dropdown_contents {
    position: absolute;
    background-color: $white;
    /*position: absolute;*/
    box-shadow: 0 8px 14px 0 rgba(6,28,63,0.3);
    z-index: 10;
 }
.dropdown_item {
    min-width: 150px;
    min-height: 40px;
    display: flex;
    padding: 8px;
    align-items: center;
    cursor: pointer;
}

当我在上面的代码中将类下拉包装器添加到最上面的 div 元素时

<div className="dropdown_wrapper">
            <div onClick={this.handle_click}>
                {toggle}
            </div>

下拉菜单无法正确显示。我看到它隐藏在其他元素之间。可以请一些帮助。谢谢。

标签： cssreactjs

解决方案

您将包装器上的位置设置为相对，并为绝对定位的下拉元素设置 z-index。

.dropdown_wrapper {
  position: relative;
}

.dropdown_contents {
  background-color: orange;
  width: 100px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
}
<div class="dropdown_wrapper">
  <button>
    Button
  </button>
  <div class="dropdown_contents">
    <div>Item</div>
  </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur perspiciatis suscipit labore accusamus debitis adipisci praesentium accusantium dolor, possimus, itaque? Accusantium voluptate autem aperiam, recusandae facere ea eligendi temporibus qui deserunt nam commodi rerum aspernatur hic repellendus numquam odio deleniti. Modi beatae voluptate similique illo necessitatibus in, vero eaque. Aspernatur quis vero architecto natus laudantium non ullam necessitatibus, dolores commodi doloremque beatae? Atque reiciendis, minima deserunt ipsa temporibus perferendis facilis magnam ratione, nemo nobis. Placeat veritatis sunt officiis at officia dolore porro, obcaecati vero! Aspernatur magni sapiente quisquam maiores ducimus cumque sunt eos modi amet reiciendis, et, laudantium nihil.</p>
<p>Quis incidunt numquam, illum aut perspiciatis quae eum pariatur reprehenderit laborum a consequuntur aspernatur, atque ratione rem nisi unde quidem harum ab dignissimos consectetur cupiditate earum maxime temporibus. Illum rem, fugit, quidem tempore excepturi necessitatibus minima enim id similique esse, inventore, quod! Consequatur est ea, in deserunt? Fugiat assumenda omnis illo eveniet suscipit commodi nostrum quos cum odit earum. A, natus iusto repellat sint aspernatur nobis nostrum, qui fuga fugiat eligendi molestiae eius rem reiciendis architecto id temporibus ratione. Quasi officia quia, dolorum voluptate, quam libero voluptates vitae error nostrum officiis in. Impedit eos hic fuga incidunt cum vitae ex.</p>
<p>Magnam ut, quidem fugit dignissimos! Debitis praesentium, sed laborum ea repellendus itaque quisquam nesciunt possimus veritatis reprehenderit unde quidem, dolorum iste! Neque quos voluptate odio iusto quis, corporis cupiditate qui provident similique, rerum ratione, minima aspernatur. Cupiditate est laudantium, accusamus cum quas, ab rerum, consequatur nihil et itaque excepturi debitis quod quidem ducimus eaque minima libero doloribus reprehenderit inventore. Fugiat nulla, cupiditate eum quam, non vero magnam accusantium, numquam, rem laborum rerum quaerat. Nulla fugit repellendus iusto neque expedita esse ullam pariatur, quae fugiat modi asperiores unde alias voluptates quas ad quos dicta, soluta voluptatibus. Itaque totam quisquam modi temporibus.</p>
<p>Atque amet ducimus quibusdam voluptas, recusandae natus, doloremque reiciendis. Est sit non possimus libero at animi illo beatae nihil excepturi quos omnis, atque repellendus esse harum similique debitis delectus voluptate! Fugit saepe incidunt eos voluptatibus, dignissimos excepturi obcaecati velit expedita odit ipsum placeat molestias unde esse cupiditate laborum ratione nihil veniam totam rem magnam recusandae itaque, doloribus aut commodi. Amet, illum quae necessitatibus sint similique, velit officiis tempora neque corporis rem, ipsam ad maxime distinctio ea. Eius, inventore? Amet corporis fuga sed, perferendis quam ut dignissimos a molestiae. Cupiditate, saepe, totam. Ratione laborum a eaque. Recusandae, illum incidunt eum eveniet?</p>
<p>Porro autem veniam doloribus aliquam, repellat excepturi libero maiores soluta cumque impedit eligendi cupiditate quo, recusandae nesciunt ex optio, voluptas quia sit. Nobis nisi soluta, ab odit quae. Quia, minus placeat numquam, quisquam adipisci vel quaerat omnis quae! Ut odit, rerum. Fugiat totam dolores itaque sint repellat quo, aliquid obcaecati quasi ducimus architecto minima commodi eum quod qui laboriosam maiores voluptatibus. Debitis nulla autem soluta doloribus ipsa hic, harum mollitia incidunt sapiente, pariatur velit veniam maiores, repudiandae, consequatur quae accusantium at cupiditate illum dignissimos reprehenderit. Facere tenetur, voluptates dicta nesciunt, aliquam, neque cum est mollitia veritatis sequi magnam et cumque.</p>
<p>Explicabo possimus laboriosam quas facilis vero impedit modi enim iusto tempora magnam, at, ratione, amet qui consectetur. Alias est accusantium molestiae consectetur non enim ipsam harum, a, magnam sequi praesentium doloremque at iure iusto unde obcaecati veniam laudantium quidem quos molestias, doloribus quae id quod aliquid commodi. Unde sequi dicta doloremque dolorum repellat ipsam. Sit eos iusto reiciendis tempore hic magni corporis molestias, delectus consequuntur non obcaecati neque voluptatum assumenda, aut rerum iure autem tempora reprehenderit cumque tenetur quibusdam nihil facilis, nemo eveniet nesciunt. Totam, ea, explicabo. Iure veniam neque, consequuntur rem, libero obcaecati eius dignissimos exercitationem. Consequuntur, libero, temporibus.</p>
<p>Ad magnam corporis iure culpa dolorem vero quia, neque, ipsa quas. Qui odio perspiciatis debitis aperiam asperiores, nobis, velit ipsum tempora fuga possimus tenetur eos reprehenderit non ratione. Nesciunt inventore, suscipit architecto eligendi, nemo omnis minus. Quisquam et minima animi accusamus eligendi. Ullam pariatur, quia quidem molestias dolores, expedita. Vero magni tempore aliquid iure tenetur mollitia hic unde obcaecati enim at amet adipisci cum fugiat quam fuga eveniet saepe illum, reiciendis! Atque suscipit molestiae ex assumenda, consequuntur voluptates aliquid voluptatum excepturi optio velit facere reiciendis voluptate natus soluta asperiores praesentium necessitatibus id omnis. Explicabo laborum earum, dolore tenetur, ipsam numquam.</p>
<p>Dolorem eos, quaerat officiis nobis. Officiis rem eligendi temporibus dolore expedita, similique reiciendis ab magnam, inventore eaque fugiat nobis voluptatem voluptatum dolorum obcaecati excepturi molestias iusto unde aperiam a velit. Quasi minima perspiciatis dolor inventore, quisquam laudantium porro veniam possimus, dignissimos suscipit, ipsum aliquam iste nulla aut incidunt praesentium tenetur doloribus laborum ab animi. Neque hic, tempore enim eius accusantium fugiat architecto, assumenda laborum sit aut cumque natus, magni voluptatem iusto eligendi est modi unde aliquam quaerat. Perspiciatis quidem, cumque ex libero accusamus, magnam consequuntur quis similique facilis! Fuga dignissimos fugit suscipit harum hic blanditiis amet magnam nam cumque nostrum.</p>

推荐阅读