Как сделать положение всплывающего окна абсолютным, чтобы оно перемещалось вместе с элементами страницы

Question

Я работаю над WP, и я добавил плагин под названием "WordPress PopUp", чтобы показать опцию, когда кто-то заходит на мой сайт.

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

Как я могу сделать движение вместе с другими элементами?

Вот как выглядит HTML:

<div id='<?php echo $popover_messagebox; ?>' class='visiblebox' style='position: fixed; <?php echo $style; ?>'>
    <a href='' id='closebox' title='Close this box'></a>
    <div id='message' style='<?php echo $box; ?>'>
        <?php echo do_shortcode($popover_content); ?>
        <div class='clear'></div>
        <?php if($popover_hideforever != 'yes') {
            ?>
            <div class='claimbutton hide'><a href='#' id='clearforever'><?php _e('Never see this message again.','popover'); ?></a></div>
            <?php
        }
        ?>
    </div>
    <div class='clear'></div>
</div>

Вот CSS:

div#messagebox {
position: fixed;
background: none;
z-index: 999;
padding: 10px;
left: 945px;
top: 152px;
z-index: 999999;
margin: 0px;
visibility: visible;
}

div#messagebox div.claimbutton {
position: absolute;
bottom: -15px  !important;
right: 10px  !important;
width: 295px  !important;
background-color: white  !important
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
}

div#messagebox div.claimbutton a:visited, div#messagebox div.claimbutton a {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px !important;
font-weight: bold;
padding-right: 5px;
}

#message p {
position: relative;
clear: both;
}

#messagebox #closebox {
position: absolute;
width: 30px;
height: 29px;
background: transparent url(%styleurl%images/closemessagebland.png) no-repeat;
top: -5px;
left: -5px;
z-index: 5;
}

div#message {
position: relative;
background: #fff;
font: 0.9em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
min-height: 90%;
overflow: hidden;
border: 1px solid #ccc;
}

#messagebox. #closebox {
top: 0 !important;
left: 0 !important;
}

Вот ссылка на мой сайт

Answer 1

Элемент позиции справа вместо слева

замещать

left: 945px;

с

right: 95px;

Answer 2

Попробуйте позиционировать элемент на основе процента вместо значения в пикселях. Например.

Заменить:

left: 945px;

С:

left: 50%;