Html Абсолютное позиционирование

Question

У меня есть div, положение которого равно абсолютному. Также у меня есть пара абзацев внутри него. Когда я перемещаю правую сторону проводника влево, абзацы перемещаются вместе с ним и пытаются настроить размер окна. Я попытался позиционировать их абсолютно, но они все еще двигаются. Как я могу установить этот div или абзацы внутри него, чтобы они оставались на одном месте? Пожалуйста ... Вот код:

HTML:

<div id="search_slogan" > <!-- search_slogan Slogan--> 
    <p style="font-size: 26px; "> Free Business Name Search </p> 
    <p style="font-family:gothic; "> Enter any potential business name. 
     We'll let you know if the company name is available for use in your state, </p> 
    <p style="font-family:gothic; "> usually within 1 business day. </p> 
</div> <!-- END search_slogan Slogan--> 

CSS:

#search_slogan{ 
    line-height: 15%; 
    position: absolute; 
    top: 150px; 
    left: 200px; 
    font-family:basic_gothic; 
    font-size: 18px; 
} 

Answer 1

Ваша проблема может быть, что ваш ящик не имеет установленной ширины, поэтому он заполняет пространство оставшееся.

Добавьте ширину сетки, как показано ниже, и она больше не будет перемещаться.

#search_slogan{ 
    line-height: 15%; 
    position: absolute; 
    top: 150px; 
    left: 200px; 
    width: 400px; 
    font-family:basic_gothic; 
    font-size: 18px; 
} 

Есть дополнительные решения с такими вещами, как скрытие переполнения, но установка ширины является самой простой.

Answer 2

Проблема была у вашего line:height имущества, которое было установлено на 15%. Это заставит буквы накапливаться. Я очищаю ваш HTML и создаю JSFIDDLE HERE.