position:absolute,绝对定位和相对定位,JQ隐藏和显示
需要在指定位置,用绝对定位。
如果直接写position:absolute,top:0;left:0,那就是以浏览器的左上角为参照了
现在需要在某一个指定位置用绝对定位
解决方法
在需要用绝对定位(position:absolute)的层之外,加一个相对定位的层(position:relative),作为参照
需要注意的是,必须以最近并且有(position:relative)的层作为参照,只能是父级,不能是爷爷级
<span class="nav_one"><a href="#" class="btn-weibo pngFix "> </a>
<span class="nav_two">
<img src="/images/weibo.jpg" />
</span>
</span>
<style>
.nav_one{position:relative;float:left;}
.nav_one span.nav_two{ display:none; position:absolute;z-index:;top:30px;left:-20px}
</style>
<script type="text/javascript">
$(function () {
$(".nav_one").hover(function () { $(this).children(".nav_two").slideDown(200);
}, function () {
$(this).children(".nav_two").slideUp(50); });
});
</script>
效果如下


position:absolute,绝对定位和相对定位,JQ隐藏和显示的更多相关文章
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
- position: absolute;绝对定位水平居中问题
position: absolute;绝对定位水平居中问题 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋.让我们先来看一下CSS中常见的几种让 ...
- position absolute 绝对定位 设置问题
今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- CSS的绝对定位和相对定位
css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top.bottom.left.right一起使用来确定一个标签的位 ...
- 通过案例理解position:relative和position:absolute
w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...
- css中绝对定位和相对定位的区别
先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
- CSS--position:relative和position:absolute
position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认 ...
随机推荐
- TengineWeb服务器项目
- android内核读取file文件
内核读取file文件的方法: char* file_read(const char * file_path) { struct file *file = NULL; //保存打开文件的文件指针变量 s ...
- Sublime Text 3 史上最性感的编辑器
下载 / 安装 windows / MAC OS 官网下载,双击安装,这个都会吧- linux linux下安装,一种办法是从官网下载 tar.bz ,手动安装. 这里介绍用 apt-get 自己主动 ...
- yii 2.0 代码阅读 小记
1.\yii\base\object 设置了get/set属性...使用getName()获取属性名..构造函数中使用config初始化属性 2.\yii\base\Component 继承自Obje ...
- careercup-中等难度 17.6
17.6 给定一个整数数组,编写一个函数,找出索引m和n,只要将m和n之间的元素排好序,整个数组就是有序的.注意:n越小越好,也就是说,找出符合条件的最短序列. 解法: 开始解题之前,让我们先确认一下 ...
- js hash字符串转成json
var a='account.type=1&account.id=&account.dependFlag=0&account.card.companyId=1&acco ...
- 原 Debian设置开机自动启动与关闭
发表于1年前(2013-01-08 13:01) 阅读(2380) | 评论(0) 2人收藏此文章, 我要收藏 赞0 开机自动启动 update-rc.d chkconfig 熟悉debian系统 ...
- Windows批处理(cmd/bat)常用命令小结
转载自:“趣IT”微信公共号 前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常 ...
- Spring中Bean的生命中期与InitializingBean和DisposableBean接口
Spring提供了一些标志接口,用来改变BeanFactory中的bean的行为.它们包括InitializingBean和DisposableBean.实现这些接口将会导致BeanFactory调用 ...
- 警告:Pointer is missing a nullability type specifier (__nonnull or __nullable)
当我们定义某个属性的时候 如果当前使用的编译器版本比较高(6.3+)的话经常会遇到这样一个警告: 而且奇怪的是在某些文件中定义这个属性是没有任何警告的 但是在某些文件中定义同样的属性就会报错: 其实 ...