Как разместить элементы друг на друга

У меня есть <button> с тремя пролетами в нем - каждый пролет, содержащий другой текст. В разное время, вызванное Javascript, класс кнопки изменится. Используя переходы CSS & transform, у меня есть один диапазон, перемещающийся из кнопки, и еще один переход. Все работает.Как разместить элементы друг на друга

Проблема в том, что кнопка выросла до полной ширины диапазона 1 + span 2 + span 3. Я хочу, чтобы ширина была достаточно большой, чтобы содержать самую большую из пролетов. Если бы все промежутки могли быть размещены один поверх другого, это сработало бы.

Я не могу понять, как получить 3 пролета, чтобы сесть один поверх другого.

Вот скрипку показывает проблему: http://jsfiddle.net/V9yTs/ (Нажмите на кнопку, чтобы увидеть изменения)

Редактировать Вот окончательный, работая скрипку: http://jsfiddle.net/XW3DY/7/

источник

2014-01-18 Pickle

Раствор для наслоения свои пролеты на вершине каждого другим было бы использовать position: relative; (который, как я вижу, у вас уже есть), а затем изменить верхний край пролетов 2 и 3, чтобы они перемещались в ту же позицию, что и диапазон 1.

Вот обновленная версия вашего JSFiddle: http://jsfiddle.net/XW3DY/2/

(Обратите внимание, что плавающие элементы нельзя размещать друг над другом. Поэтому относительное позиционирование обычно используется для размещения элементов поверх друг друга.)

источник

2014-01-18 00:19:52 NathanW

Спасибо! Так оно и было. Я играл с позицией: относительный, но просто не мог заставить его работать. Я думаю, что маргинальная вершина сделала трюк. Мне кажется странным, что маржа была атрибутом, который заставлял все это работать. В любом случае, еще раз спасибо. – Pickle

Просто для вашего назидания - я оптимизировал CSS до 24 строк от 61: jsfiddle.net/XW3DY/7/ – Pickle

Поскольку вы уже используете JQuery, вы можете просто вычислить правильную ширину и высоту

var w = 0; 
$('.btn .msg').each(function() { 
    w = Math.max(w, $(this).width()); 
}); 

$('.btn').width(w); 

var h = 0; 
$('.btn .msg').each(function() { 
    h = Math.max(h, $(this).height()); 
}); 

$('.btn').height(h);

Но теперь .msg пролеты расположенных вертикально. Чтобы компенсировать это, зависит от того, что вам нужно. Одним из решений является использование position: absolute

.btn { 
    position: relative; 
} 
.btn-status .msg { 
    position: absolute; 
}

В .msg пролеты теперь лежит на верхней части друг друга. Вы также должны настроить вертикальное преобразование.

См. Модифицированный JSFiddle

источник

2014-01-18 01:48:18

Как разместить элементы друг на друга

ответ

Смежные вопросы