Как сделать, чтобы меню было всегда слева от центрированного div с position: absolute?

@MaxRumata · Регистрация: 07.11.2014

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

Доброго времени суток!

Я экспериментирую с эффектом параллакс, и у меня есть центрировання многослойная композиция, в которой у всех дивов position: absolute. Как мне сделать слева от этих дивов боковое меню так, чтобы при уменьшении окна браузера композиция "упиралась" в меню и дальше не сдвигалась? Потому что сейчас она наезжает на меню при уменьшении окна.

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

И еще: хотел сделать чтобы меню при прокрутке "пиклеивалось" к верхней границе окна, поэтому оно должно будет менять позиционирование с relative (или любого другого, которое посоветуете) на fixed. И хотелось чтобы при этом оно по-прежнему было слева от композиции.

Как это сделать?

Может возможно как-то задать минимальный отступ слева для композиции? Но она уже центрирована...

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

В общем задача!

Заранее большое спасибо!

@Justff · 02.12.2014, 01:23

это просто поток ваших мыслей и размышления?

если хотите помощи, выкладывайте код

@Fedor92 · 02.12.2014, 01:35

Если я правильно понимаю, то в статике Вам нужен position:relative, а при прокрутке fixed... Приклеить меню легко... Для того, чтобы оно было сверху достаточно задать свойство top:0, а чтобы было слева left:0... Если хотите немного подвинуть тогда применяем правило (например top:20px, что соответствует отступу слева) ИМХО, всё остальное делается с помощью js... На событие onscroll Вам необходимо повесить изменение css свойств меню... Как-то так...

@MaxRumata · 02.12.2014, 02:59 **[ТС]**

Justff, Да, очень нужен совет

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype: html>
<html>
 
<head>
 
<meta charset="utf-8">
<title>Кулдига</title>
<link type="text/css" rel="stylesheet" href="Pages/Kuldiga_Style.css" />
 
<script>
    function parallax() {
        var fon = document.getElementById ("fon");
        fon.style.top = -(window.pageYOffset / 90)+"px";
        
        var doma_2 = document.getElementById ("doma-2");
        doma_2.style.top = -(window.pageYOffset / 2)+"px";
        
        var doma_3 = document.getElementById ("doma-3");
        doma_3.style.top = -(window.pageYOffset / 1.2)+"px";
        
        var zabor = document.getElementById ("zabor");
        zabor.style.top = -(window.pageYOffset * 1.7)+"px";
        
        var kanal_2 = document.getElementById ("kanal_2");
        kanal_2.style.top = -(window.pageYOffset * 1.4)+"px";
        
    }
 
    
    window.addEventListener("scroll",parallax,false);
 
    
</script>
 
</head>
 
<body>
 
    <div id="main">
    
    
        <div id="header">Заголовок</div>
    
                
    
            
                <div id="fon"></div> 
                <div id="doma-2"></div> 
                <div id="doma-3"></div> 
                <div id="zabor"></div> 
                <div id="kanal_2"></div> 
        
                <div class ="menu">Меню</div>
        
            
        <div id="content">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        
        
        
            <div id="footer">Футер</div>
        </div>
    </div>
</body>
 
</html>

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
body {
    background: url(../Materials/Photo/Livia/fon.png);
    background-repeat: repeat;
    background-size: 500px;
    background-attachment: fixed;
    
    
}
 
* {
    padding:0;
    margin:0;
}
 
 
 
#header {
 
    font-style: italic;
    height: 50px;
    padding: 20px;
    width: 90%;
    position: absolute;
    text-align: center;
    
    
 
 
}
 
 
 
 
#footer {
        
        margin-top: 500px;
        height: 100px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        }
        
#content {
    position: absolute;
}
    
    
    
/*Слои с домами */
 
 
#fon {
 
    position: absolute;
    width: 800px;
    height: 1000px;
margin-top: -180px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/vodopad_fon_most_realwater_2.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-2 {
position: absolute;
 
 
    width: 800px;
    height: 875px;
    margin-top: 430px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
    background: url(../Materials/Photo/Kuldiga/Shapka/domiki_1_11.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-3 {
 
    position: absolute;
    width: 800px;
    height: 2000px;
    margin-top: 675px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_1_2.png) no-repeat;
    background-size: 100%;
    
 
}
 
#zabor {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1790px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/derevo_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
#kanal_2 {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1660px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_2_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
 
.menu{
    
    ou
    left: 200px;
    float: left;
    text-align: left;
}
 
#doma-1 {
    z-index: 1;
}
 
#doma-2 {
    z-index: 2;
}
 
#doma-3 {
    z-index: 3;
}
 
#zabor {
    z-index: 5;
}
 
#kanal_2 {
    z-index: 4;
}

Добавлено через 3 минуты
Fedor92, Да, спасибо!

Я нашел интересный вариант - урок, но у меня проблема с тем как сделать чтобы рядом с меню находящаяся группа слоев с абсолютным позиционированием и центрированная при уменьшении окна браузера не наезжала на меню (и не подъезжало под него), а примыкала и дальше не смещалось. Вот такая задача

Добавлено через 3 минуты
P.S. Там где в CSS стиль класса menu - это просто черновик, я экспериментировал с азными вариантами и скопировал что было на настоящий момент.

@Fedor92 · 02.12.2014, 11:34

Сообщение от MaxRumata

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

Проблема, как раз с абсолютным позиционированием, на которое неадекватно реагируют браузеры поскольку при изменении расширения блоки никуда двигаться в абсолютной позиции не будут... Как вариант можно попробовать обернуть блоки с абсолютным позиционированием в блок со свойством position:relative и уже с ним проводить манипуляции по позиционированию относительно меню или меню относительно данного блока

... Или опять же обратиться к js, но как мне кажется - это более топорный вариант...

@MaxRumata · 02.12.2014, 13:26 **[ТС]**

Fedor92, Да я как раз пытался обернуть их в блок с другим позиционированием, но, насколько я понимаю, блоки с абсолютным позиционированием нельзя поместить в другой блок, ведь они не меняют его высоту, верно? Я еще не пробовал задать высоту вручную, но мне кажется что все рвано блок-родитель не будет влиять на вложенные...

@Fedor92 · 02.12.2014, 15:06

Сообщение от MaxRumata

мне кажется что все рвано блок-родитель не будет влиять на вложенные...

Почему же? Очень даже будет...

Сообщение от MaxRumata

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

А зачем они должны менять его высоту? Можно задать размеры родительского блока и внутри него спозиционировать дочерние аккурат по его высоте...

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

@MaxRumata · 03.12.2014, 01:38 **[ТС]**

Fedor92, Попробовал, странный глюк получается. Я сделал со скринами:

1 этап.

1. Так выглядит страница в начале, до помещения многослойной композиции в родительский див. По центру многослойная композиция, слева вверху видны буквы "ляляля" - это слово лежит внутри дива в котором будет меню (написал для теста).

Вот код:

HTML:

Кликните здесь для просмотра всего текста

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype: html>
<html>
 
<head>
 
<meta charset="utf-8">
<title>Кулдига</title>
<link type="text/css" rel="stylesheet" href="Pages/Kuldiga_Style.css" />
 
<script>
    function parallax() {
        var fon = document.getElementById ("fon");
        fon.style.top = -(window.pageYOffset / 90)+"px";
        
        var doma_2 = document.getElementById ("doma-2");
        doma_2.style.top = -(window.pageYOffset / 2)+"px";
        
        var doma_3 = document.getElementById ("doma-3");
        doma_3.style.top = -(window.pageYOffset / 1.2)+"px";
        
        var zabor = document.getElementById ("zabor");
        zabor.style.top = -(window.pageYOffset * 1.7)+"px";
        
        var kanal_2 = document.getElementById ("kanal_2");
        kanal_2.style.top = -(window.pageYOffset * 1.4)+"px";
        
    }
 
    
    window.addEventListener("scroll",parallax,false);
 
    
</script>
 
</head>
 
<body>
 
    <div id="main">
    
    
        <div id="header">Заголовок</div>
    
                
        
                <div id="fon"></div> 
                <div id="doma-2"></div> 
                <div id="doma-3"></div> 
                <div id="zabor"></div> 
                <div id="kanal_2"></div> 
        
                <div class ="menu">ляляля</div>
    
            
        <div id="content">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        
        
        
            <div id="footer">Футер</div>
        </div>
    </div>
</body>
 
</html>

CSS:

Кликните здесь для просмотра всего текста

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
body {
    background: url(../Materials/Photo/Livia/fon.png);
    background-repeat: repeat;
    background-size: 500px;
    background-attachment: fixed;
    
    
}
 
* {
    padding:0;
    margin:0;
}
 
 
 
#header {
 
    font-style: italic;
    height: 50px;
    padding: 20px;
    width: 90%;
    position: absolute;
    text-align: center;
    
    
 
 
}
 
 
 
 
#footer {
        
        margin-top: 500px;
        height: 100px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        }
        
 
 
/*Слои с композицией */
 
 
#fon {
 
    position: absolute;
    width: 800px;
    height: 1000px;
margin-top: 1px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/vodopad_fon_most_realwater_2_crop.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-2 {
position: absolute;
 
 
    width: 800px;
    height: 875px;
    margin-top: 430px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
    background: url(../Materials/Photo/Kuldiga/Shapka/domiki_1_11.png) no-repeat;
    background-size: 100%;
    
}
 
#doma-3 {
 
    position: absolute;
    width: 800px;
    height: 2000px;
    margin-top: 675px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_1_2.png) no-repeat;
    background-size: 100%;
    
 
}
 
#zabor {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1790px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/derevo_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
#kanal_2 {
 
    position: absolute;
    width: 800px;
    height: 3000px;
    margin-top: 1660px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    background: url(../Materials/Photo/Kuldiga/Shapka/kanali_2_5.png) no-repeat;
    background-size: 100%;
    
 
}
 
 
.menu{
    
 
    left: 200px;
    float: left;
    
}
 
#doma-1 {
    z-index: 1;
}
 
#doma-2 {
    z-index: 2;
}
 
#doma-3 {
    z-index: 3;
}
 
#zabor {
    z-index: 5;
}
 
#kanal_2 {
    z-index: 4;
}

залить картинку на форум

2 этап:

2. Это первое что происходит после помещения композиции в родительский див с position: relative. Ширину и высоту задал в пикселях, с запасом. Сделал синюю обводку чтобы видеть границы родительского дива.

На этом этапе 2 вопроса:

а) Почему если задать родительскому диву ширину 100% он не растягивается на ширину окна а вообще не отображается?

б) Почему все уползло влево и похоже с захлестом и за край (синяя граница слева не видна)?

Вот изменения в коде:

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
    <div id="main">
    
                <div id="fon"></div> 
                <div id="doma-2"></div> 
                <div id="doma-3"></div> 
                <div id="zabor"></div> 
                <div id="kanal_2"></div> 
        
                <div class ="menu">ляляля</div>
    
            </div>

CSS:

CSS
1
2
3
4
5
6
7
    #main {
        position: relative;
        outline: solid blue;
        width: 800px;
        height: 5000px;
        
    }

залить картинку на форум

Добавлено через 23 минуты
3 Этап:

Я задаю отступ слева для родительского дива через left: 200px. Композиция смещается вместе с дивом, но я не понимаю что происходит с контурами родительского дива (а значит и с его формой)?Вот в чем вопрос.

Изменения в коде:

CSS:

CSS
1
2
3
4
5
6
7
8
    
#main {
        position: relative;
        outline: solid blue;
        width: 800px;
        height: 5000px;
        left: 200px;
    }

фотохостинг бесплатно

image share

Добавлено через 3 минуты
Ну и на скринах видно что композиция ложится поверх дива с "ляляля" в котором будет меню, а мне нужно чтобы она упиралась в меню. Поэтому следующий вопрос после вышеперечисленных, как это сделать, после того как привести в порядок родительский див

Если можно подробнее, потому что я еще плохо разбираюсь, други, недавно начал изучать создание сайтов.

@Fedor92 · 03.12.2014, 11:34

MaxRumata, а зачем Вы пишите большими буквами? Вроде всё итак неплохо видно...

На край есть масштабирование... Ну и начну с вопроса на засыпку, а где собственно свойства блока main и для чего Вы его вообще создаёте? Думаю вопрос на этапе 3 отпадёт сам собой...

Добавлено через 14 минут
Нет... Надо немного перефразировать вопрос, а то ничего не поймёте... Сразу отправлю на первоисточник Значение position:absolute - там всё изложено... Ну а дальше математика...

@MaxRumata · 04.12.2014, 23:14 **[ТС]**

Fedor92, Размер менял в качестве эксперимента

Извините, не совсем понял. Определение я читал, но перечитал на всякий случай

Блок main это и есть родительский див с position: relative, в который я хотел поместить композицию слоев с картинками (у которых position:absolute), в надежде что если я затем центрирую этот родительский див, а слева добавлю меню, при уменьшении окна браузера он не будет наезжать на меню.

Если я действую неправильно, подскажите пожалуйста подробнее, торможу))) Пока не справлюсь с этой проблемой работа над сайтом стоит. И спасибо Вам огромное за помощь!

Добавлено через 5 минут
Свойства блока main (Вы имеете в виду стиль css?) Описаны в моем посте выше.

@Fedor92 · 04.12.2014, 23:24

Сообщение от MaxRumata

Если я действую неправильно, подскажите пожалуйста подробнее, торможу))) Пока не справлюсь с этой проблемой работа над сайтом стоит. И спасибо Вам огромное за помощь!

Вообще сразу бросается Ваш подход к вёрстке, а точнее стили css... К примеру у Вас почти везде присутствует(даже не почти, а везде) position:absolute... Данное явление само по себе не очень хорошо отражается на вёрстке... И лучше стараться не прибегать к использованию данного свойства... ИМХО, лучше располагать блоки с помощью float:left - данное свойство помогает выравнивать блоки относительно родительских элементов при этом они не выпадают из потока... И при выкладывании на хостинг сайта у Вас не возникнет проблем с отступами или каким-то разнобоем... Второе, что хочется отметить - это использование Вами отступов от границ окна, что тоже не есть хорошо... Третье - Вы всем блокам задаёте позишн, хотя это совсем не обязательно... Пока у Вас хромает понимание свойств позишн и выравнивания флоат, но всё можно подтянуть... Попробуйте пока просто потренироваться в расположении блоков без контента с очерченными границами, посмотрите, как ведут себя блоки при изменеии того или иного свойства css, чтобы у Вас было чёткое понимание, что к чему... На выхах у меня будет время, выкладывайте контент или пишите в личку все пожелания по вёрстке - я наверстаю простенький макет, а потом разберём, что к чему или я комменты пропишу на худой конец... Пока поступим так...

@MaxRumata · 04.12.2014, 23:35 **[ТС]**

Fedor92, Спасибо Вам огромное! Мне очень важна критика, так как я еще только учусь

Position absolute я использую потому что использую эффект параллакса, если есть другой способ без абсолютного позиционирвоания - буду рад ему научиться!
Отступы (margin-top использую потому что если использовать top, по непонятной мне причине при начале прокрутки происходит скачек, я создавал об этом тему на форуме, но мы так и не нашли причину, и margin стал временным решением (с ним скачка нет). Если бы получилос разобраться и с этим, было бы круто!
Да, я тоже думал о float...
Еще раз спасибо Вам за терпение и попощь!

В личку кину архив,завтра напишу подробнее как себе представляю сайт. Я на маке, поэтому в виндоусе могут быть видны лишние системные файлы, думаю их можно просто удалить. Стартовый файл сайта index.html.

@Fedor92 · 04.12.2014, 23:39

Договорились... Вы слишком зациклены на паралаксе... Это не Вы должны плясать вокруг паралакса...

Либо завтра вечером - либо в субботу вечером я Вам отвечу или в вск, короче как получится...

@MaxRumata · 05.12.2014, 00:05 **[ТС]**

Fedor92, Ок, договорились!

Новые блоги и статьи Все статьи Все блоги /
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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74

	Как сделать, чтобы меню было всегда слева от центрированного div с position: absolute? 02.12.2014, 01:06. Показов 3429. Ответов 13 Метки нет (Все метки) Доброго времени суток! Я экспериментирую с эффектом параллакс, и у меня есть центрировання многослойная композиция, в которой у всех дивов position: absolute. Как мне сделать слева от этих дивов боковое меню так, чтобы при уменьшении окна браузера композиция "упиралась" в меню и дальше не сдвигалась? Потому что сейчас она наезжает на меню при уменьшении окна. Ведь, насколько я понимаю, абсолютные дивы невозможно поместить в див, и поэтому вариант с float не сработает? И еще: хотел сделать чтобы меню при прокрутке "пиклеивалось" к верхней границе окна, поэтому оно должно будет менять позиционирование с relative (или любого другого, которое посоветуете) на fixed. И хотелось чтобы при этом оно по-прежнему было слева от композиции. Как это сделать? Может возможно как-то задать минимальный отступ слева для композиции? Но она уже центрирована... Использовать таблицы?.. кажется так уже не делают, может есть другое решение? Или если все же таблицы то подскажите, как лучше сделать? В общем задача! Заранее большое спасибо! 0

@Justff 48 / 87 / 11 Регистрация: 12.08.2013 Сообщений: 474
	02.12.2014, 01:23
	это просто поток ваших мыслей и размышления? если хотите помощи, выкладывайте код 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	02.12.2014, 01:35
	Если я правильно понимаю, то в статике Вам нужен position:relative, а при прокрутке fixed... Приклеить меню легко... Для того, чтобы оно было сверху достаточно задать свойство top:0, а чтобы было слева left:0... Если хотите немного подвинуть тогда применяем правило (например top:20px, что соответствует отступу слева) ИМХО, всё остальное делается с помощью js... На событие onscroll Вам необходимо повесить изменение css свойств меню... Как-то так... 1

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	02.12.2014, 13:26 [ТС]
	Fedor92, Да я как раз пытался обернуть их в блок с другим позиционированием, но, насколько я понимаю, блоки с абсолютным позиционированием нельзя поместить в другой блок, ведь они не меняют его высоту, верно? Я еще не пробовал задать высоту вручную, но мне кажется что все рвано блок-родитель не будет влиять на вложенные... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	03.12.2014, 11:34
	MaxRumata, а зачем Вы пишите большими буквами? Вроде всё итак неплохо видно... На край есть масштабирование... Ну и начну с вопроса на засыпку, а где собственно свойства блока main и для чего Вы его вообще создаёте? Думаю вопрос на этапе 3 отпадёт сам собой... Добавлено через 14 минут Нет... Надо немного перефразировать вопрос, а то ничего не поймёте... Сразу отправлю на первоисточник Значение position:absolute - там всё изложено... Ну а дальше математика... 1

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	04.12.2014, 23:14 [ТС]
	Fedor92, Размер менял в качестве эксперимента Извините, не совсем понял. Определение я читал, но перечитал на всякий случай Блок main это и есть родительский див с position: relative, в который я хотел поместить композицию слоев с картинками (у которых position:absolute), в надежде что если я затем центрирую этот родительский див, а слева добавлю меню, при уменьшении окна браузера он не будет наезжать на меню. Если я действую неправильно, подскажите пожалуйста подробнее, торможу))) Пока не справлюсь с этой проблемой работа над сайтом стоит. И спасибо Вам огромное за помощь! Добавлено через 5 минут Свойства блока main (Вы имеете в виду стиль css?) Описаны в моем посте выше. 0

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	04.12.2014, 23:35 [ТС]
	Fedor92, Спасибо Вам огромное! Мне очень важна критика, так как я еще только учусь Position absolute я использую потому что использую эффект параллакса, если есть другой способ без абсолютного позиционирвоания - буду рад ему научиться! Отступы (margin-top использую потому что если использовать top, по непонятной мне причине при начале прокрутки происходит скачек, я создавал об этом тему на форуме, но мы так и не нашли причину, и margin стал временным решением (с ним скачка нет). Если бы получилос разобраться и с этим, было бы круто! Да, я тоже думал о float... Еще раз спасибо Вам за терпение и попощь! В личку кину архив,завтра напишу подробнее как себе представляю сайт. Я на маке, поэтому в виндоусе могут быть видны лишние системные файлы, думаю их можно просто удалить. Стартовый файл сайта index.html. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	04.12.2014, 23:39
	Договорились... Вы слишком зациклены на паралаксе... Это не Вы должны плясать вокруг паралакса... Либо завтра вечером - либо в субботу вечером я Вам отвечу или в вск, короче как получится... 1

@MaxRumata 0 / 0 / 0 Регистрация: 07.11.2014 Сообщений: 74
	05.12.2014, 00:05 [ТС]
	Fedor92, Ок, договорились! 0