Question

我的情况如下：

.cover-image {
background : no-repeat url('https://thumb9.shutterstock.com/display_pic_with_logo/536575/164027042/stock-photo-simple-and-stylish-office-environment-164027042.jpg') center center / cover; 
  height : 100vh;
  width : 100vw;
  position : absolute;
  z-index : 1;
  left : 0;
}
body{margin : 0; padding : 0; }
.data{
position:absolute;
 position: absolute;
    z-index: 10;
    height: 30px;
    width: 40px;
    top: 61vh;
    left: 11vw;
    background: red;  
}
.container {
position : absolute; height : 100vh; width : 100vw; 
}

<div class="container">
<div class='cover-image'></div>
<div class='data'>chair</div>
</div>

此处数据框应始终位于主席的左上角，如果我们调整窗口大小。

我们如何实现这一目标？

Answer 1

有更好的方法可以实现这一目标，但是使用现有代码并使其工作，以下似乎是您的方案的解决方案。请注意，您必须使用正确的大小调整，这只是想法。（你可以在这里看到DEMO。）

<强> HTML

<div class="container">
   <div class="cover-image">
   </div>

   <div class="data">Chair</div>
</div>

<强> CSS

body{
   margin: 0 auto;
}
.container{
   width: 1000px;
}

.cover-image { 
   background : no-repeat url('https://thumb9.shutterstock.com/display_pic_with_logo/536575/164027042/stock-photo-simple-and-stylish-office-environment-164027042.jpg') center center / cover;  
   float: left;
   height: 942px;
   width: 1920px;  
}

.data { 
   margin-right: 20%;
   background-color: red;
   float: right;
   height: 30px;
   width: 40px;
   margin-top:580px;
   margin-left: 170px;
   position: absolute;
}

相对于特定图像点的元素是背景大小：封面

1 个答案: