Question

我使用了position:absolute;，因此当您点击“将此页面发送到您的电子邮件”标签时，在顶部，面板会关闭并覆盖下面的内容，而不是将其推下。但是，使用绝对位置意味着在放大时标签将向左移动或在缩小时向右移动。放大或缩小时看起来不对劲。我希望缩小选项卡时“向内”，而不是“滑动”。是否可以使标签“滑动”并将其与滑出的面板对齐？

这是我的页面，其中包含标签：http://coroomer.com/apartments/ztestpage/index.php

Answer 1

你应该使用另一个固定宽度的div，并将它的位置设置为相对，然后当你将这个div与aboslute定位放入这个相对定位的div时，它将不会随着页面大小调整而移动

Answer 2

由于您使用的是绝对定位，因此无需使用javascript / jQuery。您可以按如下方式修改HTML / CSS：移动它：

<p align="center" class="flip" id="toggle">Send this page to your email.</p>

这是它的第一个孩子：

<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">

在上面的div（id =“map_canvas”）中，将overflow设置为“visible”。然后按如下方式设置#toggle的CSS（调整值以满足您的需要）：

#toggle {
    font-family: segoe ui;
    left: 100px;
    top: -44px;
}

如果你不想走那条路（但你真的应该），你必须写一个在window.onresize上触发的函数，该函数设置#toggle元素相对于你选择的任何元素的位置。 / p>

尝试将jquery面板切换器与position：absolute缩放到我的网页

2 个答案: