<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. hihoCoder 1385 : A Simple Job（简单工作）

    hihoCoder #1385 : A Simple Job(简单工作) 时间限制:1000ms 单点时限:1000ms 内存限制:256MB Description - 题目描述 Institute ...

  2. 【OOAD】OOP的主要特征

    聚合 “虚包含” 不明确组合 “实包含” 明确 抽象(abstract)抽象:抽象是通过特定的实例抽取共同特征以后形成概念的过程.它强调主要特征,忽略次要特征.一个对象是现实世界中一个实体的抽象,一个 ...

  3. python成长之路【第三篇】：函数

    1.函数基础 函数是python为了代码最大程度的重用和最小化代码冗余而提供的基本程序结构. 函数是一种设计工具,它能让程序员将复杂的系统分解为可管理的部件. 函数用于将相关功能打包并参数. pyth ...

  4. javascript模仿php 函数 trim ltrim rtrim (原创)

    javascript模仿php 函数 trim  ltrim rtrim,去除字符串两边空格或其他符号 本文地址:js trim js php trim function trims(){ this. ...

  5. 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

    找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...

  6. css优雅降级和渐进增强

    今天看前端公众号发布的文章,学到了几个新词 1.modernizr 2.@support 3.优雅降级 其中第三个“优雅降级”,如此文艺的名字居然还是第一次听到.度娘了一下,发现[优雅降级],[渐进增 ...

  7. JDE Develop Server分别安装DV PY PD后WEBSERVER问题

    一般安装时一次性安装完DV\PY\PD环境后,再安装WEBSERVER时只需要修改一次配置文件即可,但如果先安装顺序如下: DV->WEBSERVER->PY 此时,配置程序被初始化,必须 ...

  8. Windows与Linux主机之间的连接和交互工具

    1.Putty 远程连接Linux主机 Windows主机上安装putty,工具打开后显示如下: 输入要连接的Linux主机的IP地址,点击Load,连接主机后输入用户名密码,即可登录Linux主机 ...

  9. linux 基本命令操作

    1.ls 命令 ls -a  列出所有文件,包括隐藏文件 ls -l  列出文件详细信息 ls -r 列出所有文件包括文件夹 查询具体文件可以在命令后面加  |grep 要匹配的字符串,方便我们查找, ...

  10. 【源码】c#编写的安卓客户端与Windows服务器程序进行网络通信

    NetworkComms网络通信框架序言 用c#开发安卓程序 (xamarin.android)系列之三 源码(包含客户端与服务器端所有工程文件)    数据库文件 为了方便您测试,我临时搭建了一个服 ...