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. UE4 使用VaRest的最佳实践

    背景介绍: 用Node.js,express,Mongo搭建了一个简单后台,为项目提供REST风格的API服务. 第一个查询是通过Get进行,返回一个json字符串. 在虚幻里使用VaRest来进行访 ...

  2. 堤堤云海外IDC

    http://www.ddyidc.com 堤堤云网络全球互联 堤堤云网络致力为客户提供优质的海外服务器租用服务,各种专线解决方案. 产品分类:服务器租用.IP租用.托管.专线传输.防御.优质回国CN ...

  3. 原生Js_实现简单选项卡功能

    javascript实现选项卡功能,在<script>...</script>中编写代码 实现步骤 a)获得各操作的dom对象: b)在所有按钮对象上添加单击事件: c)设置所 ...

  4. python学习之路（11）

    切片 取一个list或tuple的部分元素是非常常见的操作.比如,一个list如下: >>> list=['zh','cn','sqlmap','nmap','znamp'] 取前3 ...

  5. SpringMVC参数传递 HttpServletRequest，HttpServletResponse和HttpSession

    SpringMVC参数传递 HttpServletRequest,HttpServletResponse和HttpSession 2017-11-27 16:44:51 douunderstand 阅 ...

  6. 小程序踩坑之获取不到e.target.dataset的值

    在页面与js传值中我们经常用到data-id="1"的方式,然后通过e.target.dataset.id取id的值今天在获取值时怎么也取不到,后来发现e对象有currentTar ...

  7. Excel中使用Power Query获取网页json数据

    Power Query下载地址 https://www.microsoft.com/zh-CN/download/details.aspx?id=39379 使用步骤 1.数据->其它源-> ...

  8. DS博客大作业--树

    1.树的存储结构说明 树节点结构体 data:文件名 brother:兄弟节点 child:孩子节点 type:节点的类型,0为文件,1为目录 h:节点所在的层次 2.树的函数说明 头文件 函数1:C ...

  9. 11、kubernetes之dashboard

    一.准备dashboard使用的证书 # cd /etc/kubernetes/pki/ pki]# (umask 077; openssl genrsa -out dashboard.key 204 ...

  10. oracle性能诊断排查

    https://blog.csdn.net/qq_30553235/article/details/78809872 查看oracle用户权限: 1.查看不同用户的连接数 select usernam ...