Позиция плавающего div поверх другого элемента

Question

У меня есть заголовок с логотипом, плавающим слева, и номер телефона, плавающий справа. Когда экран недостаточно широк для обоих, номер телефона прыгает под логотипом, чего я не хочу.

Так как большая часть изображения логотипа - это всего лишь градиент фона, я бы хотел поместить номер телефона поверх элемента логотипа, когда экран уже, чем 818 пикселей.

Как я могу это сделать?

Вот основной код:

<div id="head-wrap"> 
    <a class="home-link" href="http://example.com"> 
     <img src="logo.png" class="logo"> 
    </a> 
    <div class="tel"> 
     <a href="tel:555555555" class="phone"> 
      <p class="phone"> 
       <img src="phone-icon.png">555 555 555 
      </p> 
     </a> 
    </div> 
</div> 

.home-link { 
    float:left; 
} 
.tel { 
    float: right; 
} 
.logo { 
    width: 657px; 
} 

Answer 1

Прежде всего, вы можете решить часть вашей проблемы, поставив div.tel перед вашим логотипом. Таким образом, он будет отображаться поверх логотипа, если у вас недостаточно места. Затем вы можете использовать медиа-запрос, чтобы поместить номер телефона на левом, например, так:

@media screen and (max-width: 818px) { 
    .tel { 
    float: left; 
    } 
} 

Fiddle: https://jsfiddle.net/s2Lubqqp/1/

Answer 2

Поскольку вы должны перекрываться телефон на логотип Вы должны держать свою позицию абсолютной и то же позиция

также, так как вы установили ширину логотипа для ширины: 657px; Лучше сделать это авто при изменении размеров окна ... надеюсь, что это работает для вас

здесь запрос СМИ :)

@media screen and (max-width: 818px) { 
    .tel { 
    width:auto; 
    position:absolute; 
    left:5px; 
    top:5px; 

} 
.logo { 
    width: auto; 
    position:absolute; 
    left:5px; 
    top:5px; 
} 
} 

Answer 3

Вы могли бы попробовать что-то вроде этого:

.home-link { 
    float:left; 
} 
.tel { 
    float: right; 
} 
.logo { 
    width: 657px; 
} 

@media only screen and (max-width: 818px) { 
    .home-link { 
    width: 30%; 
    max-width: 300px; 
    } 
    .logo { 
    width: 100%; 
    } 
} 

Это вы можете изменить процентную ширину раздела домашней ссылки и заставить логотип соответствовать ему с «width: 100%;»

The fiddle is here