练习层DIV的定位小实例

几人不知诸葛亮

几人不知诸葛亮

2016-02-19 15:38

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

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

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

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

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

预览截图:

展开更多 50%)
分享

猜你喜欢

练习层DIV的定位小实例

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

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

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

s8lol主宰符文怎么配

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

css层固定位置练习

Web开发
css层固定位置练习

JQuery 小练习(实例代码)

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

lol偷钱流符文搭配推荐

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

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

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

CSS教程:实例讲解定位Position

Web开发
CSS教程:实例讲解定位Position

lolAD刺客新符文搭配推荐

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

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

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

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

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