пытается масштабировать JQuery панель переключателя с позиции: абсолютно для моей веб-страницы

Question

Я использовал position:absolute;, чтобы при нажатии на вкладку «Отправить эту страницу на электронную почту» в верхней части панель опускалась и перебирала содержимое внизу, а не нажимала их вниз.Однако использование абсолютного положения означает, что вкладка будет перемещаться влево при увеличении или перемещаться вправо при уменьшении.Это просто не выглядит правильно, когда вы увеличиваете или уменьшаете масштаб.Я хочу, чтобы вкладка «заходила внутрь», когда вы уменьшали масштаб, а не «скользили».Можно ли удержать вкладку от «скольжения» и выровнять ее с выдвигающейся панелью?

Вот моя страница с вкладкой: http://coroomer.com/apartments/ztestpage/index.php

Answer 1

Поскольку вы используете абсолютное позиционирование, вам не нужно беспокоиться о 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"), установите переполнение на" видимый ".Затем установите CSS # toggle следующим образом (настройте значения в соответствии с вашими потребностями):

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

Если вы не хотите идти по этому пути (но вам действительно следует), вам нужно написать функциюэто вызывает window.onresize, который устанавливает позицию элемента #toggle относительно любого элемента по вашему выбору.

Answer 2

Вы должны использовать другой div с фиксированной шириной и установить его положение относительно, тогда, когда вы поместите этот div с абсолютным позиционированием в этот относительный позиционный div, он не будет перемещаться при изменении размера страницы