Question

我可以向下滚动，但不能向上滚动。我希望对话框周围的窗口边框至少有10px的边距。它似乎在底部工作，但由于某种原因不在顶部。我无法弄清楚原因。

.greyOut {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
}
.wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.dialog {
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  z-index: 100;
  margin: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

<div class="wrap"><div class="greyOut"></div><div class="dialog" style="width: 500px;">
    
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum dolorem, reprehenderit earum dolores cumque autem numquam temporibus alias accusamus perspiciatis mollitia, itaque saepe consectetur adipisci quisquam deserunt quis ad aperiam.</p>
   <p>Vel temporibus vero neque, autem aspernatur quam laudantium corporis enim ex suscipit corrupti, quasi officiis quibusdam, sit repudiandae necessitatibus nostrum repellendus iure quisquam nulla voluptate fuga quod maiores! Illum, est!</p>
   <p>Aspernatur suscipit laborum reprehenderit earum, officiis, dolor neque temporibus mollitia corporis. Provident vel quis quod expedita deserunt culpa ex atque labore nihil voluptatum veniam minus, nemo nostrum fugiat facere quia.</p>
   <p>Praesentium quos vitae voluptas velit error recusandae delectus hic, facere nemo autem, perspiciatis cumque qui sed dolor officiis animi modi! Dolore hic, placeat itaque? Amet doloribus officia porro ipsam dignissimos.</p>
   <p>Laborum nam quaerat, amet, voluptates, cumque facilis quos accusamus dicta dolorum voluptatem quasi inventore minus qui quam sit incidunt. Debitis necessitatibus fuga, temporibus repudiandae nobis, est deleniti delectus doloremque magni?</p>
   <p>Consequatur, perspiciatis, praesentium reiciendis aspernatur laudantium veritatis nesciunt sed id cupiditate inventore velit nobis eligendi provident incidunt, impedit vitae iste odit? Non reprehenderit, ullam nihil modi repudiandae laudantium porro accusamus.</p>
   <p>Veritatis porro, perspiciatis mollitia maxime voluptatum consectetur cupiditate quam recusandae a consequatur officiis quas, dicta esse iusto minus ratione reiciendis impedit nam alias eveniet nobis. Ex dolorem eveniet voluptate necessitatibus!</p>
   <p>Eligendi dolorem voluptatem facere, cupiditate fugit praesentium consectetur velit explicabo, esse distinctio unde amet pariatur rerum, recusandae cum. Aperiam porro expedita commodi ipsam, rem vero officiis tempore. Obcaecati, eaque dolorum.</p>
   <p>Fugit reiciendis, nam illo libero autem quo rerum incidunt quis in deserunt, expedita doloremque! Qui rem hic quibusdam magnam debitis aliquam accusantium harum dolorem libero? Pariatur corporis similique voluptatum ipsam.</p>
   <p>Esse, dolorem ducimus nostrum id earum perspiciatis voluptatem culpa molestias voluptas excepturi odit maxime, expedita recusandae voluptatibus eaque doloremque vel nobis est assumenda illo quasi, debitis incidunt commodi. Labore, magni!</p>
   <p>Ut fugit praesentium quasi cumque libero distinctio exercitationem aperiam est quod inventore, ipsam hic aliquid perferendis voluptatibus, nemo aliquam, esse quia laboriosam cum? Maiores esse aut ullam accusantium, alias. Labore!</p>
   <p>Dicta consectetur quo, modi quisquam, esse natus ipsa nobis unde eligendi, iste accusamus doloribus quaerat facilis impedit accusantium recusandae quia quae autem aperiam debitis quas perspiciatis nihil. Autem, accusantium, ipsa.</p>
   <p>Voluptate, quas tempora adipisci repellat quisquam soluta, nisi sed consequatur nemo beatae hic fugit ex quaerat in itaque exercitationem, culpa libero assumenda distinctio, temporibus fuga officiis vero. Facere, fugit quibusdam.</p>
   <p>Vel ad, soluta autem quod voluptate, praesentium asperiores est nostrum accusamus qui fugiat earum facilis reiciendis ducimus iure perspiciatis quisquam! Fuga harum culpa, atque sed! Ut esse, eveniet. Similique, veritatis.</p>
   <p>Officiis nobis assumenda nemo quaerat ratione, maxime adipisci doloribus fugit odit sequi reiciendis sed quam, sunt eius odio. Nesciunt, quos repudiandae quo aperiam iure provident beatae ratione culpa deleniti consequatur.</p>
   <p>Quam, placeat accusantium sed dolore delectus aliquam provident ea. Culpa omnis nulla, perferendis nostrum nihil distinctio rerum. Eveniet iste, debitis voluptates, voluptas laudantium quas, esse, numquam eius soluta fugit sint.</p>
   <p>Molestiae officia optio reprehenderit sequi dolorum placeat, tempore natus expedita, ullam inventore non quod, eaque aut magnam officiis. Ad corrupti, rerum cumque ipsam maiores suscipit dolor numquam qui ratione quo.</p>
   <p>Saepe animi, voluptates natus nobis, illum iste nostrum. Assumenda sed praesentium neque nemo amet blanditiis fugiat architecto ad nobis voluptas esse repudiandae accusantium, officia quas aspernatur saepe similique dolor cupiditate.</p>
   <p>Accusantium, unde, molestiae! Eveniet voluptas, tempore voluptatem blanditiis, quam sint, unde fuga molestias delectus eum assumenda magni. Error, deleniti ex, vel eius nesciunt voluptatum aut laudantium aliquam pariatur rerum, consequuntur?</p>
   <p>Nemo ad quis alias possimus repellendus quo accusantium eos accusamus mollitia nulla consequuntur delectus perferendis expedita, aut ut cum sint a porro error cumque enim debitis. Ea cumque adipisci doloremque.</p>
    
    
    </div></div>

Answer 1

如果需要将margin: auto;应用于.dialog类，以便从顶部对齐而不是居中。

如果你想保留原先设置的10px边距，只需在父节点上使用填充。

<强> CSS

.wrap {
  padding: 10px;
}

.dialog {
  margin: auto;
}

<强> Working JSBin

如何防止这个灯箱脱离页面顶部？

1 个答案: