<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>导航position：absolute</title>

<style type="text/css">

.a1{ width:120px; height:40px; background-color:#F00; position:absolute; cursor:pointer;  overflow:hidden}

.a1:hover{

    overflow:visible; }

.a2{ width:120px; height:40px; background-color:#F69; position:absolute; cursor:pointer; top:40px; overflow:hidden;}

.a2:hover{

    overflow:visible}

.a3{ width:120px; height:40px; background-color:#63F; position:absolute; cursor:pointer; left:120px;}

.a4{ width:120px; height:40px; background:#0F0; position:absolute; cursor:pointer; top:80px; overflow:hidden}

.a4:hover{

    overflow:visible}

.a5{ width:120px; height:40px; background:#0FF; position:absolute; cursor:pointer; left:120px;}

.a6{ width:120px; height:40px; background-color:#0C3; position:absolute; cursor:pointer; top:120px; overflow:hidden}

.a6:hover{

    overflow:visible}

.a7{ width:120px; height:40px; background-color:#CF6; position:absolute; cursor:pointer; left:120px;}

</style>

</head>

<body>

<div class="a1">

<div class="a2"><div class="a3"></div></div>

<div class="a4"><div class="a5"></div></div>

<div class="a6"><div class="a7"></div></div>

</div>

</div>

</body>

</html>

导航position：absolute的更多相关文章

  1. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  2. 关于position:absolute的困惑

    今天在学习<精通css>时碰到一个问题,第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中,为了创建导航条的下拉菜单,文中提到的方法是:先设置下拉菜单的positi ...

  3. 解决绝对定位div position: absolute 后面的<a> Link不能点击

    今天布局的时候,遇到一个bug,当DIV设置为绝对定位时,这个div后面的相对定位的层里面的<a>Link标签无法点击. 网上的解决方案是在绝对定位层里面添加:pointer-events ...

  4. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  5. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  6. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

  7. css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

  8. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  9. position:absolute和float会隐式的改变display类型

    position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让 ...

随机推荐

  1. 使用rman迁移数据库到异机

    迁移数据库的方法有多种,较为常用的则是使用RMAN来迁移.使用RMAN迁移数据库属于数据库的物理备份与恢复范畴,整个过程中数据库的相关信息是完整地镜像.因此,基于此种方式还原恢复的数据库用于测试会使得 ...

  2. JQuery_过滤选择器

    一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...

  3. MyBatis关联查询 (association) 时遇到的某些问题/mybatis映射

    先说下问题产生的背景: 最近在做一个用到MyBatis的项目,其中有个业务涉及到关联查询,我是将两个查询分开来写的,即嵌套查询,个人感觉这样更方便重用: 关联的查询使用到了动态sql,在执行查询时就出 ...

  4. 10个优秀的JavaScript Web UI库/框架推荐

    在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率. 本文为你带来10款非常优秀的基于JavaScript的Web U ...

  5. php常用加密算法

    php加密函数: 不可逆的加密函数为:md5().crypt() md5() 用来计算 MD5 哈稀.语法为:string md5(string str); crypt() 将字符串用 UNIX 的标 ...

  6. Web Service平台概述

    Web  Service平台主要涉及的技术有SOAP(Simple  Object  Access  Protocal,简单对象访问协议), WSDL(Web  Service  Descriptio ...

  7. Node.js 创建HTTP服务器

    Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...

  8. SVN - 忽略已经提交的文件

    1.在本地删除要忽略的文件 2.与资源库同步,提交删除的文件 3.忽略文件

  9. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

  10. iOS中FMDB的使用

    1在日常的开发中,我们需要用到离线缓存将数据信息存入数据库,在没有网络的时候进行加载,而我们IOS用的就是sqlite3数据库,用原生的sql我们也能实现,但是书写起来比较麻烦,尤其是其它语言转过来的 ...