position和float小结
position属性值
Position的属性值共有四个static、relative、absolute、fixed。
static
所有元素在默认的情况下position属性均为static,而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效。其用法为:在改变了元素的position属性后,可以将元素重置为static让其回归到页面默认的普通流中。
relative
俗称的相对定位,重点在于对相对理解。每个元素在页面的普通流中会有“占用”一个位置,这个位置可以理解为默认位置,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认位置,并没有脱离普通流,只是视觉上发生的偏移。相对于默认位置偏移后,并不会影响其后面其他元素的定位。同时,position: relative并没有改变行内元素的Display属性(对行内元素设置宽度和高度均无效)。
absolute
俗称的绝对定位,绝对定位是相对而言的,怎么理解呢?应用了position: absolute的元素会循着节点树中的父(祖)元素来确定“根”,然后相对这个“根”元素来偏移。如果在其节点树中所有父(祖)元素都没有设置position属性值为relative或者absolute,则该元素最终将相对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性!
1)块状元素在position(relative/static)的情况下width为100%,但是设置了position: absolute之后,会将width变成auto(取决于内部元素的width)。
2)元素设置了position: absolute之后,如果没有设置top、bottom、left、right属性的话,浏览器会默认设置成auto,而auto的值则是该元素的“默认位置”,建议设置偏移量。
一些的position小知识
1)position: absolute会忽略根元素的padding,相对于根元素的border里面的边定位。
2)行内元素在应用了position:absolute之后会改变display为block。
因此,要注意到relative是并没有改变行内元素的呈现模式,而absolute是会改变行内元素的呈现模式,如果设置了absolute并不需要显式的的将元素display改成block。
3)应用了position: absolute / relative之后,会覆盖其他非定位元素(即position为static的元素),如果你不想覆盖到其他元素,也可以将z-index设置成-1。
fixed
fixed和absolute有很多共同点:
- 会改变行内元素的呈现模式,使display之变更为block。
- 会让元素脱离普通流,不占据空间。
- 默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于:
absolute的”根元素“是可以被设置的,而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页,其元素与浏览器窗口之间的距离是恒定不变的。
对于页面布局中的最外层div设置 position:fixed;top:0;left:0,则页面无法滚动,因为fixed定位的元素相对于浏览器的位置保持不变,即div的顶部挨着浏览器窗口的顶部。适用于出现弹窗之后,滚动弹窗中的内容,主页面内容不滚动。
使用fixed定位吸底按钮时,要在主页面的内容最后面添加一个跟按钮高度相同的div,防止按钮遮挡住主页面的内容。
float属性
float的属性值有none、left、right,有几个要点:
1.只有横向浮动,并没有纵向浮动。
2.当元素应用了float属性后,将会脱离普通流,其容器(父)元素将得不到脱离普通流的子元素高度。
3.会将元素的display属性变更为block。
4.浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)。
5.浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示,必须让两个块状元素都应用float)。
float与position的兼容性问题
1)元素同时应用了position: relative和float属性后,则元素先浮动到相应的位置,然后再根据(top / left / bottom / right)所设置的距离来发生偏移。
2)元素同时应用了position: absolute和float属性,则float失效。
position和float小结的更多相关文章
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- CSS布局 ——从display,position, float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- position,display,float,overflow,margin,padding之间的相互影响
1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...
- 盒模型、position、float详解css重点汇总
元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...
- Css中position、float和clear整理
Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...
随机推荐
- redis实现api限流
redis官方给出了参考文档:INCR 这里参考第一种方法,使用token bucket实现:每个用户每秒有一个Counter: func RateLimiter(uid string, rlType ...
- char *s 和 char s[] 的区别
最近的项目中有不少c的程序,在与项目新成员的交流中发现,普遍对于char *s1 和 char s2[] 认识有误区(认为无区别),导致有时出现“难以理解”的错误.一时也不能说得很明白,网上也搜了一下 ...
- MySQL的查询语句
一.基本查询语句 1.1从单个表中查询列 语法:select 查询的列1,查询的列2 from 表名 where 条件 group by 分组条件 order by 排序条件 having ...
- Unity 3D-Navigation网格导航系统使用教程
Unity自带导航系统 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创 ...
- 20155219 2016-2017-2 《Java程序设计》第2周学习总结
20155219 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 类型:整数,字节(需要逐字节处理数据时,如图像处理,编码处理等,会使用byte类型),浮点数 ...
- PHP黑魔法(该篇文章转自:http://www.91ri.org/12634.html 目的是作为自己的笔记方便查找)
那些年我们学过的PHP黑魔法 作者:Matrix_ling 序 这里必须得说一下==和===这俩货的重要性.==是比较运算,它不会去检查条件式的表达式的类型===是恒等,它会检查查表达式的值与类型是否 ...
- Eclipse实现数据库反向生成实体类(pojo)-------(插件安装和实现步骤的说明)
一.插件安装 1.下载插件: http://jaist.dl.sourceforge.net/sourceforge/jboss/HibernateTools-3.2.4.Beta1-R2008103 ...
- mongodb添加验证用户 删除用户
1.创建用户 db.createUser( { user:<name_string>, #字符串 pwd:<password_string> ...
- Centos7 安装redis及其入门使用
wget -c http://download.redis.io/releases/redis-3.2.9.tar.gz #下载源码 tar -xvf redis-3.2.9.tar.gz #解压 c ...
- 使用kube_ping进行Keycloak群集设置 - DZone Cloud
转自:https://www.jdon.com/51501 看看如何使用kube_ping和Keycloak实现自动发现? Keycloak是一个开源软件,提供身份管理和访问管理的单点登录.Keyco ...