position
1、父集设置了relative,子集的absolute要设置top和left的值,不然父集的padding值会影响到子集的位置;
#first{
width: 200px;
height: 100px;
border: 1px solid red;
margin:40px;/*子集的位置不受祖先类的margin值得影响*/
position: relative;
padding:50px;
}
#second{
width: 200px;
height:100px;
border: 1px solid blue;
position: absolute;
top:20px; /*若不设置top和left的话,#first里的padding值会影响id=“second”的div的位置。若设置了则#first里的padding值就不会影响id=“second”的div的位置了,此时,id=“second”的div的位置只受祖先类的border进行的定位。 总结一下,就是absoulte是根据祖先类的border进行的定位,前提是absolute设置了top和left的值*/
left:20px;
}
<div id="first">first
<div id="second">second</div>
</div>
2、
#first{
width: 200px;
height: 100px;
border: 1px solid red;
margin:40px 400px;/*若margin:20px 30px;设置为固定值,则position:absolute的话,#first对应的div的位置不会受到影响。若margin:0 auto;则position:absolute的话,#first对应的div的位置会受到影响,具体表现为auto方向被改(左右方向),以#first对应的div的祖先类的border进行定位(这里的祖先应该是body了)*/
position: absolute;
padding:50px;
}
#second{
width: 200px;
height:100px;
border: 1px solid blue;
position: absolute;
top:20px;
left:20px;
}
3、若子类为absolute且设置了top和left,但祖先类没有设置relative或者absolute的话,则以body的border定位。若祖先类有多个设置了relative或者absolute的话,则以最近祖先的border定位;
4、通常写法
#first{
width: 200px;
height: 100px;
border: 1px solid red;
margin:0 auto;
position: relative;
padding:50px;
}
#second{
width: 200px;
height:100px;
border: 1px solid blue;
position: absolute;
top:20px;
left:20px;
}
position的更多相关文章
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
- css知多少(11)——position
1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的 ...
- Android之RecyclerView的原生Bug-Inconsistency detected. Invalid view holder adapter positionViewHolder{a1bbfa3 position=2 id=-1, oldPos=-1, pLpos:-1 no parent}
今天在运行自己编写的App时,突然发现App在运行时闪退,然后就查看了Android Studio的Log,发现了这个错误,上网查了一下,才知道是RecyclerView的原生Bug,在数据更新时会出 ...
- 函数:MySQL中字符串匹配函数LOCATE和POSITION使用方法
1. 用法一 LOCATE(substr,str) POSITION(substr IN str) 函数返回子串substr在字符串str中第一次出现的位置.如果子串substr在str中不存在,返回 ...
- CSS:position:fixed使用(转)
position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...
- position导致Safari工具栏不自动隐藏
一般情况下,移动端网页在上滑的时候,Safari的工具栏会自动隐藏掉,下滑的时候又会出现. 但是,如果可滑动区域的最外层box写了position:absolute,就不会自动隐藏了. 例如像这样的页 ...
- 元素堆叠问题、z-index、position
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
随机推荐
- 浅谈JAVA设计模式
没有万行的代码量,就不要想搞清楚设计模式.目前本人代码量大约在六千五百行,2016年需要继续努力,尽快完成万行之约. 工作之余需要,下面提前简单讨论一下设计模式. 创建型模式,共五种:工厂模式.抽象工 ...
- SOAPUI使用教程-MockServices工作原理
在soapUI的可让您只需从WSDL基础服务创建一个基于WSDL服务的符合标准的模拟.被称为“MockService”,这可以直接从内部的soapUI运行,命令行浇道,或甚至标准servlet容器. ...
- CentOS6.7安装RabbitMQ3.6.5
1.安装所有依赖包yum install -y gcc ncurses ncurses-base ncurses-devel ncurses-libs ncurses-static ncurses-t ...
- EntityFrame CodeFirst 自动生成表
来源:http://msdn.microsoft.com/zh-cn/data/jj193542 本视频和分步演练介绍通过 Code First 开发建立新数据库.这个方案包括建立不存在的数据库(Co ...
- Struts2二级菜单联动
http://www.cnblogs.com/wujixing/p/5194461.html ps: Java面试 http://blog.csdn.net/zhang070809/article/d ...
- quartz与spring进行集成
上一篇将了quartz框架的使用,spring同样也提供了对quartz的集成.这次就尝试一下在spring中集成quartz. 要在spring中使用job,Trigger和Scheduler,就要 ...
- git revert和git reset的区别
git revert 是撤销某次操作,此次操作之前的commit都会被保留 git reset 是撤销某次提交,但是此次之后的修改都会被退回到暂存区 具体一个例子,假设有三个commit, git s ...
- Javascript学习之无缝滚动
无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- winform中的确定取消
~~~~~~~~~~~ 今天也是醉了,做的项目找了很多地方也没有找到为什么点击确定取消,form会关闭(还是脑子不活) 加了一个小功能,代码没有什么难的但是,就是碰见了这么一个问题 点击 确定 取 ...
- 利用activeX控件在网页里自动登录WIN2003远程桌面并实时控制
首先要自己配置并打开受控端的WEB远程桌面服务,这个在“添加/删除windows组件”里有,我只在windows 2003 server里试过,没试过XP.下面我们在客户端安装微软提供的远程桌面客户端 ...