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;

使用：

left: 50%;

Answer 2

位置元素从右边而不是从左边

替换

left: 945px;

与

right: 95px;

如何使pop-over的位置绝对与页面元素一起移动

2 个答案: