css - How to position half of image out of the div responsive -


i position icons red square is. have tried position: relative , position absolute dont understand why not working.

enter image description here

   <div class="col-xs-12 col-sm-4">             <div class="wrap">                 <img class="blockico" src="<?php bloginfo('template_url'); ?>/img/icons/catering150.png">                 <h4>catering</h4>                 <a href="url">the menu</a>                 <br>                 <a href="url">today's menu</a>                 <br>                 <a href="url">gallery</a>                 <br>                 <a href="url">festivities</a>                 <br>             </div>         </div>      .wrap { position:relative; width: 100%; height: 100%; background-color: #e9e9e9;}      .blockico { position:absolute; top:-50%;} 

not sure why isn't working you; plugged fiddle , (while doesn't behave way think you'd want) seems move image fine. here's fiddle of different approach (not using position attributes; applying negative top margin) might closer.

https://jsfiddle.net/35aohm3y/

.wrap {   margin-top:50px; /* push wrap down bit. might not need */   width: 100%;   height: 100%;   background-color: #e9e9e9;}  .blockico {   background:#666; /* added demonstration purposes */   margin-top:-50px; /* , push image bit */ } 

Comments

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

c# - Update a combobox from a presenter (MVP) -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -