我正在开发 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;
}
这是我网站的链接