练习层DIV的定位小实例

2016-02-19 15:38 8 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

预览截图：

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

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

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

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

AutoCAD2018填充图形练习实例

标签： cad教程 autocad教程 CAD

AutoCAD2013填充图形练习实例 AutoCAD2013创建房屋及填充图形练习最终效果图：图01 1.启动AutoCAD2013中文版，在AutoCAD2013常用工具栏中选择直线工具，绘制外轮廓，如图所示。图02 2.绘制窗户，使用AutoCAD2013矩形工具和直线工具先绘制出一个窗户，图03 3.使用矩形...

Dreamweaver 实现多分辨率层定位

标签： Web开发

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

CSS实例教程:定位(position)布局页面

标签： Web开发

注：在做这节教程的时候，我又上网查了相关资料，看了大量的文章，做了大量的测试，最后总结出下面这些文字，洋洋洒洒一整篇，不过需要大家一句话一句话的看，一定要仔细喽！还有对于课程中的说的，最好一边看，一边练，不练绝对看不懂！定位(position) 布局页面说容易非常容易，只需要记住这节课最后一句话就可以了，说困难，那是相当的...

CSS制作网页实例:DIV仿框架结构

标签： Web开发

[ 参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ] [ 操作系统：Windows] 先看代码：运行代码框 !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"headmeta ht...

查看更多精彩>>