Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Элемент (position:absolute) сдвигается относительно окна, а не родителя

Здравствуйте!
Вот кусок кода (содержимое body):
<div class="user_data_collumn">
	11111111<br />
	22222222<br />
	33333333<br />
	44444444<br />
</div>

<div id="groupsDiv">
   <input id="Button" type="button" value="Button">
	<style>
	#Button {
	position: absolute;
		top: 0px;
		left: 0px;
	}
	</style>
</div>


Если убрать свойства top и left, то отображается как надо - сначала 4 строки текста, а под ними Button. А вот с этими свойствами, Button почему-то налазит на текст и оказывается в углу окна браузера:

Получается, что при указании top и left позиция устанавливается относительно окна браузера, а не относительно родителя (groupsDiv). Если указываю не 0, а другие значения, то позиция устанавливается тоже относительно окна браузера.
Подскажите, пожалуйста, как сделать, чтобы позиция устанавливалась относительно родителя?
Спасибо!
Ответ: Дружище, большое спасибо!)))
Вопрос: Position absolute

Подскажите, пожалуйста, как решить следующие проблемы по этому макету сайта


1) Работа над макетом в процессе. Прежде, чем прописывать media queries, хотелось бы справиться с проблемой торчащего правого края полоски меню при сжатии окна браузера:
когда мы сжимаем окно до определённого размера, появляется горизонтальная полоса прокрутки, прокручиваем её и видим торчащий край полоски иеню.

Пытался решить проблему такими стилями для header (полоска с меню):


.header {
border-bottom: 1px solid #e5e500;
background-color: #000;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 55px;
justify-content: center;
left: 0px;
opacity: .8;
position: fixed;
right: 0px;
top: 0px;
z-index: 100;
}



2) Если открывать в Firefox, то текстовый слайдер игнорирует position: absolute и смещается под картинку
(а должен быть на её фоне). Читал, что это баг Firefox, но не нашёл варианта решения, который бы помог в моём случае.

3) Этот вопрос не по теме, но, может быть, кто-то подскажет, почему хост выборочно отображает изображения.
На localhost всё отображается, путь к файлам прописан верно, названия (регистр) прописаны верно.
Менял варианты расширения файлов - без результата.
Ответ:
Сообщение от kostyanet
Какого меню?
Меню - блок сверху, где находятся ссылки на секции страницы (Home, Services, Portfolio, Journal, About us, Contact).

Сообщение от kostyanet
У вас проблемы в секциях портфолио и ебаут. Проблемные места находятся или визуально по аутлайну на *, или методом удаления подозреваемых. Удалили возможный блок - ничего не поменялось, значит не он, удалили другой и так далее.
Методику отладки понимаю, проблема не в секциях Portfolio и About. Проблема именно в позиционировании header = меню ( position: fixed; )
Вопрос: Два объекта, которые имеют position - absolute

Я использую конструктор uCoz для создания сайта, но у меня в очередной раз возникла следующая проблема:
В свой сайт я решил добавить поле для поиска информации по сайту и кнопки uCoz для входа и авторизации на сайте. Они стоят вместе с логотипом на верхней панели (логотип стоит идеально, и с ним нет никаких проблем).
Первоначально кнопки для входа стояли не там, где нужно, из-за логотипа, но потом я добавил позицию для кнопок - absolute. Всё шло нормально!
В конце концов стандартное поле для поиска uCoz сильно надоело, и пришлось добавить новое поле, и при том рядом с логотипом и кнопками для входа к сайту. Новое поле (тоже absolute) поставил примерно к середине верхней панели сайта, но если посмотреть глазами гостя, то поле для поиска сдвигается на сторону логотипа из-за кнопок авторизации.
Если более подробно, то посмотрите пожалуйста на картинки ниже.


HTML5
1
2
3
4
5
6
7
8
<div class="td_l" style="position: absolute; top: 34px; right:35%">
<form class="poick_os1" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > 
<input class="poick_pole1" type="text" name="q" maxlength="45" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/> 
<input class="poick_knopka1" type="submit" value="Найти" /> 
<input type="hidden" name="t" value="0" /></form></div>
<link type="text/css" rel="StyleSheet" href="http://masseffect.ucoz.net/search.css" />
<div style="padding-right: 100%"><div align="right" style="position:absolute; top: 27px; right: 75px;">$LOGIN_FORM$</div></div></td></tr>
<tr><td align="center" height="2" style="background:#000;"></td></tr>
Пожалуйста помогите!
Ответ: Убираем позиционирование и:
HTML5
1
2
<div style="/* padding-right: 100%; */display: inline-block;vertical-align: middle;">
<div class="td_l" style="/* position: absolute; */display: inline-block;/* top: 34px; *//* right:50%; */">
Закомментированный код - это вам для наглядности. В итоге блок с лого и поиском должны выглядеть так:
HTML5
1
2
<div style="display: inline-block;vertical-align: middle;">...</div>
<div class="td_l" style="display: inline-block;">...</div>
В идеале, конечно, назначить бы блокам классы и стили задать в css файле:
CSS
1
2
3
4
5
6
7
.logo{
  display: inline-block;
  vertical-align: middle;
}
.search{
  display: inline-block;
}
HTML5
1
2
  <div class="logo"></div>
  <div class="search"></div>
Вопрос: Проблема с position:absolute на длинной по высоте LP

Добрый день! Есть сайт , представляющий длиннющую landing page, сделанную на темизированном Drupal 7. При щелчке по кнопке "Записаться" выходит форма, после заполнения которой посетитель должен увидеть сообщение типа "Заказ отправлен. В ближайшее время с вами свяжутся для уточнения деталей." - или сообщение об ошибке, если не все поля формы были заполнены. Сообщения реализуются через стандартные системные сообщения Drupal, но темизированы в файле .css шаблона сайта.

В шаблоне страницы page.tpl.php это сообщение выводится в блоке <div class="message">, который вложен в <div class="content-block">. Соответственно, поскольку content-block находится глубоко внизу, через долгую прокрутку браузера, сообщение исходно невидимо пользователем. И надо этот <div message> поднять в верхнюю часть окна браузера, чтобы посетители могли его увидеть!

Просто переставить этот div в заголовок header не получается - Drupal откажется печатать сообщения вообще. fixed-позиционирование непригодно для моего клиента т.к. блок неприятно стоит на месте при прокрутке содержимого, а должен уезжать вверх.

Остается использовать absolute позиционирование. У content-block указано position:static, т.е. вложенный в него message должен позиционироваться относительно окна браузера и всплыть наверх - однако, что-то не ладится и он позиционируется относительно своего родителя, так и оставаясь глубоко внизу(((

В чем дело? Почему не работает абсолютное позиционирование несмотря на static у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему?
Ответ:
Дык я итак пользуюсь Инспектором когда элементы страниц изучаю... просто не обратил внимания, что раз там "px" в стилях слитно пишется с цифрами, то так и надо писать(
Вопрос: Position absolute поднимает футер

Всем привет! Часто встречаюсь с такой бедой, особенно в WP:
В каком-то блоке вставить position:absolute, то футер сразу подскакиевает на высоту этого блока.
Оборачивай, не оборачивай, relative, не relative
HTML5
1
2
3
4
<div style="position:relative">
<div style="position:absolute">
</div>
</div>
- ничего не помогает. Как победить?
Ответ: Задавать фиксированный размер обертке. Абсолютно спозиционированный блок выпадает из общего потока и невидим для других элементов страницы, поэтому родительский блок и схлопывается.
Вопрос: Прокрутка в блоке на весь экран с position absolute

Привет, есть блок
Код:
.overlay {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	background: rgba(31,31,33,0.9);
	overflow-y: scroll;
        height: 100%;
	z-index: 1010;
}
Этот слой появляется после клика. Проблема возникает с прокруткой внутри блока на мобильных браузерах.
Они, логично, не воспринимают его как отдельную страницу и не делают инерционную прокрутку, а так же прокрутку вверх при тапе на status bar (iOS). Кто знает как это исправить?
Или может есть решение для открытия страниц в слое поверх текущей страницы с более изящным решением?
Ответ: Для организации прокрутки для мобильных можно использовать jQuery Mobile, а точнее обрабатывать события scrollstart, например
Вопрос: Проблема с position:absolute на длинной по высоте Landing Page

Добрый день! Есть сайт , представляющий длиннющую landing page, сделанную на темизированном Drupal 7. При щелчке по кнопке "Записаться" выходит форма, после заполнения которой посетитель должен увидеть сообщение типа "Заказ отправлен. В ближайшее время с вами свяжутся для уточнения деталей." - или сообщение об ошибке, если не все поля формы были заполнены. Сообщения реализуются через стандартные системные сообщения Drupal, но темизированы в файле .css шаблона сайта.

В шаблоне страницы page.tpl.php это сообщение выводится в блоке <div class="message">, который вложен в <div class="content-block">. Соответственно, поскольку content-block находится глубоко внизу, через долгую прокрутку браузера, сообщение исходно невидимо пользователем. И надо этот <div message> поднять в верхнюю часть окна браузера, чтобы посетители могли его увидеть!

Просто переставить этот div в заголовок header не получается - Drupal откажется печатать сообщения вообще. fixed-позиционирование непригодно для моего клиента т.к. блок неприятно стоит на месте при прокрутке содержимого, а должен уезжать вверх.

Остается использовать absolute позиционирование. У content-block указано position:static, т.е. вложенный в него message должен позиционироваться относительно окна браузера и всплыть наверх - однако, что-то не ладится и он позиционируется относительно своего родителя, так и оставаясь глубоко внизу(((

В чем дело? Почему не работает абсолютное позиционирование несмотря на static у родителя? Может быть из-за того, что Родитель находится глубоко "под днищем" окна браузера и требует долгой прокрутки к нему?
Ответ: Тьфу ты, я лоханулся по-полной((( я писал "px" и их величину раздельно, через пробел, а надо слитно - и тогда всё работает и с пикселями! Вот что значит когда PHP-программист полез во фронтенд потому что больше некому было(
Вопрос: Position:fixed внутри Position:absolute

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

Есть оверлэй, который открывается поверх окна браузера

Код:
.overlay {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	background: #FFF;
	overflow-y: scroll;
    height: 100%;
	z-index: 1090;
}

Внутри него хочу расположить блок с position:fixed, позиционирование относительно краев срабатывает, но блок не ездит. Я впринципе догадываюсь в чем проблема, но хочу услышать мнение других. Спасибо
Ответ:
Сообщение от cyber_bober
может есть какой-нибудь хак или костыль
Это все волшебные заклинания, типа "крибле, крабле, бумс!"... Они не помощники в программировании.
Вопрос: Не могу разобраться с position-relative и position-absolute

Дано: в блоке со свойствами position-relative помещен блок со свойствами position-absolute. Вопрос: почему атрибуты top и bottom работают нормально, от границы родительского блока, а left и right - от границы страницы?
Ответ:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
}
 
.background {
    background-color: yellow;
    min-height: 200px;
    
}
.container {
    background-color: blue;
    position: relative;
    width: 900px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}
.text {
    background-color: lime;
    position: absolute;
    width: 300px;
    height: 100px;
    left:50%;
    top:50%;
    margin-top: -50px; 
    margin-left:-150px;
    background-color: white;
    font-size: 30px;
    text-align: center;
    line-height: 100px;
}
Вопрос: Позиционирование div position:absolute относительно текстового поля input

Хочу справа от текстового поля разместить div position:absolute (типа подсказки). Но т.к. у поля input нет закрывающего тэга он не может быть родителем. Соответственно "абсолютный" div позиционируется относительно body.
Можно ли привязать подсказку к input text не добавляя div снаружи?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
 
<style>
body {
  background: #cce;
}
 
input#name {
  margin: 50px;
}
 
.tooltip {
  z-index: 9999;
    position: absolute;
    top: 10px;
    left: 0;
    padding: 3px;
    background-color: #555;
    color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 2px #c2c2c2;
}
 
</style>
    <title>Всплывающие подсказки</title>
    
</head>
 
<body>
    Имя: <input type="text" id="name" /><div class="tooltip">Подсказка</div>
    <br />
    <button type="submit">Понеслась...</button>
</body>
 
</html>
Ответ:
Сообщение от boomrest
сли не соответствует правилу - появляется подсказка справа от инпута, а спозиционировать её не получается.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var tt;
inp.onchange = function(){
    if(this.value.length < 5){
        if(!tt){
            tt = createTooltip(this);
            document.body.appendChild(tt);
        }
    }
    else{
        if(tt)
            tt.parentNode.removeChild(tt);
    }
}
function createTooltip(element){
    var tooltip = document.createElement("span");
    var rect = element.getBoundingClientRect();
    tooltip.innerHTML = element.getAttribute("data-tooltip");
    tooltip.className = "tooltip";
    tooltip.style.top = rect.top + element.clientHeight/2 + "px";
    tooltip.style.left = rect.right + "px";
    return tooltip;
}
CSS
1
2
3
4
5
6
.tooltip{
    position:absolute;
    display:block;
    padding:10px;
    border:1px solid #333;
}
HTML5
1
<input type="text" id="inp" data-tooltip="some tooltip" />

стили для подсказки сами придумаете