Блок Div съезжает

@NoBODY18 · Регистрация: 20.12.2012

Студворк — интернет-сервис помощи студентам

Добрый день! Помогите разобраться пожалуйста!
Съезжает блок div после установки css-свойства position:fixed.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="uslugiright">
                     <ul id="usl"><li><a href="/uslugi/biznes-soprovozhdenie">Бизнес-сопровождение</a></li></br>
                  <li><a href="/uslugi/biznes-diagnostika">Диагностика и оптимизация</a></li></br>
           <li><a href="/uslugi/konsalting">Управленческий и кадровый консалтинг</a></li></br>
           <li><a href="/uslugi/biznes-test">Бизнес-тест</a></li></br>
           <li><a href="/uslugi/gostevoi-vizit">Гостевой визит</a></li></br>
                       </ul>
                </div> 
                <div id="konsultant">
               <a href="/uslugi/konsalting"> <img src="../img/TELEFONISTA-300x300.png" alt="Консультант" align="bottom"/>Онлайн-консультант</a> 
                </div>

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
35
36
37
38
39
40
41
42
43
44
45
#uslugiright 
{
    float:right;
    border:2px solid grey;
    width:110px;
    height:170px;
    margin:239px 0 50px 13px;
    padding: 30px 0px 25px 40px;
    position: fixed;
    background-color:White;
    
}
#usl 
{
   padding: 0 0 0 0;
 
    margin: 0 0 0 0;
 
    list-style: none;
 
    height: 1%;
 
    font: 12px/14px AvantGardeGothicCRegular, Arial, sans-serif;
 
    position:  relative;
    top: 0px;
    left: -35px;
    width: 140px;
}  
#usl li
{   
     margin-left: 10px;
}
#konsultant
{
   
    float:right;
    width:150px;
    height:170px;
    margin-top:auto;
    margin-left:1089px;
    position: fixed;
    background-color:White;
    
}

@Encoder · 24.04.2014, 17:40

А вам нужно что-бы было вот так?

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
35
36
37
38
39
40
41
42
43
#uslugiright 
{
    float:right;
    border:2px solid grey;
    width:110px;
    height:170px;
    margin:239px 0 50px 13px;
    padding: 30px 0px 25px 40px;
    position: fixed;
    background-color:White;
    
}
#usl 
{
   padding: 0 0 0 0;
 
    margin: 0 0 0 0;
 
    list-style: none;
 
    height: 1%;
 
    font: 12px/14px AvantGardeGothicCRegular, Arial, sans-serif;
 
    position:  relative;
    top: 0px;
    left: -35px;
    width: 140px;
}  
#usl li
{   
     margin-left: 10px;
}
#konsultant
{
    width:150px;
    height:170px;
    position: fixed;
    top:0;
    right: 0;
    background-color:White;
    
}

@NoBODY18 · 24.04.2014, 17:59 **[ТС]**

Encoder, немного не понял вопроса?
Смотрите, просто если position:fixed убрать, то получается что блоки находятся там где мне надо.
Справа находится:
1) Список услуг
2) Консультант
Соответсвенно мне надо чтоб два блока были зафиксированы.

@Encoder · 24.04.2014, 18:03

Прочитайте про так работает position: fixed;
Вот тут описанно очень хорошо: http://htmlbook.ru/css/position

@NoBODY18 · 24.04.2014, 18:35 **[ТС]**

Encoder, спасибо, я уже читал эту статью, сейчас повторю. Я просто не могу понять в чем ошибка!?

Добавлено через 13 минут
Encoder, скажите пожалуйста, а если я применю background-attachment:fixed, эффекта фиксации при прокрутке страницы я не достигну?

@Encoder · 24.04.2014, 18:53

Вы хотите чтобы справа фиксировано находилось оба блока?

@NoBODY18 · 24.04.2014, 19:01 **[ТС]**

Encoder, Да. background-attachment не работает.

Я хочу чтоб при прокрутки страницы вниз, блоки двигались тоже. Когда прописываю position:fixed, то блок услуг идет в левый верхний угол, а блок консультант подымается наверх, только справа. Хотя float:right везде прописан.

@Encoder · 24.04.2014, 19:49

Вы не внимательно читали значит. Дело в том что position: fixed; идет так потому-что он берет от окна браузера.
Чтобы блок был например справа вверху то пишем top: 0; /* 0px от верхнего угла */ right: 0; /* 0px от правого угла */ Если слева надо то заменяем right на left.

Вот пример как я разместил блоки с двух сторон:

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
35
36
37
38
39
40
41
42
43
#uslugiright 
{
    border:2px solid grey;
    width:110px;
    height:170px;
    padding: 30px 0px 25px 40px;
    position: fixed;
    top: 0;
    left: 0;
    background-color:White;
    
}
#usl 
{
   padding: 0 0 0 0;
 
    margin: 0 0 0 0;
 
    list-style: none;
 
    height: 1%;
 
    font: 12px/14px AvantGardeGothicCRegular, Arial, sans-serif;
 
    position:  relative;
    top: 0px;
    left: -35px;
    width: 140px;
}  
#usl li
{   
     margin-left: 10px;
}
#konsultant
{
    width:150px;
    height:170px;
    position: fixed;
    top: 0;
    right: 0;
    background-color:White;
    
}

@NoBODY18 · 24.04.2014, 20:36 **[ТС]**

Encoder, спасибо Вам большое.

Разобрался.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@NoBODY18 25 / 16 / 1 Регистрация: 20.12.2012 Сообщений: 122
	24.04.2014, 17:59 [ТС]
	Encoder, немного не понял вопроса? Смотрите, просто если position:fixed убрать, то получается что блоки находятся там где мне надо. Справа находится: 1) Список услуг 2) Консультант Соответсвенно мне надо чтоб два блока были зафиксированы. 0

@Encoder 62 / 62 / 11 Регистрация: 31.01.2013 Сообщений: 186
	24.04.2014, 18:03
	Прочитайте про так работает position: fixed; Вот тут описанно очень хорошо: http://htmlbook.ru/css/position 1

@NoBODY18 25 / 16 / 1 Регистрация: 20.12.2012 Сообщений: 122
	24.04.2014, 18:35 [ТС]
	Encoder, спасибо, я уже читал эту статью, сейчас повторю. Я просто не могу понять в чем ошибка!? Добавлено через 13 минут Encoder, скажите пожалуйста, а если я применю background-attachment:fixed, эффекта фиксации при прокрутке страницы я не достигну? 0

@Encoder 62 / 62 / 11 Регистрация: 31.01.2013 Сообщений: 186
	24.04.2014, 18:53
	Вы хотите чтобы справа фиксировано находилось оба блока? 0

@NoBODY18 25 / 16 / 1 Регистрация: 20.12.2012 Сообщений: 122
	24.04.2014, 19:01 [ТС]
	Encoder, Да. background-attachment не работает. Я хочу чтоб при прокрутки страницы вниз, блоки двигались тоже. Когда прописываю position:fixed, то блок услуг идет в левый верхний угол, а блок консультант подымается наверх, только справа. Хотя float:right везде прописан. 0

@NoBODY18 25 / 16 / 1 Регистрация: 20.12.2012 Сообщений: 122
	24.04.2014, 20:36 [ТС]
	Encoder, спасибо Вам большое. Разобрался. 0

Блок Div съезжает

Решение