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

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

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

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问http://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

预览截图：

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

上一篇： QQ非主流伤感分组名_原来快乐不可以假装
下一篇： HTML中使用空格排版的问题

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

轻松学DIV教程（div＋css布局）

标签： Web开发

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、h...

CSS教程：“自动定位”的应用

标签： Web开发

在使用css创建类似title属性提示框，常见的方法是使用绝对定位，用负值使其偏移于屏幕之外，在鼠标经过时定义一个合适的正值使其显示到我们所需要的位置。但是，有一个我们不常用的属性我们常常将其搁置一旁而未加利用－－auto。《Auto Positioning for Absolute Elements 》这篇文章详细介绍了该属性的使用方法，本人曾翻译了此文－－《绝...

Div CSS实例教程：页面制作方法

标签： Web开发

做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。一、框架页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。二、布局（以下...

CSS教程:“自动定位”的应用

标签： Web开发

在使用css创建类似title属性提示框，常见的方法是使用绝对定位，用负值使其偏移于屏幕之外，在鼠标经过时定义一个合适的正值使其显示到我们所需要的位置。但是，有一个我们不常用的属性我们常常将其搁置一旁而未加利用－－”auto”。《Auto Positioning for Absolute Elements 》这篇文章详细介绍了该属性的使用方法，本人曾翻译了此文－－《绝...

css教程:DIV垂直居中的办法

标签： Web开发

经过今天一翻改进，终于找出了解决DIV垂直居中的办法。 !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/ht...

查看更多精彩>>