#css
#css
Вопрос:
У меня есть ссылка в ячейке таблицы, и при нажатии на ссылку я показываю скрытый div.
В настоящее время я использую position: absolute и z-index: 10. Это работает нормально, но я хотел бы немного переместить его наверх и влево. Когда я добавляю top: -10px и left: -10px, div перемещается в положение окна.
Как мне уменьшить размер ячейки таблицы на 10 пикселей?
Ответ №1:
Вам нужно установить родительский элемент, используя position relative, затем использовать position absolute для элемента, который вы хотите расположить. Итак, если вы хотите, чтобы он располагался на основе таблицы, вам нужно добавить position: relative к таблице (что ничего не даст, потому что оно уже расположено относительно) и position: absolute к наложению. Абсолютное позиционирование выводит элемент из потока документов, а относительное позиционирование оставляет его в потоке документов, поэтому материал перемещается. Причина этого основана на том, как работает CSS: http://www.w3schools.com/css/pr_class_position.asp
относительно Элемент позиционируется относительно своего обычного положения, поэтому «left: 20» добавляет 20 пикселей к ЛЕВОМУ положению элемента
абсолютный Элемент позиционируется относительно его первого позиционированного (не статического) элемента-предка
Вас также может заинтересовать исправленный.
исправлено, что элемент расположен относительно окна браузера
Вот пример: http://pastehtml.com/view/av391nzsv.html
Комментарии:
1. ОК… Итак, как мне ссылаться на <TD>, где div «скрывается»? В jQuery я, вероятно, могу сделать что-то вроде $ (this).parent(); но я все еще не очень понимаю… Не могли бы вы привести пример, пожалуйста? Пример W3schools ссылается на верхнюю / левую часть страницы.
2. если вы хотите, чтобы он накладывался на таблицу, вам нужно установить position: relative для таблицы. затем для элемента (на который это похоже на td), который вы хотите фактически переместить и расположить, установите position: absolute и используйте top / bottom / left / right для перемещения его в нужное положение. я бы привел для вас пример, но сейчас я на работе. Я могу сделать это, когда вернусь домой через пару часов, если вам это все еще нужно.
3. если бы вы связали сайт, это, вероятно, было бы также проще объяснить.
4. Этого еще нет на сайте. Сейчас я пишу код на локальном компьютере. И да, я был бы действительно признателен за пример.
5. pastehtml.com/view/av391nzsv.html извините, что это заняло так много времени. кошки решили съесть мои колонки, пока я был на работе.
Ответ №2:
position: relative;
вместо
position: absolute;
Относительный говорит о необходимости измерения сверху и слева от родительского элемента, абсолютный говорит о необходимости измерения от верхнего левого угла страницы.
Комментарии:
1. Это то, с чего я начал, но по какой-то причине это выталкивает ячейку моей таблицы, когда она становится видимой…
Ответ №3:
использовать margin-top:-10px; margin-left:-10px;