Абсолютное позиционирование работает относительно последнего контейнера, для которого явно определен атрибут position.В этом случае triangle div имеет position:relative, поэтому поля ввода будут абсолютно позиционированы относительно этого.
С учетом этого важно отметить, что при изменении размера страницы размервашего triangle div также меняется, поэтому меняется и абсолютное позиционирование.Чтобы это исправить, вы должны дать контейнеру triangle фиксированный размер (или, по крайней мере, предсказуемый).Приведение его в соответствие с размером вашего холста кажется хорошим выбором.
Придание ему фиксированного размера, к сожалению, приводит к тому, что способ центрирования по горизонтали нарушается, но это можно исправить с помощью margin : auto.
Наконец, вы должны повторить ваши top, left, bottom, right проценты.Имейте в виду, что вы также можете использовать пиксели.Я не знаю точно, где вы хотите расположить элементы, но, возможно, следующий код поможет вам:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 250);
ctx.moveTo(0, 0);
ctx.lineTo(0, 250);
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.stroke();
.triangle {
position: relative;
text-align: center;
width : 500px;
height : 250px;
margin : auto;
}
#a {
position: absolute;
top: 50%;
left: 0px;
width: 3%;
}
#b {
position: absolute;
bottom: 0px;
right: 50%;
width: 3%
}
#hypo {
position: absolute;
top: 45%;
left: 40%;
width: 100px;
}
<body align="center">
<h2> Triangle rectangle </h2>
<div class="triangle">
<form autocomplete="off">
<input type="text" name="a" id="a" placeholder='a'>
<input type="text" name="b" id="b" autofocus='on' placeholder='b'>
<input type="text" name="hypo" id="hypo" placeholder='Hypothénuse'>
</form>
<canvas id="myCanvas" width="500" height="250">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</body>