部門内の反応的なテキストの移動

Question

私の質問は非常にシンプルですが、かなり長い間苦労しています。

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

のようなものを使用して％を使用したテキストにボックスを移動する方法

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>

私は、相対位置を使用しようとしましたが、何も思いません起こること

Answer 1

親の高さがautoである、あなたはそれの内側に垂直mesurmentとしてパーセンテージを使用することはできませんので。

あなたが問題を解決するために

.img-wrap { 
    height: 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); 
 
} 
 

 
.img-wrap { 
 
    height: 100%; 
 
}

<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 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

あなたのテキストラップ自体がtext-wrapとまったく同じ高さを持っているimg-wrapに対するその位置を、持っています。

最も簡単な解決策はimg-wrapにbox-wrapの高さを与えることです：

.img-wrap { 
    height: 100%; 
}