需要在指定位置,用绝对定位。

如果直接写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隐藏和显示的更多相关文章

  1. position:absolute绝对定位解读

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

  2. position: absolute;绝对定位水平居中问题

    position: absolute;绝对定位水平居中问题 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋.让我们先来看一下CSS中常见的几种让 ...

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

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

  4. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  5. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  6. CSS的绝对定位和相对定位

    css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top.bottom.left.right一起使用来确定一个标签的位 ...

  7. 通过案例理解position:relative和position:absolute

    w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:abso ...

  8. css中绝对定位和相对定位的区别

    先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...

  9. CSS--position:relative和position:absolute

    position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认 ...

随机推荐

  1. .NET连接MySql数据库的方法及示例

    方法一: 使用MySQL推出的MySQL Connector/Net组件, 该组件是MySQL为ADO.NET访问MySQL数据库设计的.NET专用访问组件.完成该组件后,需要在项目中引用这个组件,也 ...

  2. Android选择系统相册或拍照上传

    PhotoUtils.rar

  3. 在artTemplate的标签中使用外部函数的方法

    第一步,声明函数,并将函数作为data对象的属性.例如: var resArray = new Array(); function beforeRender(data) { //addToArray为 ...

  4. 全面解析java注解

    一.注解概述       1.学习注解能够读懂别人的代码,特别是框架相关的代码       2.让自己的编程更加简洁,代码更加清晰       3.让别人高看一眼,会使用自定义注解来解决问题     ...

  5. Android ListView快速定位(三)

    方法三: android:fastScrollEnabled="true" 这个很简单,只要把属性设置了,就可以起作用了 不过这个滑块比较丑,当然网上也有自定义图片的例子. 参考 ...

  6. 动态追踪技术(中) - Dtrace、SystemTap、火焰图

    http://openresty.org/cn/presentations.html http://weibo.com/agentzh?is_all=1 http://openresty.org/po ...

  7. Porsche Piwis Tester II “No VCI has been detected”,how to do?

    Hi,Joy, I am sorry that my Porsche Piwis Tester II from your shop said “No VCI has been detected” wh ...

  8. ios 界面间跳转方法总结

    接触ios也有一段时间了,偶然间,我们公司的技术总监兼我的导师,问我,你可知道,界面间的跳转有几种方式?我说出了两种,但是也有点含糊其辞,于是我就想一定要找个时间总结一下.有句话说的好,“前人种树,后 ...

  9. WebService地址变成计算机名的解决办法

    WCF 4.0 has solved this issue in some instances with a new config option that use Request Headers: & ...

  10. C++的三大特性之一继承

    一.继承的相关基本概念 1.继承的定义     在C++中,可以使用继承来使新类得到已定义的一些类中的特性,这就好比与孩子从父亲母亲得到遗传类似,所以我们称原有的类为基类或父类,用原有类来生成新的类的 ...