Родительский элемент блока див с position:fixed блокируется, как сделать чтобы не блокировался? - HTML, CSS - Ответ 9200122

@Fedor92 · 28.05.2016, 11:50

Не по теме:

Сообщение от mrtoxas

Минутка невнимательности была, видимо.

Вообще-то это был сарказм...

Немного доработал кодmrtoxas, для более точного позиционирования...

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .popup{
              border:1px solid black;
              width:300px;
              height:100px;
              line-height:50px;
              
              text-align:center;
              position:fixed;
              background:#fff;
              margin-left:-150px;
              margin-top:-50px;
              top:50%;
              left:50%;
               box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
            }
            .content{
              width:800px;
              margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div class="popup">
            <h1>Enjoy!</h1>
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id mi id leo efficitur congue vulputate a eros. Proin nec pharetra sem. Vestibulum non placerat quam. Vestibulum nec pretium odio. Vivamus semper, metus id aliquet accumsan, augue lorem dignissim orci, pulvinar malesuada elit magna vel dui. Praesent metus enim, condimentum vel tortor quis, feugiat sollicitudin nunc. Phasellus ut risus diam. Suspendisse fringilla ut nunc accumsan finibus.
            Suspendisse hendrerit urna et lacus varius, ut hendrerit diam tincidunt. Etiam rhoncus condimentum ullamcorper. Quisque quam neque, tristique ac tempus et, porta sed mi. Nunc scelerisque quis sem eget ultricies. Quisque urna eros, dapibus eu libero id, porttitor dignissim risus. Ut aliquam diam fermentum neque malesuada lobortis. Integer convallis vehicula scelerisque. Aliquam ut enim erat. Nam velit purus, consequat sit amet sollicitudin vel, rutrum ut nisl. Nulla eget congue nunc. Proin pulvinar augue dui, vulputate accumsan orci suscipit nec.
            Phasellus vehicula tempus ligula sed pretium. Integer fermentum sodales sapien, at vehicula libero. Sed est turpis, vehicula sed tristique et, varius eu tortor. Donec sed suscipit magna. Quisque sem eros, consectetur quis eleifend a, pharetra at ex. Donec laoreet neque a mauris sodales mollis. Suspendisse at tortor in augue eleifend sagittis nec ut tellus. Aliquam tortor felis, tempor quis hendrerit accumsan, feugiat at massa. Nam at orci vulputate, feugiat nulla in, tempor lacus. Nam molestie gravida nunc hendrerit feugiat. Aenean egestas vitae enim vel semper. Vivamus at ultricies erat. Suspendisse quis gravida neque. In ultricies diam at ligula volutpat pretium. Duis vitae sem augue. Proin ut aliquet nunc, finibus semper justo.
            Praesent a pulvinar sem, at interdum dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam elit nisi, eleifend eu lobortis id, tempor in nisi. Nam molestie ante vel enim mattis, eu convallis mauris fermentum. Suspendisse tempus at est eget ullamcorper. Etiam ut nibh vitae ligula accumsan venenatis sit amet a nunc. Cras mollis erat sed tellus cursus laoreet. Duis cursus velit tortor, et auctor purus malesuada id. Etiam sit amet eros non neque efficitur lacinia vitae in dui. Fusce quis gravida urna. Nullam nec facilisis dui. Mauris eget lorem mattis, scelerisque justo quis, pretium risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            Aliquam erat volutpat. Quisque nunc mauris, luctus sed velit tincidunt, pellentesque vulputate nisl. Ut in pretium velit. Praesent pulvinar, quam id rhoncus suscipit, purus purus auctor leo, in suscipit purus velit sed arcu. Etiam non libero mattis, venenatis nulla vel, malesuada metus. Aliquam erat volutpat. Nunc diam tellus, porta id nisi ac, tristique ornare tellus. Sed porttitor neque eget nunc luctus, quis bibendum nunc volutpat. Duis varius leo eros, vel vulputate quam ultricies vitae. Sed nisl dolor, ullamcorper tempor nisi non, laoreet maximus arcu. Nulla dapibus eget mauris sit amet consectetur.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id mi id leo efficitur congue vulputate a eros. Proin nec pharetra sem. Vestibulum non placerat quam. Vestibulum nec pretium odio. Vivamus semper, metus id aliquet accumsan, augue lorem dignissim orci, pulvinar malesuada elit magna vel dui. Praesent metus enim, condimentum vel tortor quis, feugiat sollicitudin nunc. Phasellus ut risus diam. Suspendisse fringilla ut nunc accumsan finibus.
            Suspendisse hendrerit urna et lacus varius, ut hendrerit diam tincidunt. Etiam rhoncus condimentum ullamcorper. Quisque quam neque, tristique ac tempus et, porta sed mi. Nunc scelerisque quis sem eget ultricies. Quisque urna eros, dapibus eu libero id, porttitor dignissim risus. Ut aliquam diam fermentum neque malesuada lobortis. Integer convallis vehicula scelerisque. Aliquam ut enim erat. Nam velit purus, consequat sit amet sollicitudin vel, rutrum ut nisl. Nulla eget congue nunc. Proin pulvinar augue dui, vulputate accumsan orci suscipit nec.
            Phasellus vehicula tempus ligula sed pretium. Integer fermentum sodales sapien, at vehicula libero. Sed est turpis, vehicula sed tristique et, varius eu tortor. Donec sed suscipit magna. Quisque sem eros, consectetur quis eleifend a, pharetra at ex. Donec laoreet neque a mauris sodales mollis. Suspendisse at tortor in augue eleifend sagittis nec ut tellus. Aliquam tortor felis, tempor quis hendrerit accumsan, feugiat at massa. Nam at orci vulputate, feugiat nulla in, tempor lacus. Nam molestie gravida nunc hendrerit feugiat. Aenean egestas vitae enim vel semper. Vivamus at ultricies erat. Suspendisse quis gravida neque. In ultricies diam at ligula volutpat pretium. Duis vitae sem augue. Proin ut aliquet nunc, finibus semper justo.
            Praesent a pulvinar sem, at interdum dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam elit nisi, eleifend eu lobortis id, tempor in nisi. Nam molestie ante vel enim mattis, eu convallis mauris fermentum. Suspendisse tempus at est eget ullamcorper. Etiam ut nibh vitae ligula accumsan venenatis sit amet a nunc. Cras mollis erat sed tellus cursus laoreet. Duis cursus velit tortor, et auctor purus malesuada id. Etiam sit amet eros non neque efficitur lacinia vitae in dui. Fusce quis gravida urna. Nullam nec facilisis dui. Mauris eget lorem mattis, scelerisque justo quis, pretium risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            Aliquam erat volutpat. Quisque nunc mauris, luctus sed velit tincidunt, pellentesque vulputate nisl. Ut in pretium velit. Praesent pulvinar, quam id rhoncus suscipit, purus purus auctor leo, in suscipit purus velit sed arcu. Etiam non libero mattis, venenatis nulla vel, malesuada metus. Aliquam erat volutpat. Nunc diam tellus, porta id nisi ac, tristique ornare tellus. Sed porttitor neque eget nunc luctus, quis bibendum nunc volutpat. Duis varius leo eros, vel vulputate quam ultricies vitae. Sed nisl dolor, ullamcorper tempor nisi non, laoreet maximus arcu. Nulla dapibus eget mauris sit amet consectetur.</p>
        </div>
    </body>
</html>

Вернуться к обсуждению:
Родительский элемент блока див с position:fixed блокируется, как сделать чтобы не блокировался? HTML, CSS

Следующий ответ