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

<head>

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

<title>导航代码position：relative</title>

<style type="text/css">

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

.a1:hover{ overflow:visible}

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

.a2:hover{ overflow:visible }

.a3{ width:120px; height:40px; background-color:#0F0; margin-left:120px; cursor:pointer;}

.a4{ width:120px; height:40px; background-color:#FF0; position:relative; cursor:pointer; top:40px; overflow:hidden;}

.a4:hover{ overflow:visible }

.a5{ width:120px; height:40px; background-color:#F90; margin-left:120px; cursor:pointer;}

.a6{ width:120px; height:40px; background-color:#63F; position:relative; cursor:pointer; top:40px; overflow:hidden;}

.a6:hover{ overflow:visible}

.a7{ width:120px; height:40px; background-color:#999; margin-left:120px; cursor:pointer;}

</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>

</body>

</html>

导航代码position：relative的更多相关文章

  1. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  2. "position:relative"在IE中的Bug

    当子元素过高导致父元素出现滚动条时,它并不会像预期的那样呆在父元素里,而是浮在父元素之上,并且位置不随滚动条的移动而改变.根源就是子元素的"position:relative".目 ...

  3. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  4. [置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;

    都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...

  5. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  6. js左侧三级菜单导航代码

    效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

  8. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. [bzoj3155]Preprefix sum(树状数组)

    3155: Preprefix sum Time Limit: 1 Sec  Memory Limit: 512 MBSubmit: 1183  Solved: 546[Submit][Status] ...

  2. 页面加载后resize页面布局

    在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...

  3. Debian 上面五分钟搭建 WordPress - 博客/网站平台

    没有废话,步骤如下: 下载安装软件,MySQL Apache PHP sudo aptitude install mysql-server mysql-client ##安装 MySQLsudo ap ...

  4. 如何让popWindow显示在view上方

    看了bilibili的客户端搜索按钮,很喜欢大爱!自己也想做个类似的(相似度 10% 哈哈) popWin的出现退出动画也可以自己设定,用过其方法setAnimationStyle(R.style.x ...

  5. laravel 中 与前端的一些事5 之解决缓存问题:version

    Version的主要目的就是解决浏览器的缓存问题,在这个方面,Elixir给出的解决方案很完美 应用场景:当我们的css或者js重新更新了,我们需要告诉浏览器我们不要缓存的css或js静态文件样式时, ...

  6. web 标准相关

    摘自:http://www.cnblogs.com/artech/p/restful-web-api-01.html 一.TCP/IP与HTTP TCP/IP是以IP和TCP协议为核心的一整套网络协议 ...

  7. jQuery经典面试题及答案精选（转）

    jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...

  8. jquery 常用基础方法

    1 jquery常用方法: 2 取得标签元素里面内容与修改: 3 1.text()方法: 4 $(document).ready(function(){ 5 //alert("文档加载完毕& ...

  9. Spring 7大功能模块的作用[转]

    核心容器(Spring core) 核心容器提供Spring框架的基本功能.Spring以bean的方式组织和管理Java应用中的各个组件及其关系.Spring使用BeanFactory来产生和管理B ...

  10. iOS_autoLayout_Masonry

        概述     Masonry是一个轻量级的布局框架与更好的包装AutoLayout语法.   Masonry有它自己的布局方式,描述NSLayoutConstraints使布局代码更简洁易读. ...