Фон и резиновая верстка или один слой поверх остальных

@ProstoMad · Регистрация: 30.06.2010

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

Как можно сделать так, что бы при увеличении боковые блоки уходили за браузер и без скрола. т.е. так же как фон, но только дивы. у меня резиновая верстка, по середине основной блок, по бокам блоки в качестве фона. Сделал так, потому что нужно слева от центрального блока один рисунок, а справа другой. Или второй вариант, как сделать так, что бы средний блок был поверх других, включая его фон. z-index не помогает

@svoy_man · 01.11.2012, 22:55

Скинь подробный пример,надо пощупать руками

@ProstoMad · 02.11.2012, 13:22 **[ТС]**

Щас под рукой нету. Там 3 блока. У одного margin-left:0;width23%; у другого margin-left:23%; width:54%; min-width:470px; у третьего margin-left:77%; width:23%; . У каждого position:fixed; и есть свой фон. В хтмл они идут в таком порядке: 1-ый 3-ий 2-ой. Имеено такой порядок, потому что если поставить 1,2,3 то 3-ий почему то не будет видно. При увеличении страницы(ctrl+scroll) 1-ый и 3-ий блоки закрывают 2-ой. Т.к. 2-ой блок основной, мне нужно что бы он перекрывал остальные блоки.

@Taatshi · 02.11.2012, 13:37

ProstoMad, нужен код.

@maximus2011 · 02.11.2012, 14:07

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

Как можно сделать так, что бы при увеличении боковые блоки уходили за браузер и без скрола. т.е. так же как фон, но только дивы. у меня резиновая верстка, по середине основной блок, по бокам блоки в качестве фона. Сделал так, потому что нужно слева от центрального блока один рисунок, а справа другой. Или второй вариант, как сделать так, что бы средний блок был поверх других, включая его фон. z-index не помогает

Как не помогает??? А ты его правильно написал???

@ProstoMad · 02.11.2012, 22:11 **[ТС]**

Ну завтра кину тогда код, щас нету. Z-index:999 у того блока, который хочу поместить наверх

@maximus2011 · 02.11.2012, 22:31

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

Ну завтра кину тогда код, щас нету. Z-index:999 у того блока, который хочу поместить наверх

Ну а position прописан у блоков? Иначе работать не будет индекс.

@ProstoMad · 03.11.2012, 01:22 **[ТС]**

У всех блоков прописан position:fixed;

@conformist · 03.11.2012, 03:07

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body{
    margin:0;
    padding:0;
}
#first{
    background:#f00;
    position:fixed;
    margin-left:0;
    width:23%;
    height:300px;/*условно*/
}
#second{
    background:#0f0;
    position:fixed;
    margin-left:23%;
    width:54%;
    min-width:470px;
    height:300px;/*условно*/
}
#third{
    background:#00f;
    position:fixed;
    margin-left:77%;
    width:23%;
    height:300px;/*условно*/
}
</style>
</head>
<body>
<div id="first">
</div>
<div id="third">
</div>
<div id="second">
</div>
</body>
</html>

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

@maximus2011 · 03.11.2012, 07:43

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

У всех блоков прописан position:fixed;

А индекс только у одного что ли прописан?

@ProstoMad · 03.11.2012, 20:32 **[ТС]**

HTML5
1
2
<div class="left_col"></div>
<div class="right_col"></div><div class="cent"></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
.left_col
{
    background:url("img/leftfon.jpg") right top no-repeat;
    width:23%;
    height:100%;
    position:fixed;
    margin-left:0;
    min-width:280px;
    overflow:hidden;
}
.right_col
{
    background:url("img/rightfon.jpg") left top no-repeat;
    width:23%;
    height:100%;
    position:fixed;
    margin-left:77%;
    min-width:280px;
    overflow:hidden;
}
.cent
{
    color:black;
    font-family:Impact;
    font-size:130%;
    background:url("img/lstick.png") repeat-y, url("img/rstick.png") 100% 0 repeat-y, url("img/woodbg.png");
    margin:0;
    width:54%;
    min-height:100%;
    padding:0;
    margin-left:23%;
    margin-bottom:-10px;
    min-width:660px;
    z-index:999;
}

@maximus2011 · 03.11.2012, 21:32

Так индекс надо прописывать у всех блоков. Допустим у главного 999, тогда у тех, которые должны быть спрятаны, можно написать 1 и 2 и позицию релативную прописать.(в зависимости от свойств)

@ProstoMad · 04.11.2012, 04:41 **[ТС]**

выставил, левому блоку 0 индекс, правому 2, а среднему 999. Не изменилось

@conformist · 04.11.2012, 10:15

ProstoMad, добавьте в блок .cent правило:

CSS
1
 position:fixed;

и все получится

@ProstoMad · 04.11.2012, 14:55 **[ТС]**

Ну теперь прописал всем. левый 0 правый 1 и средний 999, ничего не изменилось

@conformist · 04.11.2012, 16:40

я не знаю, что у вас не получается. вот ссылка http://jsfiddle.net/yZrhM/ — попробуйте убрать в css последнюю стоку (position:fixed) и покрутить скролл, левый и правый блок закроют средний. а с этой строкой — все нормально

@maximus2011 · 05.11.2012, 01:49

У вас полная бредятина со стилями, поэтому ничего и не получается. Правьте стили и все будет в порядке.

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	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 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами 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/

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191

	Фон и резиновая верстка или один слой поверх остальных 01.11.2012, 13:51. Показов 5751. Ответов 16 Метки нет (Все метки) Как можно сделать так, что бы при увеличении боковые блоки уходили за браузер и без скрола. т.е. так же как фон, но только дивы. у меня резиновая верстка, по середине основной блок, по бокам блоки в качестве фона. Сделал так, потому что нужно слева от центрального блока один рисунок, а справа другой. Или второй вариант, как сделать так, что бы средний блок был поверх других, включая его фон. z-index не помогает 0

@svoy_man 16 / 16 / 3 Регистрация: 01.11.2012 Сообщений: 55
	01.11.2012, 22:55
	Скинь подробный пример,надо пощупать руками 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	02.11.2012, 13:22 [ТС]
	Щас под рукой нету. Там 3 блока. У одного margin-left:0;width23%; у другого margin-left:23%; width:54%; min-width:470px; у третьего margin-left:77%; width:23%; . У каждого position:fixed; и есть свой фон. В хтмл они идут в таком порядке: 1-ый 3-ий 2-ой. Имеено такой порядок, потому что если поставить 1,2,3 то 3-ий почему то не будет видно. При увеличении страницы(ctrl+scroll) 1-ый и 3-ий блоки закрывают 2-ой. Т.к. 2-ой блок основной, мне нужно что бы он перекрывал остальные блоки. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	02.11.2012, 13:37
	ProstoMad, нужен код. 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	02.11.2012, 22:11 [ТС]
	Ну завтра кину тогда код, щас нету. Z-index:999 у того блока, который хочу поместить наверх 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	03.11.2012, 01:22 [ТС]
	У всех блоков прописан position:fixed; 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	03.11.2012, 21:32
	Так индекс надо прописывать у всех блоков. Допустим у главного 999, тогда у тех, которые должны быть спрятаны, можно написать 1 и 2 и позицию релативную прописать.(в зависимости от свойств) 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	04.11.2012, 04:41 [ТС]
	выставил, левому блоку 0 индекс, правому 2, а среднему 999. Не изменилось 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	04.11.2012, 14:55 [ТС]
	Ну теперь прописал всем. левый 0 правый 1 и средний 999, ничего не изменилось 0

@conformist O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681
	04.11.2012, 16:40
	я не знаю, что у вас не получается. вот ссылка http://jsfiddle.net/yZrhM/ — попробуйте убрать в css последнюю стоку (position:fixed) и покрутить скролл, левый и правый блок закроют средний. а с этой строкой — все нормально 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	05.11.2012, 01:49
	У вас полная бредятина со стилями, поэтому ничего и не получается. Правьте стили и все будет в порядке. 0