[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Непонятная ситуация со слоями
Владимир55
Пытаюсь одну из ячеек таблицы организовать таким образом, чтобы по середине было число, и в этой же ячейке был сдвинутый влево цветной блок заданной ширины.

Насколько я понимаю, для этого нужно использовать слои. В итоге получаем такой код:
		<td style="text-align:center; margin:5px;">
<div
style="background-color:#F96; width:10%; z-index: 1; position:absolute;"> </div>
<div
style="text-align:center; z-index: 2; position:absolute;">75</div>
</td>


Но почему-то число не центрируется и вся эта конструкция проваливается вниз (скриншот).

Инспектором кода ничего выяснить не удалось.

В чем тут может быть дело и как исправить?
AllesKlar
<div style="text-align:center; width: 100%;">75</div>

_____________
[продано копирайтерам]
Владимир55
Если сделать с Вашей корректировкой
			<td style="text-align:center; margin:5px;">
<div
style="background-color:#F96; width:10%; z-index: 1; position:absolute;"> </div>
<div
style="text-align:center; width: 100%;">75</div>
</td>

то, на первый взгляд, все получается хорошо

user posted image


Но если длину цветной области увеличить, то число исчезает
user posted image

Причем, я сделал всего лишь 30%
<div style="background-color:#F96; width:30%; z-index: 1; position:absolute;"> </div>

а реальная ширина намного больше половины!

Что то здесь существенно не так...
Kusss
дык, нужно указывать относительно какого элемента работает абсолютное позиционирование.
z-index определяет какой слой будет выше.
https://jsfiddle.net/cevevgwy/
Владимир55
Большое спасибо!

Я с этим позиционированием все время мучаюсь!
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.