Наложени при position: absolute

[jdk]

Добрый день.

Подскажите пожалуйста со следующим моментом: нужно, что бы надпись была чуть выше картинки  . Картинка в одном <div>, Текст во втором. Я для div'а с текстом задаю

  position: absolute;  left:60%;  top: -20px;

В полноэкранном режиме все нормально, но если начинаю ресайзить текст наплывает на картинку Как можно это побороть?

[Switch74]

какие размеры у общего блока? картинка и текст ни как не группируются?

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

При масштабировании абсолютно позиционированные элементы съезжают.

Делайте выводы дальше сами.

[jdk]

Использую bootstrap, div с картинкой и div с текстом лежат в <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">. На счёт ресайза не очень понял. Я имею в виду, что когда браузер развёрнут на весь экран все норм, а когда нет начинает наезжать текст.

[Switch74]

<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> имеет position:relative; и какой у него width?

дали бы весь код этого блока не пришлось бы гадать

[jdk]

Поправьте пожалуйста, если не прав, но мне казалось bootstrap задаёт ширину в зависимости от ширины экрана? Код следующий:

<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">      <div class="search">           <form name="search" action="<?php echo home_url( '/' ) ?>" method="get" >	         <input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder=" <?php echo __('поиск', 'whitesquare'); ?>" class="search_field">		 <button type="submit" class="search_button" ><?php echo __('', 'whitesquare'); ?></button>	    </form>	</div>	<div class="main_phone" >	     <div class="iPhone">		<img src="<?= get_template_directory_uri(); ?>/images/iphone.png" alt=""/>	      </div>		<div class="write_us">                    <p>		 	<a href="#">Написать нам</a>		    </p>                    <span class="numbers_phone">(423) 2615-123</span> <br />		</div>	</div><!--/main_phone--></div>

Edited December 1, 2014 by jdk

[Switch74]

а классики можно?

[jdk]

Вот:

Это для формы поиска, она левее картинки с телефоном.search {  position: relative;  float: left;  margin-top: 20px;  max-width: 600px; /* Ширина поля с кнопкой */  border: 1px solid #000; /* Параметры рамки */  min-height: 20px; /* Минимальная высота */  background-color: white;  border-radius: 3px;  border-color: #8c8c8c;  margin-bottom: 10px;  margin-right: 20px;}.search_field {  border: none; /* Убираем рамку */  outline: none; /* Убираем свечение в Chrome и Safari */  -webkit-appearance: none; /* Убираем рамку в Chrome и Safari */  width: 800px;  max-width: 95%;  vertical-align: middle; /* Выравнивание по середине */}.search_button {  width: 20px; /* Ширина кнопки */  height: 20px; /* Высота кнопки */  border: none; /* Убираем рамку */  float: right;  vertical-align: top;  background: url("../images/search.png") no-repeat 50% 50%; /* Параметры фона */}В main_phone ничего не прописал.iPhone {  float: left;}.write_us {  position: absolute;  left:60%;  top: -20px;}

[Switch74]

вот и получается как я и говорил:

текст у вас позиционируется относительно body, установите хотя бы для .main_phone position

дальше не помешало бы ограничить размер блока до размеров при которых у вас текст не будет наезжать на картинку, да и тексту не помешало бы запретить перенос, а то цифры номера телефона получаются в несколько строк

 

а вообще проще было сделать следующим способом:

main_phone сделать background с вашим iPhone и отступ слева до текста, чтобы он не налазил на телефон никогда ну и зарезервировать место для этого текста, но учтите, что некоторые люди могут увеличить у себя размер шрифта, что приведет к увеличению занимаемого места текстом

можно увеличивать размер всего блока с запретом переноса строк или переносить строки, но это может не помочь

[jdk]

Спасибо. Более менее разобрался