html - 将滚动框向下移动到文本框区域？

Question

我做了一个简单的布局，但我已经好几年没有编码了，我在定位和移动滚动框以与我在此图像上创建的文本框区域对齐时遇到问题。

这是我目前的编码。肯定遗漏了一些东西......

<center>
<div class="img">
    <div class="scroll">
      <a>
         text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here 
      </a>
    </div>
</div>
<style>
   .img{
  background-image: url(http://i65.tinypic.com/4janew.jpg);
  background-size: 100% 100%;
  width: 930px;
  height: 634px;
  text-align: center;
  overflow: hidden;
  padding: 7%;
}


.scroll{
  height: 50%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;
}

.scroll a{
position: relative;
bottom: -400px;
  font-size: 14px;
  color: #BBA894;
  font-family: Times New Roman;
}
</style></center>

Answer 1

好吧，我还是有点不清楚，但这是我所拥有的:

.img{
  background-image: url(http://i65.tinypic.com/4janew.jpg);
  background-size: 100% 100%;
  width: 930px;
  height: 634px;
  text-align: center;
  overflow: hidden;
  padding: 7%;
    position: relative;
}


.scroll{
    position: relative;
  height: 50%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;
}

.scroll a {
    position: absolute;
    left: 100px;
    right: 100px;
    bottom: 250px;
  font-size: 14px;
  color: #BBA894;
  font-family: Times New Roman;
}

由于图像包含框，您需要做的是将文本居中放置，就像我在以下位置所做的那样:

https://jsfiddle.net/L2saoou8/

如果你想让它滚动，那么只需在文本的包含框上添加一个高度，.scroll 然后溢出:auto。