练习层DIV的定位小实例

 层的定位是很多人比较困扰的问题，点击弹出层会随着分辨率的改变层的位置也变动。

用实际截图来描述问题现象：

那么怎样让层固定在一个位置,不管分辨率或窗口改变而变化呢？这就是我所要记录的层的定位问题:
建立一个父级div，不改变x、y，然后在这个父级div里面包含一个子级div，在这个子级div里随便改变它的位置（设置top和left值）。

实例阐述：

<!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=gb2312" />
<title>关于层的定位</title>
</head>
<body>
<div style="width:800px; margin:0 auto; background:#FFFFCC; overflow:auto; font-size:12px">
  <div style="margin:100px 0 100px 100px"><a href="#">更多城市>></a></div>
  <div style="position:relative; width:0; height:0">
    <div style="position:absolute; top:-95px; left:130px; width:200px; background:#DDDDDD">北京 上海 广州</div>
  </div>
</div>
</body>
</html>

预览截图：

 

时间： 2024-10-31 12:39:33

练习层DIV的定位小实例的相关文章

JavaScript实现可拖拽的拖动层Div实例_javascript技巧

本文实例讲述了JavaScript实现可拖拽的拖动层Div.分享给大家供大家参考.具体如下: 这是一个完美的JS拖拽效果,带拖尾的JavaScript拖动层代码,经过了多次优化修正,复制节点的方法不错,值得JS爱好者学习,同时代码修正了给拖拽元素加ondblclick事件无效的问题,兼容多种浏览器,拷贝代码即可运行使用. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

JS当前页面登录注册框,固定DIV,底层阴影的实例代码_javascript技巧

这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!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"&

html-CSS关于div布局的小问题,请教了,谢谢

问题描述 CSS关于div布局的小问题,请教了,谢谢 <head> <style> .ABC{width:100px; height:100px; background:red; margin:auto; margin-left:20px;} </style> </head> <body> <div class="ABC"></div> </body> </html> 为什么居中

DIV CSS网页布局实例：十步学会用CSS建站

css|网页 Update:本篇已得到原作者Steve Dennis的翻译准予,在此Jorux表示感谢! 本教程主要参考Creating a CSS Layout from scratch,由Jorux翻译,以意译为主,其间加入了不少Jorux的个人观点,省略了一些多余的说明,请读者明鉴. 目录: 第一步:规划网站,本教程将以图示为例构建网站: 第二步:创建html模板及文件目录等: 第三步:将网站分为五个div,网页基本布局的基础: 第四步:网页布局与div浮动等: 第五步:网页主要框架之外的

jquery实现弹出层遮罩效果的简单实例

 这篇文章主要介绍了jquery实现弹出层遮罩效果的简单实例.需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <input type="button" value="高级搜索" id="click_test4" />"; var content4 = "<center>高级搜索</center><form action='' method='post' id='formUse

js页面滚动时层智能浮动定位实现

<!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-

JQuery入门基础小实例(1)_jquery

先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <

jquery动态创建div与input的实例代码_jquery

无意中发现的,做为收藏,以备后绪查看时用. 实例如下: <html> <head> <title>jjquery动态创建div与input</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script> <!--动态创建div--> $(function (){ $(&

学习小实例--滚动条的简单实现_经验交流

效果: 代码: <!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="