Тема: z-index и table
Показать сообщение отдельно
  #1 (permalink)  
Старый 27.05.2012, 14:01
Интересующийся
Отправить личное сообщение для it_tech Посмотреть профиль Найти все сообщения от it_tech
 
Регистрация: 27.05.2012
Сообщений: 20

z-index и table
есть код (в конце сообщения)
нужно чтобы выпадающий
<input type="text" id="searchField" placeholder="Categories">
не сдвигал элемент таблицы 111, а появлялся поверх
как правильно сделать?




<!DOCTYPE html>
<html>
<head>
	<title>jQM Autocomplete</title>
	<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
	<meta name="viewport" content="width=device-width" />
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />

	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
	<script src="jqm.autoComplete-1.3.js"></script>


<style>
   #layer0,#layer1 {   position:relative; } 
   #layer0 { z-index: 0; }
   #layer1 { z-index: 99999; }
 
  </style>
  
</head>

<body>

	<div data-role="page" id="mainPage">
   	<div data-role="content">
 
			 
		<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>		
    
     <div id="layer1">
    <input type="text" id="searchField" placeholder="Categories">
	<ul id="suggestions" data-role="listview" data-inset="true"></ul>
  
    </div>
                
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td >
    
     <div id="layer0">
    111
     </div>
        
    </td>
    <td>&nbsp;</td>
  </tr>
</table>

			 
  
		</div>

	</div>

	<script>

		$("#mainPage").bind("pageshow", function(e) {

			var availableTags = ['24', 'about me', 'Adobe', 'AIR', 'AJAX', 'Android', 'Apple', 'Aptana', 'autoComplete', 'Bflex-BFusion', 'Blackberry Playbook', 'Blog Housekeeping', 'c25k', 'CFConversations', 'CFinNC', 'cfObjective', 'CFUnited', 'Clients', 'ColdFusion', 'ColdFusion Builder', 'Cooking and Recipes', 'CSS', 'D2WC', 'dribbbleCFC', 'Eclipse', 'Ember.js', 'Emile', 'ExtendScript', 'Family', 'Fireworks', 'Flash', 'Flex', 'foursquareCFC', 'From a former designer', 'Giveaways', 'Goba', 'Hardware', 'Illustrator', 'instagramCFC', 'iPhone', 'JavaScript', 'job openings', 'jobs', 'jQuery', 'jQuery Mobile', 'jQuery Mobile Boilerplate', 'kloutCFC', 'Lost', 'MAX', 'mobile', 'Movies and Reviews', 'ncfug', 'openExchangeRateCFC', 'Palm Pre', 'pastebinCFC', 'PhoneGap', 'Photoshop', 'picasaCFC', 'podcast', 'presentations', 'projects', 'reading', 'regular expressions', 'RIAUnleashed', 'Shrinkadoo', 'shrinkURL', 'SQL', 'swipeButton', 'technology', 'textCounter', 'the internet', 'ThemeRoller', 'tumblrCFC', 'Undelivrnator', 'video', 'Wallpapers', 'web development', 'Whiskerino', 'XCode and Interface Builder', 'XUIJS'];

			$("#searchField").autocomplete({
				target: $('#suggestions'),
				source: availableTags,
				callback: function(e) {
					var $a = $(e.currentTarget);
					$('#searchField').val($a.text());
					$("#searchField").autocomplete('clear');
				},
				link: 'target.html?term=',
				minLength: 1
			});
		});
	</script>

</body>
</html>
Ответить с цитированием