[原创]关于absolute、relative和float的一些思考
absolute:
元素完全脱离文档流,不占文档流的位置,不使用top、left等属性时,仍然在原文档流位置上(但是不在文档流中,也不占用位置),设置了top、left等之后,向上寻找到第一个非static元素作为父元素进行定位。
设置为absolute会令元素的display转变为inline-block,宽度不再是默认100%,而是实际占用,可以设置width:100%来改变。absolute元素由于脱离了文档流,在父元素的宽度计算中,不会计入。
relative:
元素脱离文档流,但是还占用文档流中的位置,根据原位置进行偏移。(top、left等也有效)
float:
同relative一样脱离文档流,也占用文档流的位置,与relative有所不同的是,它会影响正常文档流中的文字和inline元素,围绕在自身周围。display也会转变为inline-block。
参考:http://www.cnblogs.com/fu277/archive/2012/03/13/2393519.html
[原创]关于absolute、relative和float的一些思考的更多相关文章
- 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- HTML-★★★格式与布局fixed/absolute/relative/z-index/float★★★
很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...
- 2016/2/19 position: fixed absolute relative z-index float 半透明效果
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 显示效果 无论滚动条怎么移动 都固定在显示页面的一个位置不动 二.position:a ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- position:absolute/relative/fixed小结
1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...
- css 定位(fixed > absolute > relative)与层级zIndex 的权限认知
原则1: fixed > absolute > relative原则2: zIndex 越高越牛逼,不管你是谁无视身份.原则3: 青出于蓝而胜于蓝,儿子永远比父亲强原则4: 平台很重要. ...
- 今天我们来谈谈绝对定位和相对定位的区别,和需要注意的问题;position:absolute|relative;
首先position:absolute|relative; 前者是绝对定位,后者是相对定位: position属性的四个值: static,relative,fixed,absolute; 重点重点重 ...
- html中相对(relative),绝对(absolute)位置以及float的学习和使用案例 (转)
这几天着手于CSS的研究,研究的原因主要是工作需要,最近发现如果做前端仅仅会javascript很难尽善尽美,当然懂样式和html在一定程度上可以让我们更近一步. css较为简单,由于个人擅长编写代码 ...
随机推荐
- python开发微信支付学习记录(转)
前言 微信支付是由微信及财付通联合推出的移动支付创新产品.如今,随着微信支付的全面开放,相关需求也越来越多,很多开发人员进行微信支付开发及商家申请微信支付时,面临着诸多疑惑. 要想开发顺利进行,首先要 ...
- JSONUtil.bean2Json()报Property 'key' of class has no read method. SKIPPED的问题处理
错误警告信息描述: net.sf.json.JSONObject.defaultBeanProcessing(JSONObject.java:) Property 'handler' of class ...
- leetcode题解:Construct Binary Tree from Inorder and Postorder Traversal(根据中序和后序遍历构造二叉树)
题目: Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume ...
- Storm sql 简单测试
准备工作: 1.安装Kafka,启动,以及创建相应的topic 1.启动kafka bin/kafka-server-start.sh config/server.properties > /d ...
- Java之JDBC学习
(一),MySql数据库 1,MySql数据库的数据类型定义 2,完整性约束: 3,索引: 作用:唯一作用就是加快对表查询速度,索引通过快速路径方法访问来快速定位数据,从而减少磁盘的II/O; 缺点: ...
- 解决ie7下overflow:hidden失效问题
但父亲元素下面的子节点或者孙子节点有position:relative:或者absolute时,父亲即使设置了overflow:hidden:依然会溢出 解决方法可以: 在父亲元素上加上*positi ...
- select、poll、epoll之间的区别总结[整理](转)
select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作.但select ...
- CSS字体中英文名称对照表(转)
在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css ...
- Solution to Triangle by Codility
question: https://codility.com/programmers/lessons/4 we need two parts to prove our solution. on one ...
- App功能测试的7大注意点
转载于:https://mp.weixin.qq.com/s/27DZ1EQVpl-gb4S7n-He4g 01 运行 1)App安装完成后的试运行,可正常打开软件. 2)App打开测试,是否有加载状 ...