响应地移动div内的文本

Question

我的问题很简单，但我已经挣扎了很长时间。

https://jsfiddle.net/txzk0ffm/

body {
  width:100%;
}
h1{
  margin:0;
}
.box-wrap {
  width:70%;
  background:red;
  height:350px;
}
.text-wrap {
  width:35%;
  position:relative;
  top:25%;
  background:rgba(0,0,0,.5);
}

<div class="box-wrap"style="background:red url(http://www.saadiyat.ae/Admin/Content/banner-img-3.jpg) 50% 50% no-repeat;">
  <div class="img-wrap" >
    <div class="text-wrap">
      <h1>
        Random text
      </h1>
    </div>
  </div>
</div>

如何使用

之类的内容使用％移动文本框

top:50%;
bottom:30%;
etc.

我试图使用位置相对，但似乎没有发生任何事情

Answer 1

父级高度为auto，因此您无法使用百分比作为其中的垂直网格。

您需要添加

.img-wrap {
  height: 100%;
}

解决问题：

＆＃13;

＆＃13;

h1{
  margin:0;
}
.box-wrap {
  width:70%;
  background:red;
  height:350px;
}
.text-wrap {
  width:35%;
  position:relative;
  top:25%;
  background:rgba(0,0,0,.5);
}

.img-wrap {
  height: 100%;
}

＆＃13;

<div class="box-wrap"style="background:red url(http://www.saadiyat.ae/Admin/Content/banner-img-3.jpg) 50% 50% no-repeat;">
  <div class="img-wrap" >
    <div class="text-wrap">
      <h1>
        Random text
      </h1>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为父级指定已修复 height，它可以正常运行：

.text-wrap {
  height: 350px;
}

.text-wrap h1{
  width:35%;
  position:relative;
  top:25%;
  background:rgba(0,0,0,.5);
}

See this fiddle

Answer 3

如果这是你的意思，那么你必须提供.box-wrap{ position: relative;}和.text-wrap{ position: absolute;}

body {
  width:100%;
}
h1{
  margin:0;
}
.box-wrap {
  width:70%;
  background:red;
  height:350px;
  position:relative;
}
.text-wrap {
  width:35%;
  position:absolute;
  top:25%;
  background:rgba(0,0,0,.5);
}

<div class="box-wrap"style="background:red url(http://www.saadiyat.ae/Admin/Content/banner-img-3.jpg) 50% 50% no-repeat;">
  <div class="img-wrap" >
    <div class="text-wrap">
          <h1>
            Random text
          </h1>
    </div>
  </div>
</div>

Answer 4

你可以通过以下方式更改你的文本换行课程的css： -

.text-wrap {
    position: relative;
    top: 25%;
    display: inline-block;
    background: rgba(0,0,0,.5);
}

它可能对你有帮助。

Answer 5

您的文字换行具有相对于img-wrap的位置，text-wrap本身与img-wrap的高度完全相同。

最简单的解决方案是给box-wrap .img-wrap { height: 100%; } 的高度：

{{1}}