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

如果直接写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. C#-将控件动态添加到选项卡页tablepage

    tabPage1.Controls.Add(new Button()); 实例: Button cp = new Button(); cp.text="test";cp.Click ...

  2. nginx,linux压力测试工具webbench

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好,安装使用也特别方便. 1.适用系统:Linux 2.编译安装: 1. wget htt ...

  3. IOS开发-加载本地音乐

    IOS开发-加载本地音乐 $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text() ...

  4. iOS开发——Swift篇&单例的实现

    Swift实现单例模式 Swift实现单例模式 由于Swift语言弱化了struct和class之间的界限,这里我分别给出自己写的两种的单例实现 class版本: class SwiftSinglet ...

  5. form表单普通提交预览显示,读取显示tmp文件

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  6. git svn 5点区别

    如果你在读这篇文章,说明你跟大多数开发者一样对GIT感兴趣,如果你还没有机会来试一试GIT,我想现在你就要了解它了. GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等.如果 ...

  7. C#_wpf_userinput_数据绑定_后台对象改变,界面数据也变化

    <!--MainWindow.xaml--> <Window x:Class="UserStore.MainWindow" xmlns="http:// ...

  8. 如何查找局域网的外网ip

    方法一:一个简单的方法 用你电脑打开www.ip138.com 就可以看到自己的公网IP地址 方法二:如果一定要从路由器里面看 那就打开路由的配置页面 一般在系统状态里面 会有个WAN口IP 那就是你 ...

  9. volley框架详解

    Volley可是说是把AsyncHttpClient和Universal-Image-Loader的优点集于了一身,既可以像AsyncHttpClient一样非常简单地进行HTTP通信,也可以像Uni ...

  10. About xvfb

    http://blog.csdn.net/span76/article/details/11473315 有时候我们不关注程序是否有界面(比如自动化测试),只要程序在运行就可以了 很感谢 xvfb 这 ...