Html 为什么浏览器放大或缩小时元素的位置会发生变化？

我在CSS布局中遇到了一个问题，当浏览器被缩放时，所有元素的位置都被改变了，我如何避免这个问题？ 我希望所有元素都以相同的比例缩放并保持在它们的位置，或者控制角色中的元素

这是我的css：

html
{
    border: groove 8px red;
    margin: 20px;
    position: relative;
}

.header
{
    width: 100%;
    height: 15%;
    text-align: center;
}

.container
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height:75%;
    color: white;
}

.container .input
{
    width: 49%;
    height: 100%;
    background: #000099;
    float: left;
}

.container .break
{
    width: 2%;
    height: 100%;
    background: #b8b8b8;
    float: left;
}

.container .output
{
    width: 49%;
    height: 100%;
    background: #b80000;
    float: right;
    font-size: 18pt;
    font-weight: bold;
}

.container > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    padding: 10px;
}

.input h3, .output h3
{
    color: white;
}

.input textarea
{
    padding: 15px;
    width: 100%;
    height: auto;
    min-height: 70%;
    font-size: 18pt;
    font-weight: bold;
    transform: none;
}

.input input[type="submit"], .input input[type="reset"]  
{
    float: right;
    margin-top: 15px;
    padding: 5px;
    font-size: 12pt;
    font-weight: bold;
    -webkit-border-radius: 8px;
}

.input input[type="submit"]:active, .input input[type="reset"]:active
{
    background: #858585;
    color: #fffccc;
}

---

如果没有HTML，CSS就没有多大用处。你能链接到一个页面或制作一个JSFIDLE来演示你描述的问题吗？放大后你刷新了吗？我曾经遇到过类似的问题。对我来说，在div之间留出更多的自由空间是有效的。例如，两个div的宽度为49%，最后一个div的宽度为2%。这将使总数达到100%，这将是合乎逻辑的，但由于某些原因，这可能是一个问题，当缩放。。。我会试着把2%的div去掉middle@SureshPonnukalai是的，我did@user3194430：很酷，也许有一枚奖章是为了留下无用的建议