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

如果直接写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. Codeforces Round #325 (Div. 2) D. Phillip and Trains BFS

    D. Phillip and Trains Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/586/ ...

  2. Unity3d 网络编程(一)(Unity3d内建网络Network介绍)

    首先个人说说题外话,Unity3d使用的网络库核心是用C++实现的一款商业网络游戏引擎库. RakNet.所以对于移动设备来说,用Unity3d来写server是全然能够的,而且内建网络库的各项功能封 ...

  3. SHGetSpecialFolderLocation

    uses shlobj;function GetDesktopFolder():string;var  pItem: PItemIDList;  temp: array[0..MAX_PATH] of ...

  4. shell修改文件名(二)

    我想修改类似如下一批文件的文件名:AA01_01.txtAA01_02.txtAA01_03.txtAA01_04.txt 修改成BB02_01.txtBB02_02.txtBB02_03.txtBB ...

  5. UIAlertController 简单修改title以及按钮的字体颜色

    苦逼的开发者,最终败给了一个任性的UI,系统原生UIAlertController的按纽颜色必须改.于是,开始了不归路.之前的版本是自己用view写的一个仿系统UIActionSheet,动画感觉都挺 ...

  6. C 栈顺序存储

    // seqstack.h #ifndef _MY_SEQSTACK_H_ #define _MY_SEQSTACK_H_ typedef void SeqStack; SeqStack* SeqSt ...

  7. Folder and jar

  8. php读取图片成二进制流输出

    header( "Content-type: image/jpeg");$PSize = filesize('1.jpg');$picturedata = fread(fopen( ...

  9. 学通javaweb 24堂课 学习笔记

    17.01:简单配置控制器 1.一个controller protected ModelAndView handleRequestInternal(HttpServletRequest request ...

  10. 焦点轮播图——myfocus焦点图库

    网站网址: http://demo.jb51.net/js/myfocus/demo.html 简单3步,你即可以用上myFocus. Step 1. 在html的标签内引入相关文件 <scri ...