Как предотвратить появление этого лайтбокса в верхней части страницы?

Question

Я могу прокрутить вниз, но не вверх. Я хочу получить минимум 10 пикселей от границы окна по всему диалоговому окну. Похоже, что он работает на дне, но не по какой-то причине. Я не могу понять, почему.

jsbin

.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, который вы изначально установили, вместо этого используйте вместо этого padding.

CSS

.wrap { 
    padding: 10px; 
} 

.dialog { 
    margin: auto; 
} 

Working JSBin