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

2016-02-19 23:34 25 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐CSS教程:练习层DIV的定位小实例,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.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=""
    div style=" width:200px; background:#DDDDDD"北京 上海 广州/div
  /div
/div
/body
/html

预览截图:

 

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

延伸阅读
标签: Web开发
关于用CSS来实现元素的定位问题,其实很多人对此都是一知半解,没有形成一个统一的认识,CSS对元素的定位包括相对定位和绝对定位,同时,还可以把相对定位和绝对定位结合起来,形成混合定位,我收集相关资料总结了一下: 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 exam...
标签: Web开发
做前端也有几年时间了,不敢说能把他看地多透,但是多多少少还是有些自己的东西。就制作而言,我将一张页面分为四层:框架、布局、模块、列表和数据块。 一、框架 页面的框架基本上都是:“头”、“主体”、“尾”。但是对于一些页面如Tudou.com,由于布局的需要,还应在“头”的下面还要加个“菜单”。 二、布局(以下...
标签: Web开发
在使用css创建类似title属性提示框,常见的方法是使用绝对定位,用负值使其偏移于屏幕之外,在鼠标经过时定义一个合适的正值使其显示到我们所需要的位置。但是,有一个我们不常用的属性我们常常将其搁置一旁而未加利用--auto。《Auto Positioning for Absolute Elements 》这篇文章详细介绍了该属性的使用方法,本人曾翻译了此文--《绝...
标签: 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...
标签: Web开发
在使用css创建类似title属性提示框,常见的方法是使用绝对定位,用负值使其偏移于屏幕之外,在鼠标经过时定义一个合适的正值使其显示到我们所需要的位置。但是,有一个我们不常用的属性我们常常将其搁置一旁而未加利用--”auto”。《Auto Positioning for Absolute Elements 》这篇文章详细介绍了该属性的使用方法,本人曾翻译了此文--《绝...

经验教程

258

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部