Абсолютное позиционирование элемента относительно родителя

[Daiver]

Имеется некая таблица с величиной ячеек 60x60px. В каждой ячейке должна быть следующая структура:

<div class="numberandbuttons">
<div class="number">
</div>
<div class="lefrsqr">
</div>
<div class="rightsqr">
</div>
</div>

lefrsqr и rightsqr это квадраты размером 15x15px поставленные в нижние углы ячейки.

Необходимо поставить number вертикально и горизонтально по центру ячейкти, а lefrsqr и rightsqr в нижние углы ячейки таким образом, чтобы ни один элемент не выезжал за границы ячейки и при изменении размеров number скриптом, lefrsqr и rightsqr оставались приклееными к своим углам, а он оставался выровнянным по центру. То есть нужно позиционировать два угловых квадрата в нижние углы так, чтобы все остальные элементы отображались как будто их нет в ячейке.

Как это можно сделать?

Статью http://htmlbook.ru/css/position я читала, но так и не поняла как мне нужно поступать в моей ситуации.

Заранее спасибо за ответ.

[skatadov]

Высота .number изменяема, или фиксированная?

[spdif]

родителю: position: relative;

дочерним: position: absolute; и каждому своё место)

[Kray Storm]

Необходимо поставить number вертикально и горизонтально по центру ячейкти, а lefrsqr и rightsqr в нижние углы ячейки таким образом, чтобы ни один элемент не выезжал за границы ячейки и при изменении размеров number скриптом, lefrsqr и rightsqr оставались приклееными к своим углам, а он оставался выровнянным по центру.

Наличие элемента numberandbuttons не позволит выровнять number по вертикали и подстроиться под изменение размера ячейки. Иначе нужное положение можно задать и простым позиционированием. Поэтому, если он играет лишь роль общего контейнера, то нужно от него отказаться. А в остальном, вроде не так уж все и сложно.

Вот, при любых размерах ячеек и центрального элемента все будет на своих местах: http://jsfiddle.net/FrkhJ/

Можно так: http://jsfiddle.net/FrkhJ/1/

Или так: http://jsfiddle.net/FrkhJ/2/

Edited April 27, 2013 by Kray Storm

[spdif]

.numberandbuttons{
position:relative;
background:#fcc;
width:60px;
height:60px;
}
.number{
position:absolute;
background:#cfc;
left:5px;
top:20px;
width:50px;
height:20px;
}
.lefrsqr{
width:15px;
height:15px;
background:#0cc;
position:absolute;
left:0;
bottom:0;
}
.rightsqr{
width:15px;
height:15px;
background:#cc0;
position:absolute;
right:0;
bottom:0;
}

Edited April 27, 2013 by spdif

[Kray Storm]

...

А что будет со всеми теми

width:60px;

height:60px;

и

left:5px;

top:20px;

когда изменятся размеры ячейки и самого number?

Снова ровнять ручками?

Edited April 27, 2013 by Kray Storm

[spdif]

написано что:

при изменении размеров number скриптом

чуть подработать скрипт чтоб выдавал значения left, top соответственно)

про изменение размеров ячейки там ни чего не сказано...

[Daiver]

Высота .number изменяема, или фиксированная?

изменяема, но должна сидеть всегда по серединекак горизонтально так и вертикально.

...

А что будет со всеми теми

width:60px;

height:60px;

и

left:5px;

top:20px;

когда изменятся размеры ячейки и самого number?

Снова ровнять ручками?

размер ячейки 60 на 60 не изменный. размеры number меняются, но на размер ячейки не влияют.

number всегда будет меньше ячейки.

Необходимо поставить number вертикально и горизонтально по центру ячейкти, а lefrsqr и rightsqr в нижние углы ячейки таким образом, чтобы ни один элемент не выезжал за границы ячейки и при изменении размеров number скриптом, lefrsqr и rightsqr оставались приклееными к своим углам, а он оставался выровнянным по центру.

Наличие элемента numberandbuttons не позволит выровнять number по вертикали и подстроиться под изменение размера ячейки. Иначе нужное положение можно задать и простым позиционированием. Поэтому, если он играет лишь роль общего контейнера, то нужно от него отказаться. А в остальном, вроде не так уж все и сложно.

Вот, при любых размерах ячеек и центрального элемента все будет на своих местах: http://jsfiddle.net/FrkhJ/

Можно так: http://jsfiddle.net/FrkhJ/1/

Или так: http://jsfiddle.net/FrkhJ/2/

наличие numberandbuttons обязательно, так как в общей картине присутствует еще элемент, который при появлении скрывает все содержимое numberandbuttons.

размер ячейки неизменный.

меняется только размер number.

[Daiver]

В принципе number имеет всего два состояния

в первом font-size: 38px; и внутри только одна цифра или & nbsp;

во втором font-size: 10px; и внутри от 1 до 8 цифр

можно его выставить фиксированно и добавить еще один элемент который будет тоже фиксирован и потом их уже скриптом поочередно показывать через css свойство display

Что у меня не получалось, так это выставить все так, чтобы при изменении number (или при замене на элемент другого размера) маленькие квадратики не убегали из углов.

[Daiver]

Все получилось http://jsfiddle.net/57YRA/10/. Всем спасибо за помощь.

Особенная благодарность spdif