Как обеспечить абсолютное позиционирование и высоту строки с помощью CSS?

Я создал плагин jQuery Sliding Drilldown, который работает довольно хорошо, за исключением одной части: позиционирования стрелок. Если я изменяю размер шрифта/высоту строки элемента, в котором они содержатся, они перемещаются, что для меня не имеет смысла. Кто-нибудь может сказать мне, почему? Действительно ли высота строки влияет на расположение 0,0 в элементе? Или что-то еще происходит, что я упускаю?

И — вот настоящий вопрос — могу ли я делать то, что пытаюсь сделать, используя просто CSS? Я знаю, что могу использовать JavaScript для их динамического позиционирования, но стараюсь этого избегать.

Вот плагин на очень простой странице:

http://thomporter.github.com/jquery-sliding-ajax-drilldown/demos/basic-plain.html

Вы также можете проверить Sass, который я использовал для создания CSS, если хотите, он находится в репозитории:

https://github.com/thomporter/jquery-sliding-ajax-drilldown/blob/master/src/lib/css/jquery.sliding-ajax-drilldown.scss


jquery css positioning
person Thom Porter    schedule 10.10.2012    source источник
comment
Точно не уверен, но может быть потому, что вы используете em в абсолютной позиции. em, по крайней мере, для текста, проходит через узлы dom.   -  person Jaijaz    schedule 10.10.2012

Ответы (4)


arrow_upward
2
arrow_downward

Ваша проблема здесь в том, что вы установили font-size на свои <a> теги, которые все установлены на display:block и содержат другие элементы, которые вам нужны.

Когда вы увеличиваете размер шрифта в em, ваши <a> элементы расширяются. Поскольку ваши изображения стрелок также вложены в ваши элементы <a> и абсолютно позиционированы, если размер окна контейнера изменится, положение стрелок изменится. Это произойдет независимо от типа единиц измерения, которые вы используете для размера, поля, заполнения и т. д.

Попробуйте поместить текст в свой собственный элемент. Разделите свой CSS на стили типографики и стили позиционирования, оберните текст для каждой строки в элементе span.

<li>
    <a href="#" data-id="BMW">
        <span>BMW</span>
        <span></span>
    </a>
</li>

Затем примените что-то вроде этого с вашими отдельными стилями шрифта, примененными к этому диапазону:

.ajaxdrilldown ul li a span:first-child {
    display:inline-block; /* IE7 will need a hack for this */
    position:relative;
    left:0.3em;
    font-size:1.4em;
    ...
}

Это позволит тексту свободно расширяться в пределах своего собственного элемента, не затрагивая расположение других элементов.

Вам также нужно будет изменить этот стиль в строке 98:

.ajaxdrilldown div ul li a span

что-то в этом роде

.ajaxdrilldown div ul li a span:last-child

чтобы остановить пролеты, загрязняющие разные стили друг друга

Кстати, вам не нужно устанавливать width:100% для элемента display:block;. Удалите объявление ширины полностью, так как оно не нужно и, вероятно, вызовет проблемы у других, занимающихся этим стилем.

person David Barker    schedule 10.10.2012
comment
Это, безусловно, лучший ответ, который я получил. К сожалению, это все еще оставляет проблему. Да, я могу масштабировать шрифты независимо от контейнера, но на самом деле контейнер тоже должен масштабироваться, иначе шрифт будет масштабироваться за пределы контейнера. После всех отзывов, которые я получил здесь, и дополнительных исследований я решил, что JavaScript — единственный способ надежно позиционировать изображение. Если кто-то считает иначе, пожалуйста, дайте мне знать! - person Thom Porter; 10.10.2012
comment
@thom мой последний комментарий о том, что не нужно устанавливать ширину элементов display:block без необходимости, относится к этому. Не устанавливайте ширину, позвольте div свободно расширяться в зависимости от его дочерних элементов, задайте ему минимальную ширину и максимальную ширину и вуаля, не требуется javascript. - person David Barker; 11.10.2012

arrow_upward
2
arrow_downward

Только что провел некоторое тестирование, и это потому, что вы используете em в абсолютной позиции. Например, если вы измените его на px и зафиксируете padding-left, который также основан на em, стрелки перестанут двигаться при изменении размера шрифта.

person Jaijaz    schedule 10.10.2012
comment
Очень хороший ответ. К сожалению, я не совсем понял свою проблему. Я хочу, чтобы чертовы вещи оставались посередине по вертикали при изменении высоты шрифта / строки (не столько адаптивным способом, сколько тем, что кто-то скачал плагин и перенастроил размер шрифта...) Я подумал что, используя ems, я мог бы обойти эту проблему, но нет, я этого не сделал. Мой выбор состоит в том, чтобы либо заставить их редактировать верхнее/левое, либо использовать JavaScript для их позиционирования, я думаю. Если кто-нибудь не знает, как правильно расположить их с помощью CSS? - person Thom Porter; 10.10.2012
comment
для меня это было: забыть добавить «px». - person yaya; 22.09.2019

arrow_upward
0
arrow_downward

Насколько я понимаю, я создал jsfiddle. Пожалуйста, посмотрите и позвольте мне это то, что вы ищете или что-то еще.

ДЕМО

http://jsfiddle.net/saorabhkr/Xbydb/

Обновлен jsfiddle с высотой строки. Я хотел бы предложить установить ту же высоту строки, что и высота содержимого. Пожалуйста, взгляните на новый jsfiddle.

http://jsfiddle.net/saorabhkr/Xbydb/2/

person Soarabh    schedule 10.10.2012
comment
Вы используете пиксели для всего, я пытаюсь использовать ems как можно больше для масштабирования... Я действительно начинаю думать, что мне нужно использовать JavaScript, потому что, в конце концов, значок, который мне нужно расположить, - это пиксели. знак равно - person Thom Porter; 10.10.2012
comment
Не имеет значения, вы можете использовать em вместо px. Тебе решать. - person Soarabh; 10.10.2012
comment
Если я использую em, то верхняя позиция должна быть скорректирована при изменении высоты строки. Установка высоты строки или размера шрифта позиционируемого элемента не помогает... Мне нужно, чтобы люди, использующие плагин, устанавливали размер шрифта и высоту строки в тексте и отображали стрелку вверх по вертикали по центру строки, на которой находится текст (без необходимости корректировки верхнего значения). - person Thom Porter; 10.10.2012

arrow_upward
0
arrow_downward

Для абсолютного положения с помощью CSS вы должны установить этот стиль для его

position:absolute;
left:0px;
z-index:10;

и вы должны установить этот стиль для его родителя

position:relative;

с уважением

person Saeed    schedule 10.10.2012
comment
Я это сделал. Вы хоть исходники смотрели? Или прочитать другие ответы? - person Thom Porter; 10.10.2012