Не получается

@ZoOoO · Регистрация: 09.02.2016

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

Помогите пожалуйста.Не получается сделать так,что бы блок с именем left залезая под блок с именем menu,скрывал свой вверх.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<head>
<title>web-tehnologies</title>
<link rel="stylesheet" href="css\new1.css" >
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li id="rar"><a href="index.html">HOME</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">RESOURCES</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PARTHERS</a></li>
<li ><a href="#">CONTACT US</a></li>
</ul>
</div>
<div id="left"><a href="#"><img src="img/logo.png" id="der" align="right"></a></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
* {
  margin: 0;
  padding: 0;
}
 
#wrapper{
    width: 766px;
    margin: 0 auto;
    
}
 
#menu{
    width: 766px;
    height: 32px;
    background: url(../img/menu.png);
    margin: 0 auto;
    
}
 
#menu ul{
    list-style-type: none;
    padding-left: 18px;
    padding-top: 10px;
    font-size: 10px;
}
 
a{
    text-decoration:none;
}
 
#menu ul li{
    display: inline;
}
 
#menu ul li a{
    color: #fefeff;
    margin-right: 20px;  
}
 
#left{
    width: 766px;
    height: 141px;
    background: url(../img/header.png);
    margin-top: 0px;
}
 
#der{
    width: 266px;
    height: 57px;
    padding-top: 39px;
    padding-right: 20px;
}

Добавлено через 1 час 22 минуты
Я решил эту проблему поменяв эти два блока местами.Первый поставил блок id="left",вторым id="menu".Сделал для первого блока отступ от верха

CSS
1
margin: 30px auto;

,а нижний поднял в верх

CSS
1
margin: -201px auto;

.
Получилось,как я и хотел.Блок id="menu" чуть чуть скрывает собой верх блок id="left".

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
<!DOCTYPE html>
<head>
<title>web-tehnologies</title>
<link rel="stylesheet" href="css\new1.css" >
</head>
<body>
<div id="wrapper">
 
<div id="left">
<a href="#"><img src="img/logo.png" id="der" align="right"></a>
</div>
 
 
<div id="menu">
<ul>
<li id="rar"><a href="index.html">HOME</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">RESOURCES</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PARTHERS</a></li>
<li ><a href="#">CONTACT US</a></li>
</ul>
</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
* {
  margin: 0;
  padding: 0;
}
 
#wrapper{
    width: 766px;
    margin: 0 auto;
}
 
#menu{
    width: 766px;
    height: 32px;
    background: url(../img/menu.png);
    margin: -201px auto;
}
 
#menu ul{
    list-style-type: none;
    padding-left: 18px;
    padding-top: 10px;
    font-size: 10px;
}
 
a{
    text-decoration:none;
}
 
#menu ul li{
    display: inline;
}
 
#menu ul li a{
    color: #fefeff;
    margin-right: 20px;  
}
 
#left{
    width: 766px;
    height: 141px;
    background: url(../img/header.png);
    margin: 30px auto;
}
 
#der{
    
    padding-top: 39px;
    padding-right: 20px;
}

Но есть ли другой вариант.Может быть тег есть какой то,про который я не знаю.

@Olegg95 · 04.05.2016, 15:25

А что если при помощи относительного позиционирования сделать? position:relative; top:-px? Так по идее можно. А если будет верхний перекрывать, то при помощи z-index это решить можно.

@ZoOoO · 07.05.2016, 17:25 **[ТС]**

Почитал про z-index.Все работает.

Добавлено через 2 часа 20 минут
Кстатии.А это нормально,что вот этот код:

HTML5
1
2
#menu {z-index: 2};
#left {z-index: 1};

Нужно всегда ставить в конце всех кодов в css файл.Потому что если его поставить в середину,то css начинает не правильно работать.

@Academik · 07.05.2016, 18:16

По умолчанию у всех блоков z-index: 0; и нужно учитывать что это свойство работает в паре с position.

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

css начинает не правильно работать.

В каком смысле неправильно?

@ZoOoO · 07.05.2016, 18:42 **[ТС]**

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
* {
  margin: 0;
  padding: 0;
}
 
#wrapper{
    width: 766px;
    margin: 0 auto;
    
}
 
#menu{
    width: 766px;
    height: 32px;
    background: url(../img/menu.png);
    margin: 0 auto;
    position: relative;
}
 
#menu ul{
    list-style-type: none;
    padding-left: 18px;
    padding-top: 10px;
    font-size: 10px;
}
 
a{
    text-decoration:none;
}
 
#menu ul li{
    display: inline;
}
 
#menu ul li a{
    color: #fefeff;
    margin-right: 20px;  
}
 
#left{
    width: 766px;
    height: 141px;
    background: url(../img/header.png);
    margin: -4px auto ;
    
    position: relative;
}
 
 
 
#der{
    padding-top: 39px;
    padding-right: 20px;
}
 
#menu {z-index: 2};
#left {z-index: 1};

Вот так все работает.Если писать дальше код к другим блокам.То эти блоки начинают странно работать.Ну например позиционированние не работает как должно работать.А если прописать индексы в конце всех кодов.То все работает как надо.

@Stas_Garcia · 07.05.2016, 23:06

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

Вот так все работает.

Элемент в html, написанный после другого - автоматически перекрывает его, если их наложить без z-index'ов.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@Olegg95 4 / 4 / 1 Регистрация: 12.11.2010 Сообщений: 87
	04.05.2016, 15:25
	А что если при помощи относительного позиционирования сделать? position:relative; top:-px? Так по идее можно. А если будет верхний перекрывать, то при помощи z-index это решить можно. 1