9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 265
1

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

27.05.2016, 23:26. Показов 2334. Ответов 15
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Родительский элемент блока див с position:fixed блокируется, как сделать чтобы не блокировался? а то невозможно пользоваться ссылками и выделять текст, хотя экран прокручивает.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.05.2016, 23:26
Ответы с готовыми решениями:

Position: fixed - сделать размеры блока как у body
Есть страница, body { max-width: 1200px; margin: auto; } Т.е. контент посередине. ...

Как сделать, чтобы fixed-элемент двигался не сразу?
Доброй ночи. Есть блок с position: fixed; А я хочу, чтобы у него был отступ от верхней...

Position fixed кнопки внутри блока
Коллеги, доброго времени суток, делаю макет и встал на не понятном до селе мне моменте. Суть...

Как сделать чтобы родительский элемент не перехватывал события дочернего?
Вообщем имеется 2 элемента: 1 - родительский виджет 2 - дочерний, например QLabel. При клике...

15
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
27.05.2016, 23:32 2
Код или адрес в студию!
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 265
27.05.2016, 23:41  [ТС] 3
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#overlay1 {
    position: fixed;
    top: 55%;
    left: 0%;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}
/* модальный блок */
.popup1 {
    top: 30%;
    left: 0;
    right: 100%;       
    font-size: 14px;
    margin: auto;
    width: 5%;
    min-width: 100px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 2px solid #ff2400;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}
HTML5
1
2
3
4
5
6
        <div id="overlay1">
            <div class="popup1">
            <img src="modal/40.png" width="60">
            <button class="close2" title="Закрыть" onclick="document.getElementById('overlay1').style.display='none';document.getElementById('overlay').style.display='block', delay_popup;"></button>
            </div>
        </div>
Добавлено через 2 минуты
т.е. блок <div id="overlay1"> блокирует все элементы которые находятся за ним. этот pop-up
0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
27.05.2016, 23:53 4
Vetrox, стесняюсь спросить блокирует adblock? Если да то переименовывайте классы...
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 265
28.05.2016, 00:02  [ТС] 5
Fedor92, Нет вот этот блок расположен на главной странице сайта - в виде pop-up (реклама о скидке). Он расположен по верх всех элементов прочих. Работает только этот див, а остальные элементы, которые под ним находятся - ссылки, не работают, да и выделять текст невозможно. а если убрать это окошко, тогда все хорошо получается.
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.05.2016, 00:28 6
Не понимаю
http://codepen.io/anon/pen/JKjXNz
Покажите, что там блокируется?
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 265
28.05.2016, 00:33  [ТС] 7
очень странно!! у вас все работает! а у меня блокируется... буду смотреть...
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.05.2016, 00:49 8
Думаю, панель разработчика прольет свет на эту загадку
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 265
28.05.2016, 11:13  [ТС] 9
смотрел через панель разработчика, другие css параметры не задевают...
может, если есть время, поможете? там сохранен файл в html формате
9192081514.myjino.ru
0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
28.05.2016, 11:21 10
Vetrox, вы смеётесь? У Вас же .overlay занимает весь экран и накладывается поверх основного контента поэтому и выделить ничего не можете и ссылки не работают...
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 265
28.05.2016, 11:32  [ТС] 11
да, но mrtoxas скинул по ссылке код http://codepen.io/anon/pen/JKjXNz он работает...
залил его на сервер - не работает =(
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.05.2016, 11:35 12
Вот, пример, как это должно работать
http://codepen.io/anon/pen/OXJbRN
1
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
28.05.2016, 11:36 13
Цитата Сообщение от Vetrox Посмотреть сообщение
да, но mrtoxas скинул по ссылке код http://codepen.io/anon/pen/JKjXNz он работает...
Нижние ссылки не фурычат вообще-то и не будут... Работают только верхние потому-что их .overlay не перекрывает... Поскольку кое-кто хитрит...

Не по теме:

Цитата Сообщение от mrtoxas Посмотреть сообщение
Вот, пример, как это должно работать http://codepen.io/anon/pen/OXJbRN
Исправляемся? :)

1
mrtoxas
28.05.2016, 11:40
  #14

Не по теме:

Цитата Сообщение от Fedor92 Посмотреть сообщение
Поскольку кое-кто хитрит...
Никто не хитрит. Я повставлял ссылки в код, чтобы ТС тыкнул пальцем что и где не работает, а то не понятно было с самого начала. А про нижние ссылки как-то не заметил. Минутка невнимательности была, видимо.

0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
28.05.2016, 11:50 15

Не по теме:

Цитата Сообщение от mrtoxas Посмотреть сообщение
Минутка невнимательности была, видимо.
Вообще-то это был сарказм...



Немного доработал кодmrtoxas, для более точного позиционирования...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 265
28.05.2016, 12:36  [ТС] 16
т.е. если визуально перекрывает, то не работают под ним ссылки, выставляю параметр top: 0; на top: 55%; в overlay1 и ссылки все работают... но работает верхняя половина экрана. рядом справа есть еще один синий div, его не я делал, он почему-то работает стабильно, т.е. все ссылки рядом с ним работают.

Добавлено через 1 минуту
Fedor92, спасибо, сейчас попробую!
0
28.05.2016, 12:36
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.05.2016, 12:36
Помогаю со студенческими работами здесь

Нечто типа position: y-fixed. как сделать ?
Здравствуйте! Есть страница сайта: http://gorenje.designer4.org.ua/ru/produkty.html На ней есть...

Отталкивание блоков от блока со свойством position fixed
Можно ли как то реализовать чтобы от блока со свойством position:fixed( в моём случае это боковая...

Position: fixed Зафиксировать блок в пределах блока body
Ширина блока body равна 500px, расположен по центру экрана. Тогда когда ширина экрана равна 1500. ...

Движение блока при скроллинге. Эмуляция position: fixed
Всем привет! Так уж получилось, что нет возможности использовать фиксирование элемента, а только...

Как сделать div блок с position:fixed на переднем плане?
Имеются много дивов на странице у них при перетаскивании меняется на javascript z-index и...

Position fixed отображение блока без перехода камеры в самое начало
Скажите пожалуйста, есть div блок с position relative, в этом блоке картинки плиткой, при нажатии...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru