css中的相对定位和绝对定位。

定位标签：position

包含属性：relative(相对) absolute(绝对)

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

文章出处：标准之路(http://www.aa25.cn/div_css/905.shtml)

这个例子，讲的不错！！

<!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" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
  if (document.all&&document.getElementById) {
  navRoot = document.getElementById("menu");
  var allli = navRoot.getElementsByTagName("li")
  for (i=0; i<allli.length; i++) {
  node = allli[i];
  node.onmouseover=function() {
  this.className+="current";
  }
  node.onmouseout=function() {
  this.className=this.className.replace("current", "");
  }
  }
  }
}
window.onload=startList;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li.current ul { display:block;}
#menu ul li:hover ul { display:block;}/*#menu ul li:hover ul这个样式比较难理解，它的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block，指的是鼠标划过时显示这块内容，这也实现我们今天想要的效果。其中的:hover和前边说的链接一样，同属于伪类，但有一点注意，目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现，我们定义一个类.current（自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。所以需要加上JS和样式#menu ul li.current ul { display:block;}。*/
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>s

CSS 相对定位 绝对定位的更多相关文章

  1. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  2. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  3. CSS相对定位|绝对定位(五)之z-index篇——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1855 补充于2016 ...

  4. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  5. HTML 学习笔记 CSS样式（相对定位 绝对定位）

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  6. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  7. Day042---浮动 背景图设置 相对定位绝对定位

    1.练习浮动 2.文本属性和字体属性 文本对齐 ​ text-align left 左对齐 right 右对齐 center 中心对齐 justify 两边对齐 只适应于英文 text-indent ...

  8. cordova 导致css中绝对定位top:0会被顶到视图之外

    IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...

  9. z-index 可以使用负值，CSS相对定位、绝对定位利器

    很多技巧都是在工作中测试出来的,我搞DIV+CSS前端开发,现在是安卓收藏家,日常也有很多技巧,刚刚突然发现的这个技巧,真的很实用:Z-index值可以使用负值. z-index是个很强大的属性,是个 ...

随机推荐

  1. vue中bus.$on事件被多次绑定

    问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) b ...

  2. numpy小记

    import numpy as np # a=np.array([[1,3,2],[4,5,6]]) print(a) a=np.arange(1,13).reshape((3,4))#生成一个3行4 ...

  3. leetcode 51 N皇后问题

    代码,由全排列转化而来,加上剪枝,整洁的代码: 共有4个变量,res(最终的结果),level,当前合理的解,n皇后的个数,visit,当前列是否放过皇后,由于本来就是在新的行方皇后,又通过visit ...

  4. GIS开源程序收集

    每一个项目包含以下信息: 名称 主题 分类 描述 开始时间 语言 许可 演示网址 项目网址 成熟度 活跃度 评价   分类包括:GIS基础函数库.GIS控件.GIS桌面程序.GIS数据引擎.WEBGI ...

  5. zabbix报警后不会自动消除解决

    http://www.cnblogs.com/zhongkai-27/p/9984597.html

  6. 【C++学习笔记】static 关键字

    (阅读<C++ primer plus>可知 C++的static关键字跟Java还是很类似的) 为什么需要static关键字:在文件A中定义的非局部变量language,在文件B中可以通 ...

  7. activiti随笔记录

    核心组件介绍 关键对象 1.      Deployment:流程部署对象,部署一个流程时创建. 2.      ProcessDefinitions:流程定义,部署成功后自动创建. 3.       ...

  8. gin框架教程一: go框架gin的基本使用

    我们在用http的时候一般都会用一些web框架来进行开发,gin就是这样的一个框架,它有哪些特点呢 一:gin特点 1.性能优秀2.基于官方的net/http的有限封装3.方便 灵活的中间件4.数据绑 ...

  9. beego框架学习(二) -路由设置

    路由设置 什么是路由设置呢?前面介绍的 MVC 结构执行时,介绍过 beego 存在三种方式的路由:固定路由.正则路由.自动路由,接下来详细的讲解如何使用这三种路由. 基础路由 从beego1.2版本 ...

  10. （转）GIS中的4D产品（DLG、DRG、DEM、DOM）

    DLG 数字线划地图(DLG, Digital Line Graphic):是与现有线划基本一致的各地图要素的矢量 数据集,且保存各要素间的空间关系和相关的属性信息. 在世字测图中,最为常见的产品就是 ...