Question

基本上，我想将按钮定位在图像内部，并在切换到移动模式或更改窗口大小时使其保持在其位置。

这就是我想要的样子：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

.img-wrapper {
  position: relative;
}

.img-responsive {
  max-width: 100%;
  height: auto;
  margin-top: 180px;
  margin-left: 360px;
}

a.btn {
  display: inline-block;
  padding: 0.2em 1.45em;
  margin: 0.1em;
  border: 0.15em solid #CCCCCC;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  font-weight: 400;
  color: #000000;
  background-color: #ffc966;
  text-align: center;
  position: relative;
}

a.btn:hover {
  border-color: #7a7a7a;
}

a.btn:active {
  background-color: #999999;
}

@media all and (max-width:30em) {
  a.btn {
    display: block;
    margin: 0.2em auto;
  }
}

Answer 1

（我过早发布了..偶然按下了发布按钮）...您没有用于img或H1的CSS。我添加了一些，我还在主CSS和响应式中都添加了图像的最大宽度（媒体）CSS。该代码可以进行一些调整，但是我建议您先看看一下，然后将其适应您的需求。更接近您想要的想法！

编辑：我建议您再添加一些媒体查询以适应不同的屏幕分辨率，因为在不同尺寸的设备上绝对定位可能会有些噩梦。 Screenfly是测试代码在多种尺寸下的外观的良好工具。使用以像素为单位测量的大底边距（例如360px）可能会导致按钮甚至无法在屏幕上显示，因此在测量高度时，请尝试使用垂直高度（vh）或百分比。 [calc函数]也非常有用2。居中有用的css是margin : 0 auto或text-align:center;

祝您好运，希望对您有帮助

h1 {
  text-align: center;
  font-weight: bold;
  font-size: 1.8em;
}

img {
  max-width: 70%;
  max-height: 80%;
  margin: 10px 12%;
}

img-wrapper {
  display: inline-block;
  position: relative;
}

nav {
  margin: 0 auto;
}

nav ul {
  list-style-type: none;
  background-color: lightgrey;
  width:100%;
  
}

nav ul li {
  min-width:18%;
  display: inline-block;
  text-align: center;
  padding: 10px;
  margin:0 auto;
}

ul li a {
  padding: 10px 15px;
  text-decoration: none;
}


/*.img-responsive {
  /* margin-top: 100px;
  margin-left: 360px;
}*/

a.btn {
  display: inline-block;
  padding: 0.2em 1.45em;
  margin: 0.1em;
  border: 0.15em solid #CCCCCC;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  font-weight: 400;
  color: #000000;
  background-color: #ffc966;
  text-align: center;
  position: relative;
}

a.btn:hover {
  border-color: #7a7a7a;
}

a.btn:active {
  background-color: #999999;
}

@media all and (max-width:30em) {
  img {
    max-width: 400px;
  }
  a.btn {
    display: block;
    margin: 0.2em auto;
  }
}

<h1>De zakelijke VR/AR hardware leverancier van Benelux</h1>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="img-wrapper">
  <img class="img-responsive" src="https://gilsig.ca/wp-content/uploads/2015/10/12391435_192385974441516_971157875868647436_n.jpg-North-Shore-Mountains-Dec-2015.jpg">
</div>

<a href="#" class="btn">Meer Info</a>

Answer 2

按钮相对于其第一个父元素的位置应为绝对。

a.btn 
{
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-wrapper {
  position: relative;
}

a.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.2em 1.45em;
  margin: 0.1em;
  border: 0.15em solid #CCCCCC;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  font-weight: 400;
  color: #000000;
  background-color: #ffc966;
  text-align: center;
}

a.btn:hover {
  border-color: #7a7a7a;
}

a.btn:active {
  background-color: #999999;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/css/img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
</div>
<a href="#" class="btn">Meer Info</a>

我无法将按钮放置在图片中

2 个答案: