如何控制一个浮动层在某一个标签的下方

wenlongkan 2012-07-27 10:49:59

例如：<html><title>测试浮动窗口</title><head></head><body><from id='form1'><div id='div_location'></div></form><div><form id='form2'><div id='div_location2'><input type='file' id='file_upload' name='file_upload' /></div></form></div></body></html>

我想把ID=div_location2这个层固定到id=div_location这个层的下面，请大侠们指点一下！如何实现？得适应不同的浏览器和显示屏！

...全文

242 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

wenlongkan 2012-07-27

打赏
举报

先谢谢大家了，大家也看到了，页面有两个form 第一个form里面还有很多标签！id=div_location只是在这些标签的中间一个而已！~ id=div_location2这个DIV是再页面最下面的！我要把它定位到id=div_location下面的！各位大侠~~、再想想招！~、补充一下：我是想点击某一个按钮、然后div_location2才出现在div_location下面的！

awanghjun 2012-07-27

打赏
举报



<style type="text/css" media="screen">

	.warp {position: relative;}

	.warp .moderOne {position: absolute;z-index:1;width:200px;height:100px;background:#ddd;}

	.warp .moderTwo {position: absolute;}

</style>

<body>

	<div class="warp">

		<from id='form1'><div id='div_location' class="moderOne">上面</div></form>

		<div>

			<form id='form2'>

				<div id='div_location2' class="moderTwo"><input type='file' id='file_upload' name='file_upload' /></div>

			</form>

		</div>

	</div><!-- / -->

</body>

</html>

竹贤侄 2012-07-27

打赏
举报

这个 div_loaction2要放到 div_location的里面

然后 #div_location{position:relative;}
#div_location2{position:absolute;top:(div_lcation的高度)px;left:0;}

小昭 2012-07-27

打赏
举报

给他俩加z-index

it491328322 2012-07-27

打赏
举报

使用js计算你的div_location的坐标啊。。。算出坐标就好办了嘛。。。直接绝对定位，设置left和top不就OK了嘛。。。

我给你看个我胡乱写的简单例子吧：



<html>

	<head>

		<title>绝对定位</title>

		<style>

			#msg {

				position: absolute;

				width:200px;

				height:150px;

				border:3px solid blue;

				padding: 5px 5px 5px 5px;

				display:none;

				color:red;

				background-color:white;

			}

			body {

				padding-left:100px;

				padding-top:100px;

			}

			td {

				width:80px;

				height:80px;

			}

		</style>

		<script src="jquery-1.2.6.pack.js"></script>

	</head>

	<body>

		<div>

			<table border="1">

				<tbody>

					<tr>

						<td>Im's a TD11111</td>

						<td>Im's a TD22222</td>

						<td>Im's a TD33333</td>

						<td>Im's a TD44444</td>

						<td>Im's a TD55555</td>

						<td>Im's a TD66666</td>

					</tr>

					<tr>

						<td>Im's a TD77777</td>

						<td>Im's a TD88888</td>

						<td>Im's a TD99999</td>

						<td>Im's a TD00000</td>

						<td>Im's a TD12312</td>

						<td>Im's a TD45645</td>

					</tr>

					<tr>

						<td>Im's a TD78989</td>

						<td>Im's a TD54743</td>

						<td>Im's a TD24674</td>

						<td>Im's a TD34579</td>

						<td>Im's a TD23473</td>

						<td>Im's a TDsfhu7</td>

					</tr>

					<tr>

						<td>Im's a TD!</td>

						<td>Im's a TD!</td>

						<td>Im's a TD!</td>

						<td>Im's a TD!</td>

						<td>Im's a TD!</td>

						<td>Im's a TD!</td>

					</tr>

				</tbody>

			</table>

		</div>

		

		<div id="msg"></div>

	</body>

	<script>

		$("td").bind('mouseover', function(){

			var str = "<b>当前td的内容：" + $(this).html() + "<br>此处可以用于显示ajax从后台获取数据。</b>";

			var right = $(this).get(0).getBoundingClientRect().right - 40;

			var top = $(this).get(0).getBoundingClientRect().top + 40;

			$("#msg").html(str).css({"left":right + "px","top": top + "px"}).show();

		});

		

		$("td").bind('mouseout', function(){

			$("#msg").hide();

		});

	</script>

</html>