练习层DIV的定位小实例

2016-02-19 15:38 11 1 收藏

下面是个简单易学的练习层DIV的定位小实例教程，图老师小编详细图解介绍包你轻松学会，喜欢的朋友赶紧get起来吧！

【 tulaoshi.com - Web开发】

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

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

那么怎样让层固定在一个位置,不管分辨率或窗口改变而变化呢？这就是我所要记录的层的定位问题:
建立一个父级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

预览截图：

来源:http://www.tulaoshi.com/n/20160219/1610054.html

上一篇：谈谈J2SE中的序列化之接受默认序列化
下一篇： divcss表单布局五个小技巧控制表单更灵活

看过《练习层DIV的定位小实例》的人还看了以下文章更多>>

Excel定位填充的小技巧

标签：电脑入门

今天突然发现一个定位填充的小技巧，至于能应用到什么地方，对哪些效果有作用，这个还需要大家跟小猪一起在日后的操作中慢慢去总结，接下来，就一起来看看这个技巧吧，个人感觉还是很有学习价值的。工具/原料 Office系列的Excel 步骤/方法首先，我们来看一下这次要用到的数据，在应用过程中，我会说到其中的一些小技巧。我们增...

CSS教程:实例讲解定位Position

标签： Web开发

1. position:static 所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。 #div-1 { position:static;} 2. position:relative 如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文...

java循环练习的简单代码实例

标签：编程语言网络编程

★打印九九乘法表代码如下： public class TestDemo { public static void main(String[] args){ for(int b=1;b10;b++){ for(int a=1;a=b;a++) ...

CSS+DIV设计实例：超酷的竖排导航栏

标签： Web开发

HTML：以下是引用片段： div id="navcontainer" ul id="navlist" li id="active"a href="#" id="current"Item one/a ul id="subnavlist" li id="subactive"a href="#" id="subcurrent"Subitem one/a/li lia href="#"Subitem two/a/li lia href="#"Subitem three/a/li lia href="#"Subitem four/a/li /ul /li lia href="#"Ite...

Dreamweaver CS3 实现多分辨率层定位

标签： Web开发

1、首先你需要到 www.macromedia.com 网站上去下载一个名为CenterLayers 2.3的插件(下载前得先在网站上注册)，大小为8KB（你也可以通过我们网站的留言本索要该插件！）。然后用Exention Manager将插件装上。重新启动Dreamweaver CS3使插件起作用，设定页面中需要定位的层为Layerl，再新建一个透明层，设为Layer2并使其移至窗口中心，将代表La...

查看更多精彩>>