css position 绝对定位和相对定位
position:absolute这个是绝对定位;
是相对于浏览器的定位。
比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如:<div class="1"></div><div class="2"></div> 当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右边,距离120px
css position 绝对定位和相对定位的更多相关文章
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- css中绝对定位和相对定位的区别
先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
- css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
- 【CSS】绝对定位和相对定位
html:定位层 特点: >>完全脱离默认文档流,独立于立体层面的Z轴之上. >>和float浮动一样都脱离了默认文档流,但float元素与默认文档流之间会相互产生影响,而定位 ...
- CSS的绝对定位和相对定位
css定位标签position包括两个值:relative(相对定位)和absolute(绝对定位),position样式一般都是和top.bottom.left.right一起使用来确定一个标签的位 ...
- css 浮动 绝对定位 和 相对定位
html是按照文件流(文档流)的方式加载的,但是全部是文档流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先,按照文档流和非文档流来分类: ①文档流:就是按照上下 ...
- 理解position 绝对定位和相对定位
一.position的三种取值 1.取值 Position : static / absolute / fixed / relative static:静态 absolute:绝对定位 ...
- html 之 position 绝对定位与相对定位(待补充)
相对定位:对于区块标签而言,占着原有的空间 绝对定位:对于网页而言,不占原来的空间
- div+css位置绝对定位和相对定位
position:absolute: 当div中被隔着些元素的话那么用此方法将把元素重叠在一起,所以元素可以不在容器中加也能重叠在一起
随机推荐
- struts2上传
注意事项:文件名必须是:文件域+FileName,如: // 封装上传文件域的属性 private File uploadImage; // 封装上传文件名的属性 private String upl ...
- java面试每日一题12
题目:打印出如下图案(菱形) * *** ****** ******** ****** *** * public class Diamond { public static ...
- 1029 C语言文法定义与C程序的推导过程
1 阅读并理解提供给大家的C语言文法文件. 2 参考该文件写出一个自己好理解版的现实版的完整版的C语言文法. 3 给出一段C程序,写出用上述文法产生这段C程序的推导过程. program → exte ...
- javaWEB小练习:在数据库中查找相同的username和password
/*练习题: * 在Mysql数据库中创建一个person数据表,添加三个字段,id,user,password,并录入几条记录 * *练习题:定义一个login.html,里面定义了两个请求字段:u ...
- Safecracker 分类: HDU 搜索 2015-06-25 21:12 12人阅读 评论(0) 收藏
Safecracker Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- 刚体Collider包围测试
测试结果为会自动排出修正坐标(之前位于中心): 2016/2/29补充: 如果外面大的Cube相对小的Cube质量很高,会弹出且不出现移动(已锁住弹出物旋转,如果不锁会飞出去): 如果没有足够的空间排 ...
- hdu 2089 不要62 数位dp
不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 2016年12月6日 星期二 --出埃及记 Exodus 21:1
2016年12月6日 星期二 --出埃及记 Exodus 21:1 "These are the laws you are to set before them:你在百姓面前所要立的典章是这 ...
- 配置 ASP.NET Linux( CentOS 6.5 ) 运行环境 MONO + Jexus
1.更新系统 在命令行下执行 yum –y update 2.安装必要的软件 yum -y install gcc gcc-c++ bison pkgconfig glib2-devel gettex ...
- SQL高级查询——50句查询(含答案)
-一个题目涉及到的50个Sql语句 --(下面表的结构以给出,自己在数据库中建立表.并且添加相应的数据,数据要全面些. 其中Student表中,SId为学生的ID) ----------------- ...