练习层DIV的定位小实例

几人不知诸葛亮

几人不知诸葛亮

2016-02-19 15:38

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

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

实例阐述:

!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

预览截图:

展开更多 50%)
分享

猜你喜欢

练习层DIV的定位小实例

Web开发
练习层DIV的定位小实例

CSS教程:练习层DIV的定位小实例

Web开发
CSS教程:练习层DIV的定位小实例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

css层固定位置练习

Web开发
css层固定位置练习

JQuery 小练习(实例代码)

Web开发
JQuery 小练习(实例代码)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS层的应用及其定位(绝对定位和相对定位)

Web开发
CSS层的应用及其定位(绝对定位和相对定位)

div层被flash层遮盖问题解决思路

Web开发
div层被flash层遮盖问题解决思路

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

谈谈J2SE中的序列化之接受默认序列化

谈谈J2SE中的序列化之接受默认序列化

divcss表单布局五个小技巧控制表单更灵活

divcss表单布局五个小技巧控制表单更灵活
下拉加载更多内容 ↓