为什么元素在缩小或放大时在视口上移动

编程问答 2022-06-04

问题描述

我正在处理登录页面布局。我是使用CSS进行布局的新手。 发生的事情是，当我放大浏览器的视口时，它会在屏幕上移动div。 我希望我的div必须固定在一个固定的位置。但是我尝试了很多事情，但是还是会发生。我想解决此问题。请解决我的问题。

以下是我编写的代码：-

HTML：- 

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="project-css.css">
</head>
<body>
  <div id="back"></div>  
</body>
</html>

CSS：-

/* css applied below is for all elements */
*{
    margin: 0;
    padding: 0;
}

/* Main style of login page */

/* background-image styles */
body{
    background-image: url("background_image1.jpg");
    background-repeat:no-repeat;
    background-size: cover;
}

/* styles for back of login template */
#back{
    width: 32vw;
    height: 83vh;
    background-color: rgba(119,179,0.3);
    display: block;
    position: absolute;
    left: 456px;
    top: 58px;
    Box-shadow: 5px 5px 9px 4px rgb(153,255);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）