Накладывание блоков друг на друга

@FlyMouse86 · Регистрация: 29.08.2012

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

Здравствуйте!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
#id1{
width:300px;
height:300px;
background-color:red;
}
#id2{
width:200px;
height:200px;
background-color:green;
}
#id1{
width:100px;
height:100px;
}
</style>
 
<div id='id1'>
 <div id='id2'>
  <div id='id3'>
  </div>
 </div>
</div>

Есть 3 блока. 2 c заданным фоном, 1 прозрачный. Нужно, чтобы в id3 отображался фон блока с id1, минуя фон родительского элемента с id2, сделать как бы "окно в стене". Возможно ли такое? Помогите пожалуйста разобраться.

@etalord · 27.12.2012, 23:39

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

@Soldado · 27.12.2012, 23:49

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

Нужно, чтобы в id3 отображался фон блока с id1

Стили неверно записаны - два блока с id1 и нет id3. Это лабораторная какая-то?
А что изменять то можно - порядок блоков, код, стили?

@FlyMouse86 · 28.12.2012, 01:52 **[ТС]**

Нужно как бы отразить по средствам css и 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
<!DOCTYPE HTML>
<html>
<head>
<style>
#id1{
overflow: auto;
width:300px;
height:300px;
background-color:red;
}
#id2{
overflow: auto;
margin:50px 0 0 50px;
width:200px;
height:200px;
background-color:green;
}
#id3{
margin:50px 0 0 50px;
border:1px solid black;
width:100px;
height:100px;
}
</style>
</head>
<body> 
<div id='id1'>
 <div id='id2'>
  <div id='id3'>
  </div>
 </div>
</div>
<body>
</html>

@newJS · 28.12.2012, 06:54

Тут скорее два слоя, а не три, во втором дырка чтобы просвечивался первый.
Второй слой сделать таблицей 3х3, одна из ячеек прозрачная. Окошко можно смещать за счет размеров ячеек.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>w122</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<script type="text/javascript" src="test_22.js"></script>
<link rel="stylesheet" type="text/css" href="test_23.css">
<style type="text/css">
table { position:absolute; top:20px; left:20px;}
td {background:silver;}
</style>
</head>
 
<body>
<div style=" position:relative;">
<div style="width:300px; height:300px; background:blue;"></div>
<table border="0" width="300" height="300" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<th>4</th>
<td>&nbsp;</td>
</tr><tr>
<td colspan="3">&nbsp;</td>
</tr></table>
</div>
</body>
</html>

@FlyMouse86 · 28.12.2012, 10:54 **[ТС]**

Спасибо!

@newJS · 29.12.2012, 05:23

погорячился с таблицей, на дивах тоже можно, размеры и бордюр взаимосвязаны

HTML5
1
2
3
4
<div style="position:relative;">
<div style="width:300px; height:300px; background:blue;"></div>
<div style="width:140px; height:80px; position:absolute; top:20px; left:20px; border:0 solid silver; border-width:100px 90px 120px 70px; overflow:hidden;"><div style="padding:7px;">Окно в Европу где то в центре</div></div>
</div>

@FlyMouse86 · 31.12.2012, 22:44 **[ТС]**

А насколько предсказуемо поведение данного бордюра? Можно ли задавать ему какие-то динамические значения по-средствам css, например width-min, при не фиксированных размерах? Или например, чтобы оно было на всю ширину и высоту родительского блока?

Добавлено через 19 минут
А что если сделать divы c display:table, table-row и table-cell? Работают ли данные дивы как <table>? Просто мне эти "окна" ой как нужны для дизайна, и я еще сам не до конца понимаю, как они будут у меня работать.. Только начинаю практиковаться в верстке страниц. Отсюда у меня следует вопрос: У какого элемента наибольшая функциональность в каскадных стилях в моем случае?

@newJS · 01.01.2013, 07:56

Бордюр от элемента не оторвешь, бордюр сам не может ни чего занимать, ему нужно обязательно размеры давать.

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

17.2 Табличная модель CSS
Табличная модель CSS базируется на табличной модели HTML 4.0, структура таблиц которой почти параллельна визуальному представлению. В данной модели таблица состоит из необязательного заголовка и любого числа рядов столбцов. О табличной модели говорится, что в ней "ряды первичны", поскольку авторы явно специфицируют ряды, а не столбцы, в языке документа. Столбцы определяются после того, как будут специфицированы все ряды - первая ячейка каждого ряда принадлежит первому столбцу, вторая - второму столбцу и т.д.). Ряды и столбцы могут быть сгруппированы структурно, и это группирование отражается при представлении (например, рамка может быть прорисована вокруг группы рядов).

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

Модель CSS не требует, чтобы язык документа содержал элементы, соответствующие каждому из этих компонентов. Для языков документов (таких как приложения XML), не имеющих предопределённых табличных элементов, авторы обязаны отображать элементы языка документа в элементы таблицы; это делается с помощью свойства 'display'. Следующие значения 'display' назначают семантику таблицы произвольному элементу:

table (в HTML: TABLE)
Специфицирует, что элемент определяет таблицу уровня блока: это прямоугольный блок, участвующий в контексте форматирования блока.
inline-table (в HTML: TABLE)
Специфицирует, что элемент определяет таблицу инлайн-уровня: это прямоугольный блок, участвующий в инлайн-контексте форматирования).
table-row (в HTML: TR)
Специфицирует, что элемент - это ряд ячеек.
table-row-group (в HTML: TBODY)
Специфицирует, что элемент группирует один или более рядов.
table-header-group (в HTML: THEAD)
Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается до всех других рядов и групп рядов и после любого верхнего заголовка. Печатающие пользовательские агенты (ПА) могут повторять ряды футера на каждой странице, занимаемой таблицей.
table-footer-group (в HTML: TFOOT)
Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается после всех других рядов и групп рядов и перед любым нижним заголовком. Печатающие ПА могут повторять ряды футера на каждой странице, занимаемой таблицей.
table-column (в HTML: COL)
Специфицирует, что элемент описывает столбец ячеек.
table-column-group (в HTML: COLGROUP)
Специфицирует, что элемент группирует один или более столбцов.
table-cell (в HTML: TD, TH)
Специфицирует, что элемент представляет ячейку таблицы.
table-caption (в HTML: CAPTION)
Специфицирует заголовок таблицы.
Элементы с 'display', установленным в 'table-column' или 'table-column-group', не выводятся (в точности так, как если бы они имели 'display: none'), но используются, поскольку могут иметь атрибуты, вводящие определённый стиль для представляемых ими столбцов.

Таблица стилей по умолчанию для HTML 4.0 в приложении иллюстрирует использование этих значений в HTML 4.0:

TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }
ПА могут игнорировать эти значения свойства 'display' для документов HTML, поскольку авторы не должны изменять ожидаемое поведение элемента.

min-height, min-width

Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы

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

при не фиксированных размерах?

этот див не будет работать без задания ему размеров, у него position:absolute;

@fvc · 01.01.2013, 15:57

а так не пойдет ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
#id1{
width:300px;
height:300px;
background-color:green;
}
#id3{
position:absolute;
left:100px;
top:30px;
display:block;
width:100px;
height:100px;
background-color:red;
border:1px solid white;
}
</style> 
 
<div id='id1'> 
  <div id='id3'>
  </div> 
</div>

мы двигаем красный квадрат по зеленому и получается эффект окна в стене

Добавлено через 1 час 21 минуту
Создайте 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#id1{
position:relative;
width:640px;
height:480px;
background-color:green;
}
#id3{
position:absolute;
width:100px;
height:100px;
background:url(http://s017.***********/i435/1212/2b/94fe4f4cbd4f.jpg) no-repeat;
left:241px;
top:143px;
background-position:-241px -143px;
}
img{
margin-top:10px;
}
</style> 
</head>
<body>
<div id="id1">  
        <div id="id3">
        </div>  
</div>
<img src="http://s017.***********/i435/1212/2b/94fe4f4cbd4f.jpg" width="640" height="480">
</body>
</html>

Вверху то что вам нужно
Внизу оригинал изображения

Размер div соответствует размеру изображения и имеет зеленый фон
Чтобы двигать div с изображением по зеленому квадрату нужно изменить его позицию и позицию изображения в нем.

CSS
1
2
3
left:241px;
top:143px;
background-position:-241px -143px;

Координаты изображения такие же только с отрицательным знаком.

@auftech · 01.01.2013, 19:10

WTF ?!?!?!?!
а на какого тогда в таблицах присутствует свойство z-index ???
я бы через индексы бы реализовал ...

@Taatshi · 01.01.2013, 20:46

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

я бы через индексы бы реализовал

Вот и реализуйте - и код нам покажите. Что зря мечтать-то?)

@FlyMouse86 · 01.01.2013, 21:32 **[ТС]**

to fvc
нет, так не пойдет. Дело в том, что "улица" должна быть также видна через несуществующий "потолок", "пол" и боковые стены. Стена одна, фронтальная, в нем окно. Изображений нет, только чистый css

CSS
1
2
3
4
5
6
background: -moz-linear-gradient(-45deg, #FCFEFD 5%, #2669D2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(5%, #FCFEFD), color-stop(100%,#2669D2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #FCFEFD 5%,#2669D2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #FCFEFD 5%,#2669D2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #FCFEFD 5%,#2669D2 100%); /* IE10+ */
    background: linear-gradient(left 20px top 100px,-45deg, #FCFEFD 5%,#2669D2 100%); /* W3C */

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

Добавлено через 10 минут

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

WTF ?!?!?!?!
а на какого тогда в таблицах присутствует свойство z-index ???
я бы через индексы бы реализовал ...

я тоже так думал, пока не уперся в проблему. Меняя z-indexы DIVы будут перекрывать друг друга, не создавая при этом никаких эффектов.

Добавлено через 2 минуты
пока ничего лучше, чем ячейка таблицы-стены в голову не приходит

@fvc · 02.01.2013, 00:07

так нужно или нет

@FlyMouse86 · 02.01.2013, 00:37 **[ТС]**

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

так нужно или нет

ДА!!

А если в окне две створки, или три..?! То есть такие сущности как "улица", "стена", "окно", "створки". Нужно при помощи цсс определить поведение такого механизма и окно со створками и со стеной надо поставить в центр. "Улица" - это фон. "Стена", тоже фон, только в этом фоне "Окно" - прозрачное, а у окна "Створки" - т.е. "окно" - это 1 или несколько прозрачных DIV с бордюрами

@fvc · 02.01.2013, 01:26

вот что получилось
код

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#window{
width:640px;
height:480px;
background-color:green;
}
#id1{
top:100px;
width:100px;
height:25px;
}
#id2{
left:100px;
width:25px;
height:300px;
}
ul.rama{
position:relative;
top:65px;
left:145px;
width:300px;
height:300px;
margin:0;
padding:0;
list-style-type:none;
border:25px solid silver;
}
ul.rama li{
position:absolute;
background-color:silver;
}
</style> 
</head>
<body>
<div id="window">   
        <ul class="rama">
            <li id="id1"></li>
            <li id="id2"></li>
        </ul>   
</div>
</body>
</html>

@fvc · 02.01.2013, 01:46

вот стена

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#window{
position:relative;
width:640px;
height:480px;
background-color:green;
}
#id1{
top:100px;
width:100px;
height:25px;
}
#id2{
left:100px;
width:25px;
height:300px;
}
ul.rama{
position:relative;
width:300px;
height:300px;
margin:0;
padding:0;
list-style-type:none;
border:25px solid silver;
}
ul.rama li{
position:absolute;
background-color:silver;
}
div.wall{
position:absolute;
top:25px;
left:25px;
border-top:25px;
border-right:150px;
border-left:100px;
border-bottom:25px;
border-style:solid;
border-color:coral;
}
</style> 
</head>
<body>
<div id="window">
    <div class="wall">
        <ul class="rama">
            <li id="id1"></li>
            <li id="id2"></li>
        </ul>   
    </div>
</div>
</body>
</html>

@FlyMouse86 · 02.01.2013, 02:57 **[ТС]**

Круто! Спасибо!! Вроде то, что надо! Буду разбираться..
З.Ы. почему-то кнопки +1спасибо нету

Добавлено через 49 минут
Прошу прощения за назойливость.. А можно сделать так, чтобы створки окна как бы приклеивались справа. Там еще по-ходу дверь будет со стеклом в произвольном порядке с маленько-другими свойствами css. Например представить окно фиксированного размера как набор створок с дверью. Что-то на подобие:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='ulica'>
  <div id='stena'>
    <div id='okno'>
       <div class='stvorka'>
       </div>
       <div class='stvorka'>
       </div>
       <div class='dver'>
       </div>
       <div class='stvorka'>
       </div>
    </div>
  </div>
</div>

Думаю, в таком случае их легче будет отделять друг от друга и вообще управлять ими. Или может лучше кто-нибудь скиньте пожалуйста ссылку на ресурс, где можно обо всем этом почитать: про позиционирование.. А то везде описывают то или иное свойство цсс, а как его применять в совокупности с другими элементами и свойствами - мало необходимой информации.

@fvc · 02.01.2013, 14:23

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#ulica{
position:relative;
width:1000px;
height:700px;
background-color:green;
}
div.wall{
position:absolute;
top:125px;
left:75px;
border:50px solid coral;
}
ul.rama{
width:700px;
height:300px;
margin:0;
padding:0;
list-style-type:none;
border:25px solid ivory;
}
ul.rama li{
position:relative;
float:left;
height:250px;
border:25px solid silver;
border-left:0;
}
#id1{
width:100px;
border-left:25px solid silver;
}
#id2{
width:50px;
}
#id3{
width:50px;
}
#id4{
width:150px;
}
#id5{
width:100px;
}
#id1 span{
position:absolute;
display:block;
top:125px;
width:100px;
height:25px;
background-color:silver;
}
</style> 
</head>
<body>
<div id="ulica">
    <div class="wall">
        <ul class="rama">
            <li id="id1"><span></span></li>
            <li id="id2"></li>
            <li id="id3"></li>
            <li id="id4"></li>
            <li id="id5"></li>
        </ul>   
    </div>
</div>
</body>
</html>

добавляя больше li элементов с новыми id вы можете добавлять окна справа.

про позиционирование можно почитать в этой старой книге http://www.ozon.ru/context/detail/id/3221769/
или в новой версии на английском языке http://www.amazon.com/CSS-Mast... ywords=css

@FlyMouse86 · 02.01.2013, 17:05 **[ТС]**

Спасибо!!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	27.12.2012, 23:39
	можете визуально отобразить? после корпоратива картинка не складывается 0

@FlyMouse86 55 / 55 / 8 Регистрация: 29.08.2012 Сообщений: 175
	28.12.2012, 10:54 [ТС]
	Спасибо! 0

@FlyMouse86 55 / 55 / 8 Регистрация: 29.08.2012 Сообщений: 175
	31.12.2012, 22:44 [ТС]
	А насколько предсказуемо поведение данного бордюра? Можно ли задавать ему какие-то динамические значения по-средствам css, например width-min, при не фиксированных размерах? Или например, чтобы оно было на всю ширину и высоту родительского блока? Добавлено через 19 минут А что если сделать divы c display:table, table-row и table-cell? Работают ли данные дивы как <table>? Просто мне эти "окна" ой как нужны для дизайна, и я еще сам не до конца понимаю, как они будут у меня работать.. Только начинаю практиковаться в верстке страниц. Отсюда у меня следует вопрос: У какого элемента наибольшая функциональность в каскадных стилях в моем случае? 0

@auftech 7 / 7 / 0 Регистрация: 22.04.2012 Сообщений: 74
	01.01.2013, 19:10
	WTF ?!?!?!?! а на какого тогда в таблицах присутствует свойство z-index ??? я бы через индексы бы реализовал ... 0

@fvc 17 / 17 / 0 Регистрация: 31.12.2012 Сообщений: 68
	02.01.2013, 00:07
	так нужно или нет Миниатюры 0

@FlyMouse86 55 / 55 / 8 Регистрация: 29.08.2012 Сообщений: 175
	02.01.2013, 17:05 [ТС]
	Спасибо!! 0