Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.52/29: Рейтинг темы: голосов - 29, средняя оценка - 4.52
Proffessional
Особый статус
693 / 141 / 5
Регистрация: 16.07.2009
Сообщений: 2,102
Записей в блоге: 1
1

Очень срочно! z-index и relative position

26.06.2011, 12:53. Просмотров 5381. Ответов 4

Ребята, помогите! Уже за____ это дело!
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#infoHold {
    background:#06F;
    position:relative;
    z-index:0;
    top:0px;
    left:0px;
    font-family:Arial;
    font-size:15px;
    color:#0C3;
}
#itemHold {
    position:relative;
    display:block;
    z-index:100;
    top:0px;
    left:0px;
    width:250px;
}
#itemHold ul li {
    background:#FC0;
    list-style:none;
    border-bottom:solid #CCC 1px;
    border-top:solid #FF0 1px;
    padding:10px;
}
#itemHold ul {
    margin-top:0px;
    margin-left:-43px;
}
body {
    position:absolute;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
//state = true;
function slideMenu(state){
    if(state == true){
        $('#itemHold').slideUp(1000);
        state = false;
    }
    else if(state == false){
        $('#itemHold').slideDown(1000);
        state = true;
    }
}
</script>
<title>Queerrr...</title>
</head>
<body>
<div style="position:relative">
  <table id="infoHold" width="250px" border="0" onclick="slideMenu(false)">
    <tr>
      <td width="210">Somethink</td>
      <td width="40">think</td>
    </tr>
  </table>
  <div id="itemHold" onclick="slideMenu(true)">
    <ul>
      <li>Moscow</li>
      <li>London</li>
      <li>Barselona</li>
      <li>New York</li>
      <li>Rome</li>
      <li>Tokio</li>
      <li>Toronto</li>
      <li>City</li>
    </ul>
  </div>
</div>
<div style="position:absolute; top:100; left:100;"> </div>
</body>
</html>
Здесь в Диве таблица и список. Если позиционирование у них Absolut, то они друг друга перекрывают, так как это и должно быть согласно z-index, но если позиционирование realtive, а только оно мне и нужно, то они не перекрывают друг друга! Что это такое?!
ПОМОГИТЕ!!!!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.06.2011, 12:53
Ответы с готовыми решениями:

Z-index с position relative отказывается что-то делать
Добрый вечер. Решил переписать стили и сделать более менее адаптивный сайт под...

Блоки relative и position внутри блока с position: relative
Всем привет! Я новичок, верстаю свой первый сайт (http://cosmetolog.cu.cc/)....

В каком случае рекомендуется использовать :margin,padding,float,position:absolute,position:relative
В каком случае рекомендуется использовать...

Как связать блоки position: absolute; и position: relative; ?
Имеется слайдер position: absolute;. Картинка слайдера уменьшается...

Не могу разобраться с position-relative и position-absolute
Дано: в блоке со свойствами position-relative помещен блок со свойствами...

4
Vovan-VE
13161 / 6546 / 1038
Регистрация: 10.01.2008
Сообщений: 15,070
26.06.2011, 13:00 2
absolute убирает элемент из нормального потока, а relative оставляет в потоке. В обоих случаях позиционирование идет относительно ближайшего не-static родителя.

Наверно, надо одного из них absolute, а другого relative, смотря кто в потоке, а кто поверх вылезает надо всеми.
1
Proffessional
Особый статус
693 / 141 / 5
Регистрация: 16.07.2009
Сообщений: 2,102
Записей в блоге: 1
26.06.2011, 13:07  [ТС] 3
Vovan, понимаешь какая штука, нужно сделать всего лишь выпадающий список-менюшку на jQuery. Это должна быть замена select, но таким образом, чтобы этот список появлялся над table, в которой будет отображаться отмеченное значение, и перекрывал её. и расположить его нужно точно по середине страницы. Значит если поставиь, скажем, на div-контейнер position:absolute, то его невозможно будет поставить в середину, как это можно было бы сделать со Statiс table. Мучаюсь, нужно срочно это сделать...
0
Vovan-VE
13161 / 6546 / 1038
Регистрация: 10.01.2008
Сообщений: 15,070
26.06.2011, 13:08 4
Цитата Сообщение от Vovan-VE Посмотреть сообщение
В обоих случаях позиционирование идет относительно ближайшего не-static родителя.
Бред написал. absolute относительно не-static родителя, а relative относительно его стартовой точки в нормальном потоке.

Добавлено через 58 секунд
Цитата Сообщение от Proffessional Посмотреть сообщение
Это должна быть замена select, но таким образом, чтобы этот список появлялся над table
Тогда их надо собрать в еще одного родителя и ему сделать relative.
1
Proffessional
Особый статус
693 / 141 / 5
Регистрация: 16.07.2009
Сообщений: 2,102
Записей в блоге: 1
26.06.2011, 13:12  [ТС] 5
Цитата Сообщение от Vovan-VE Посмотреть сообщение
absolute относительно не-static родителя
О_о Вот это да... Сколько этим занимаюсь, а этого не помнил Спасибо, Vovan!

Добавлено через 3 минуты
Ага, заработал! Спасибо большое!
1
26.06.2011, 13:12
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.06.2011, 13:12

position: relative; в IE
есть меню состоящие из div`ов cо свойством display:none при наведении на некую...

Div и position: relative
Ребята, помогите разобраться новичку. &lt;div id=&quot;header_logo&quot;&gt; ...

position absolute под relative
Реально ли сделать, чтобы абсолютный блок лежал под relative в таком коде? ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru