#javascript #jquery #css #position #slidetoggle
#javascript #jquery #css #позиция #slidetoggle
Вопрос:
Я использовал position:absolute; так, чтобы при нажатии на вкладку «Отправить эту страницу на свой электронный адрес» вверху панель опускалась и просматривала содержимое под ней, вместо того, чтобы нажимать на них. Однако использование абсолютной позиции означает, что вкладка будет перемещаться влево при увеличении или вправо при уменьшении масштаба. Это просто выглядит неправильно, когда вы увеличиваете или уменьшаете масштаб. Я хочу, чтобы вкладка «уходила внутрь» при уменьшении масштаба, а не «скользила». Возможно ли предотвратить «скольжение» вкладки и выровнять ее с помощью выдвигающейся панели?
Вот моя страница с вкладкой:http://coroomer.com/apartments/ztestpage/index.php
Ответ №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 относительно любого элемента по вашему выбору.
Комментарии:
1. Можете ли вы объяснить, что такое «первый дочерний элемент» и как именно я должен это сделать? Я ввел это в свой код, и карта Google появилась в моем заголовке: <div style=»float: right; position: relative; background-color: rgb (229, 227, 223); переполнение: видимое;» 500px =»» height:=»»id=»map_canvas» class=»map»> <p id=»toggle» class=»flip» align =»center»> Отправьте эту страницу на свою электронную почту.< /p> </div>
2. С языками разметки (такими как HTML) у вас часто есть вложенные элементы, то есть элемент, внутри которого есть другой элемент. Эти вложенные элементы являются «дочерними» по отношению к «родительскому» элементу. Итак, если у вас есть подобная структура, <div><p></p><span></span></div>, <p> и <span> являются дочерними элементами элемента <div>, а <p> является первым дочерним элементом, потому что это первый элемент, который следует после <div> .
Ответ №2:
вы должны использовать другой div с фиксированной шириной и установить для его положения значение relative, тогда, когда вы помещаете этот div с неправильным расположением в этот относительно расположенный div, он не будет перемещаться при изменении размера страницы