Позиционирование блока с absolute

@MirDj · Регистрация: 16.01.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте форумчане. Пытаюсь сделать всплывающее окно, куда ajax возвращает данные при наведении на элемент.
Проблема в том, что Пользователь кликает на иконку, рядом с ней есть блок с position:relative, а уже в нем блок с absolute.

HTML5
1
2
3
4
        <div style="position:relative;" >
        <div class="infoBlock" id="votesInfo<?=$idCom?>" >
        <div class="BodyInfoBlock" id="<?=$nameVotes?>votesReturn<?=$idCom?>" >
        </div></div></div>

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
.infoBlock {
    display: none;
    left:50%;
    margin-left:-150px;
    padding-top: 10px;
    z-index:3;
    position: absolute;
    min-height: 30px;
    width: 300px;
    max-height: 80%;
  }
 
  .BodyInfoBlock {
  z-index:3;
    position: relative;
    width: auto;
    min-height: 50px;
    height: auto;
    padding: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    line-height: 15px;
    background: rgba(0,0,0,.8);
    border-radius:3px;
    box-shadow: 1px 2px 7px rgba(0,0,0,.6);
  }

На большом экране все работает как надо, рядом со счетчиком отображается всплывающая подсказка, но если экран маленький, а элемент куда возвращается информация находится близко к краю страницы, то блок выходит за пределы и видна только некоторая часть от него.
Понятно что в стилях я сам задаю абсолютное позиционирование, но можно ли сделать как-то, чтобы блок, если ему не хватает места, автоматически размещался, дпустим с отступом в 5px от края, а не залезал за него?

@AlexZaw · 26.12.2017, 12:34

сделайте медиа запрос который на маленьком экране будет изменять позицию элемента, например выставлять margin-left:0

@MirDj · 26.12.2017, 12:39 **[ТС]**

AlexZaw, тут проблема в том, что на маленьком экране надо бы делать тогда margin: 0px auto; , но оно не работает при абсолютном позиционировании... Ведь смысл чтобы блок смещая вправо, не стал залезать опять же за пределы но с другой стороны, а динамично подстраивался под экран

@AlexZaw · 26.12.2017, 13:03

Я так понимаю не влезает у вас .BodyInfoBlock , а он в свою очередь расположен в .infoBlock , вот и двигайте .infoBlock, либо изменяйте его размеры.
Можно конечно с помощью js получать координаты и если они выходят за экран то устанавливать новый отступ,но лучше все-таки использовать медиа запросы

@MirDj · 26.12.2017, 13:09 **[ТС]**

AlexZaw, Это понятно что надо двигать .infoBlock. Тут вопрос как именно это делать. По этому я и обратился за советом. А насчет медиа запросов, то надо подумать как это правильно сделать.
Подвинуть блок не проблема, но нужно знать куда двигать.Вылезает ли он или нет, если да, то куда именно вылезает

@Fedor92 · 26.12.2017, 13:09

MirDj, тултипы юзать не вариант?

https://jqueryui.com/tooltip/

@MirDj · 26.12.2017, 13:17 **[ТС]**

Fedor92, дополнительные библиотеки на Jquery?
Зачем? Неужели нельзя просто сделать позиционирование на css?
Смысл моего блока в том, что он показывает различную информацию. Допустим есть кнопки для голосования и есть счетчик положительных и отрицательных. При наведении на счетчики в этот блок возвращаются аватарки тех кто голосовал. ну и другие варианты тоже использования есть. Да и мне не надо чтобы блок исчезал как только элемент потерял фокус, а была возможность курсором "шарить" в блоке куда возвращается информация.

@AlexZaw · 26.12.2017, 13:25

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

Подвинуть блок не проблема, но нужно знать куда двигать.Вылезает ли он или нет, если да, то куда именно вылезает

Ну если на маленьком экране он вылезает влево, значит двигать его нужно вправо и наоборот, если вообще не влезает в экран - нужно его уменьшать, что тут думать то? В браузере можно посмотреть при какой ширине экрана элемент начинает выходить за границы и исходя из этого задавать ширину в медиа запросе.
Дополнительно можно ограничить ширину .BodyInfoBlock что бы при слишком длинном контенте он не выходил за границы родителя

@Fedor92 · 26.12.2017, 13:31

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

Зачем? Неужели нельзя просто сделать позиционирование на css?

На css можно многое...)) Вот Вам пример абсолютного позиционирования:

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            box-sizing:border-box
        }
        html,body{
            width:100%;
            height:100%;
            margin:0
        }
        .block{
            position:relative;
            width:100%;
            height:100%;
            border:2px solid red
        }
        
        .infoBlock{
            position:absolute;
            width:300px;
            height:300px;
            left:50%;
            top:50%;
            margin-left: -150px;
            margin-top:-150px;
            border:2px solid blue;
            overflow:scroll
        }
    </style>
</head>
<body>
        <div class="block">
            <div class="infoBlock" id="votesInfo<?=$idCom?>" >
                <div class="BodyInfoBlock" id="<?=$nameVotes?>votesReturn<?=$idCom?>" ></div>
            </div>
        </div>
</body>
</html>

При любом разрешении блок будет аккурат по центру и по ширине и по высоте... Прокрутки сделал специально для того, чтобы можно было подгрузить любое количество содержимого... Раз Вам тултипы не угодили...))

@MirDj · 26.12.2017, 13:32 **[ТС]**

AlexZaw, тут все зависит от того, где располагается элемент, на который ты наводишь курсор.
Т.е если элемент находится ближе к левому краю страницы, то тогда будет вылезать за левый край. Если ближе к правому краю, то соответственно будет туда вылезать. Вот что нужно учитывать. Ну задам я условие что выставлять margin слева, а если элемент располагается справа, то у меня этот блок еще больше залезет за край

@AlexZaw · 26.12.2017, 13:42

Можете рабочую ссылку дать? Скриншот или хотя бы нарисовать схематично где и как у вас располагаются элементы?
Если все упирается в позиционирование то его нужно просто правильно реализовать, возможно нужно просто правильно разместить <div style="position:relative;" > или еще какие то элементы? Без понимания что и как у вас расположено и на каком элементе стоит hover, можно долго гадать

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	26.12.2017, 12:34
	сделайте медиа запрос который на маленьком экране будет изменять позицию элемента, например выставлять `margin-left:0` 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	26.12.2017, 12:39 [ТС]
	AlexZaw, тут проблема в том, что на маленьком экране надо бы делать тогда margin: 0px auto; , но оно не работает при абсолютном позиционировании... Ведь смысл чтобы блок смещая вправо, не стал залезать опять же за пределы но с другой стороны, а динамично подстраивался под экран 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	26.12.2017, 13:03
	Я так понимаю не влезает у вас .BodyInfoBlock , а он в свою очередь расположен в .infoBlock , вот и двигайте .infoBlock, либо изменяйте его размеры. Можно конечно с помощью js получать координаты и если они выходят за экран то устанавливать новый отступ,но лучше все-таки использовать медиа запросы 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	26.12.2017, 13:09 [ТС]
	AlexZaw, Это понятно что надо двигать .infoBlock. Тут вопрос как именно это делать. По этому я и обратился за советом. А насчет медиа запросов, то надо подумать как это правильно сделать. Подвинуть блок не проблема, но нужно знать куда двигать.Вылезает ли он или нет, если да, то куда именно вылезает 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	26.12.2017, 13:09
	MirDj, тултипы юзать не вариант? https://jqueryui.com/tooltip/ 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	26.12.2017, 13:17 [ТС]
	Fedor92, дополнительные библиотеки на Jquery? Зачем? Неужели нельзя просто сделать позиционирование на css? Смысл моего блока в том, что он показывает различную информацию. Допустим есть кнопки для голосования и есть счетчик положительных и отрицательных. При наведении на счетчики в этот блок возвращаются аватарки тех кто голосовал. ну и другие варианты тоже использования есть. Да и мне не надо чтобы блок исчезал как только элемент потерял фокус, а была возможность курсором "шарить" в блоке куда возвращается информация. 0

@MirDj 3 / 3 / 2 Регистрация: 16.01.2013 Сообщений: 471
	26.12.2017, 13:32 [ТС]
	AlexZaw, тут все зависит от того, где располагается элемент, на который ты наводишь курсор. Т.е если элемент находится ближе к левому краю страницы, то тогда будет вылезать за левый край. Если ближе к правому краю, то соответственно будет туда вылезать. Вот что нужно учитывать. Ну задам я условие что выставлять margin слева, а если элемент располагается справа, то у меня этот блок еще больше залезет за край 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	26.12.2017, 13:42
	Можете рабочую ссылку дать? Скриншот или хотя бы нарисовать схематично где и как у вас располагаются элементы? Если все упирается в позиционирование то его нужно просто правильно реализовать, возможно нужно просто правильно разместить `<div style="position:relative;" >` или еще какие то элементы? Без понимания что и как у вас расположено и на каком элементе стоит hover, можно долго гадать 0