Question

这是我的第一个网站，我正在使用 Raspberry Pi使其用于家庭自动化。

我将超链接图像并将其用作激活python脚本的按钮。

问题是我正在尝试创建类似于面板的东西，我添加了钢质纹理并将其居中。我现在正在尝试将图像放在其上以用作按钮；但是，当调整浏览器大小时，我的图像会上下移动。

我正在尝试进行响应式设计，以便也可以在手机上使用它。

代码（它们是 HTML 和 CSS 的两个独立文件，但我只是将它们放在一起了）：< / p>

@charset "UTF-8";
/* Body */
body {
  font-family: source-sans-pro;
  background-color: #f2f2f2;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  font-style: normal;
  font-weight: 200;
}
.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 1000px;
  background-color: #FFFFFF;
}
header {
  width: 100%;
  height: 6%;
  background-color: #E0115F;
  border-bottom: 1px solid #2C9AB7;
}
.logo {
  color: #fff;
  font-weight: bold;
  text-align: undefined;
  width: 45%;
  float: left;
  margin-top: 15px;
  margin-left: 25px;
  letter-spacing: 4px;
  overflow: hidden;
}
.hero_header {
  color: #FFFFFF;
  text-align: center;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  letter-spacing: 4px;
  font-size: 50px;
}
.controls {
  padding-top: 5px;
}
.pi_logo_top{
  position: relative;
  float: right;
  right: 15px;
  top: 5px;
  height: 80%;
  min-width: 5%;
  max-width: none;
}
.controls {
  background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca         99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
}
.lights_off {
  position: relative;
  max-width: 8%;
  min-width: none;
  overflow: hidden;
  right: -10px;
  top: -200px;
}
#rcorners {
  border-radius: 45px;
  background-position: left top;
  background-repeat: repeat;
  padding: 5px; 
  padding-right: 0px;
  padding-left: 0px;
  width: 90%;
  position: relative;
}

<!doctype html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Raspberry Pi Home Automation</title>
	<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
	<script>var __adobewebfontsappname__="dreamweaver"</script>
	<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
	</head>
	<body>
	 <div class="container"> 
	  <header> <a href="">
	    <h4 class="logo">Home Automation</h4>
	    <img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt = "Raspberry Pi Logo" class = "pi_logo_top">
	  </a>
	  </header>
	    <div class="controls">
	        <center><img src = "https://image.freepik.com/free-photo/dirty-metal-texture_1048-4784.jpg" id = "rcorners"  alt=""></center>
	    </div>
	    <div>
	        <img src="images/Light_off.png" class="lights_off" alt="light off"> 
	    </div>
	</div>
	</body>
	</html>

我们正在专门查看.lights_off { position: relative; max-width: 8%; min-width: none; overflow: hidden; right: -10px; top: -200px; }，它在调整浏览器大小时会上下移动。

我想将其放置在某处并停留。

Answer 1

调整浏览器大小时，div的高度会改变，因此top：-200px不能正常工作。您应该将图片放在上面的div内，并给其绝对位置，然后将百分比而不是px放置。

 <style>
 .lights_off {
  position:absolute;
  max-width: 8%;
  min-width: none;
  bottom:20%;
  z-index:99
  right: -10px;

}
 </style>
      <div class="controls">
            <center><img src = "https://image.freepik.com/free-photo/dirty-metal-texture_1048-4784.jpg" id = "rcorners"  alt=""></center>


            <img src="images/Light_off.png" class="lights_off" alt="light off"> 
        </div>

Answer 2

您只需要创建一个容器即可包装图像并使用flex定位图像。但是图像必须在标签.controls内，然后您可以按绝对方式定位包装器：

HTML：

<div class='image_container'>
    <img src="//your image" class="lights_off" alt="light off"> 
</div>

CSS：

.controls{
position: relative;
}
.lights_off {
  max-width: 8%;
  min-width: none;
  overflow: hidden;
}
.image_container{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
}

在此处检查演示代码：https://codepen.io/tien-bui/pen/EGweXJ

CSS：图像随着窗口大小的上下移动

2 个答案: