Как я могу присвоить Div определенную позицию?

Derman спросил: 26 декабря 2017 в 07:56 в: javascript

У меня есть функция Button Onclick, которая создает окно при нажатии.

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

Вот мой полный код.


function footafel(id){  
  for(var i=1; i<=13; i++){
    document.getElementById('tafel'+i).className = 'hide';
  }
  if(id == ''){
    return false;
  } else {
    document.getElementById('tafel'+id).className = 'show';
  }
}

div {
  width: 50%;
  height: 50px;
  border: solid 1px black;
}

button {
  background-color: white;
  border: solid 2px lightblue;
  width: 150px;
  height: 60px;
  margin: 10px;
  text-align: center;
  line-height: 56px;  
}

#tablerechts {
  position: relative;
  bottom: 40px;
}

table {
  margin-left: 25px;
  width: 300px;
}

.hide { display: none; }
.show { display: block; }
<table>
  <tr>
    <td id="tablelinks">
      <div id="tafel1" class="hide">Tafel 1</div>
      <div id="tafel2" class="hide">Tafel 2</div>
      <div id="tafel3" class="hide">Tafel 3</div>
      <div id="tafel4" class="hide">Tafel 4</div>
      <div id="tafel5" class="hide">Tafel 5</div>
      <div id="tafel6" class="hide">Tafel 6</div>
      <div id="tafel7" class="hide">Tafel 7</div>
      <button onclick="footafel('1')">Tafel oefening 1</button>
      <button onclick="footafel('2')">Tafel oefening 2</button>
      <button onclick="footafel('3')">Tafel oefening 3</button>
      <button onclick="footafel('4')">Tafel oefening 4</button>
      <button onclick="footafel('5')">Tafel oefening 5</button>
      <button onclick="footafel('6')">Tafel oefening 6</button>
      <button onclick="footafel('7')">Tafel oefening 7</button>
    </td>

    <td id="tablerechts">
      <div id="tafel8" class="hide">Tafel 8</div>
      <div id="tafel9" class="hide">Tafel 9</div>
      <div id="tafel10" class="hide">Tafel 10</div>
      <div id="tafel11" class="hide">Tafel 11</div>
      <div id="tafel12" class="hide">Tafel 12</div>
      <div id="tafel13" class="hide">Tafel 13</div>
      <button onclick="footafel('8')">Tafel oefening 8</button>
      <button onclick="footafel('9')">Tafel oefening 9</button>
      <button onclick="footafel('10')">Tafel oefening 10</button>
      <button onclick="footafel('11')">Tafel oefening 11</button>
      <button onclick="footafel('12')">Tafel oefening 12</button>
      <button onclick="footafel('13')">Tafel oefening 13</button>
    </td>
</table>

Спасибо заранее.

0 ответов