Позиционирование холста с помощью jQuery

Question

Я создаю приложение для рисования с холстом HTML5, но возникают проблемы с позиционированием.

У меня есть div, в который я динамически помещаю холст.У div есть верхний div и нижний div, и я хочу разместить холст посередине.Как сейчас, холст перекрывает верхний элемент div, и поэтому я хочу переместить его вниз.Я попытался стилизовать холст (позиция: абсолют, верх: 40), но ничего не происходит.Как мне это сделать?

$('<canvas/>', {
  'id': 'paint',
}).appendTo('#box');

var theCanvas = document.getElementById('paint');
theCanvas.width  = 420;
theCanvas.height = 300;

Div выглядит следующим образом:

-----------------
     top div       
-----------------


    canvas


-----------------
    bottom div
-----------------

Стиль для div:

#box {
  position: absolute;
  left:50px;
  top: 60px;  
  margin-left: auto;
  margin-right: auto;
}

.topDiv {
  position: absolute;
  top: 0;
  height: 60px;
  overflow: hidden;
}

.bottomDiv {
  position: absolute;
  bottom: 0px;
}

Верхний и нижний divнаходится внутри # коробки.

Answer 1

Я сделал пару предположений относительно того, что именно вы пытаетесь достичь.Исходя из того, что, я думаю, вы хотите сделать, и я предполагаю, что у меня есть поле, содержащее два элемента div, и холст (и, возможно, он может быть где угодно на экране), я смоделировал html как:

<div id="box">
    <div class="topDiv">
        this is the top div
    </div>
    <div class="bottomDiv">
        this is the bottom div
    </div>
</div>

И я бы предложил изменить ваш javascript, чтобы вы вставляли свой холст перед bottomDiv.

$('<canvas/>', {
    'id': 'paint',
}).insertBefore('#box .bottomDiv');

И изменяли стиль вашего класса в bottomDiv и topDiv, чтобы они были position: relative.Это должно выполнить то, что вы ищете.В основном #box управляет положением группы, а верхний и нижний div остаются фиксированными в этой группе элементов управления.

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

Answer 2

Что не так с:

<style>
#top{Height:40px; }
#bottom{Height:40px;}

</style>

<script>
  var theCanvas = document.getElementById('paint');
  theCanvas.width  = 420;
  theCanvas.height = 300;
</script>

<div id='top'></div>
<div id='paint'></div>
<div id='bottom'><//div>

Answer 3

Если вы не используете стиль div: s или canvas: es, чтобы иметь абсолютное позиционирование или отрицательные поля (или что-то подобное), этот HTML с CSS по умолчанию (div {display: block;}) будет делать то, что вам нужно:

<div>Top</div>
<canvas></canvas>
<div>Bottom</div>

Поскольку это, кажется, не работает для вас, должен быть другой код, который делает их перекрывающимися.

Вот пример: http://jsfiddle.net/xRfPq/

Answer 4

Возможно, вам просто потребуется применить свойство CSS position: relative к #box, но без подробностей трудно быть уверенным.