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. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认 ...
随机推荐
- C# 设置 窗口最大化
Main.WindowState = FormWindowState.Maximized;
- [AngularJS] Best Practise - Resolve promises in router, defer controllers
See more:http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/ /** * Created by Answer12 ...
- MySQL监控模板说明-Percona MySQL Monitoring Template for Cacti
http://blog.chinaunix.net/uid-16844903-id-3535535.html https://www.percona.com/doc/percona-monitorin ...
- interactive_timeout
[mysqld] interactive_timeout 交互式连接 会话1 [root@localhost ~]# mysql -umysql -p Enter password: Welcome ...
- 解决安装包在win7,win8系统下安装后运行没有管理员权限
今天打包一个程序在客户机上安装运行:一直报没有管理员权限:客户机是win8系统:直接右键管理员身份运行则都可以:为了避免不让用户每次都这么麻烦:只有问哈群友和百度,终于找到解决方法: 第一步:项目属性 ...
- Java基础知识强化之网络编程笔记19:Android网络通信之 HttpClient和传统Post、Get方式的区别
1. HttpClient是什么 ? HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 ...
- css实现响应式全屏背景
利用css中 background-size:cover 填充整个viewport 注意: 一张背景图像素5000px*5000px在pc端 缩放都基本满足要求 不会出现模糊失真: 但是在移动端使用 ...
- Elasticsearch 搜索不到数据问题(_mapping 设置)
需求 由于 kibana3 中,不支持直接在请求的 url 中设置搜索的 type (是不是我不知道???). 为了支持特定 type 的搜索,所以我设置了个下每个 panel 的查询语句,让它增加一 ...
- setTimeout和setImmediate以及process.nextTick的区别
在javascript中我们了解到了setTimeout和setInterVal函数事件队列(任务队列)的相关知识,除了setTimeout和setInterval这两个方法外,Node.js还提供了 ...
- typeof应该注意的地方(网龙公司校招笔试题)
<script language="javascript" type="text/javascript"> alert(new String('a' ...