准确定位悬停在画布元素上的文本字段答案

【问题标题】：Accurately position text fields hovering over canvas elements准确定位悬停在画布元素上的文本字段
【发布时间】：2019-03-24 14:54:52
【问题描述】：

我有 2 个并排的画布（还有几个“隐藏”的画布）（我希望并排保持这种状态）。当用户缩小浏览器窗口时，我试图找到一种方法让它们保持居中而不是换行。但是有一个问题：我还想通过文本字段和下拉菜单选择来收集用户信息。文本字段和菜单选择需要看起来像是画布环境的一部分。我希望它们精确地悬停在……精确地……在画布上，看起来它们是画布艺术的一部分。但事实证明，保持画布居中并对文本字段和菜单应用相对和绝对位置是很棘手的。我已经尝试了一个“父”DIV，并使其他 DIV 与父级绝对定位......但我得到了意想不到的结果。如果它有助于使定位更容易，我可以让画布向左对齐。见代码。

#centerAll {
    margin-left:auto;
    margin-right:auto;
    width:1300px;
}
div.theParent {
    position: relative;
} 
div.absolute1 {
    position: absolute;
    top: 70px;
    left: 0;
    width: 90px;
    height: 20px;
}
div.absolute2 {
    position: absolute;
    top: 120px;
    left: 0;
    width: 90px;
    height: 20px;
}
div.absolute3 {
    position: absolute;
    top: 120px;
    left: 200;
    width: 90px;
    height: 20px;
}
body{ 
    background-repeat: no-repeat; 
    background-position: left;
}

<script type="text/javascript" src="javascriptFile.js"></script>

<div class="parent">
    <div class="absolute1">
        <input type="text" id="letteringText" value="one line of text">
    </div>
    
    <div class="absolute2">
        <select id="select something">
            <option value="option 1">option1</option>
            <option value="option 2">option2</option>
            <option value="option 3">option3</option>
        </select>
    </div>

    <div class="absolute3">
        <select id="select some more">
            <option value="option 1">option1</option>
            <option value="option 2">option2</option>
            <option value="option 3">option3</option>
        </select>
    </div>
</div>

<div id="centerAll">
    <canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
    <canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
    <canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas>
    <canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas>
</div>

【问题讨论】：

选择器 div.theParent 与 HTML 部分中使用的 parent 类不匹配。

标签： javascript html css html5-canvas textfield

【解决方案1】：

您的父 div 与画布容器 (#centerAll) 的宽度不匹配。我将父 div 设为绝对值，并使宽度等于画布容器。然后浮动绝对 div 并使用text-align 属性根据画布元素将输入元素居中居左或居右。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#centerAll {
    margin-left:auto;
    margin-right:auto;
    width:1300px;
    text-align: center;
}
div.parent {
  position: absolute;
  width:1300px;
} 
div.parent:after {
content: '';
display:block;
clear:both;
}
div.absolute1, div.absolute2, div.absolute3 {
  width: 50%;
  float: left;
  box-sizing: border-box;
  text-align: right;
  padding-top: 20px;
  padding: 20px;
}
div.absolute2 {
  text-align: left;
}
div.absolute3 {
  text-align: right;
  padding-left: 50px;
}
body{ background-repeat: no-repeat; background-position: left;}
</style>
</head>
<body>
<div class="parent">

<div class="absolute1">
<input type="text" id="letteringText" value="one line of text">
</div>
<div class="absolute2">
<select id="select something">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</option>
</select>
</div>
<div class="absolute3">
<select id="select some more">
<option value="option 1">option1</option>
<option value="option 2">option2</option>
<option value="option 3">option3</option>
</select>
</div>
</div>

<div id="centerAll">
<canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas>
<canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas>
<canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas>

<script type="text/javascript" src="javascriptFile.js"></script>
</div>

</body>
</html>

【讨论】：

@bobcodenewbie 据我了解，我刚刚提出了这个解决方案，如果我遗漏了什么，请告诉我..
我缺少此页面的其他一些要求，这会改变布局，但您的示例代码教会了我更多。谢谢