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有很多共同点:

  1. 会改变行内元素的呈现模式,使display之变更为block。
  2. 会让元素脱离普通流,不占据空间。
  3. 默认会覆盖到非定位元素上。

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小结的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. CSS布局 ——从display,position, float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  3. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  4. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  5. CSS布局 ——从display,position, float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  6. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  7. position,display,float,overflow,margin,padding之间的相互影响

    1.元素分为块级元素和行内元素, 块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题.行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且 ...

  8. 盒模型、position、float详解css重点汇总

    元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...

  9. Css中position、float和clear整理

    Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...

随机推荐

  1. redis实现api限流

    redis官方给出了参考文档:INCR 这里参考第一种方法,使用token bucket实现:每个用户每秒有一个Counter: func RateLimiter(uid string, rlType ...

  2. char *s 和 char s[] 的区别

    最近的项目中有不少c的程序,在与项目新成员的交流中发现,普遍对于char *s1 和 char s2[] 认识有误区(认为无区别),导致有时出现“难以理解”的错误.一时也不能说得很明白,网上也搜了一下 ...

  3. MySQL的查询语句

    一.基本查询语句 1.1从单个表中查询列 语法:select 查询的列1,查询的列2  from 表名  where 条件 group by 分组条件  order by 排序条件  having  ...

  4. Unity 3D-Navigation网格导航系统使用教程

    Unity自带导航系统 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创 ...

  5. 20155219 2016-2017-2 《Java程序设计》第2周学习总结

    20155219 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 类型:整数,字节(需要逐字节处理数据时,如图像处理,编码处理等,会使用byte类型),浮点数 ...

  6. PHP黑魔法(该篇文章转自:http://www.91ri.org/12634.html 目的是作为自己的笔记方便查找)

    那些年我们学过的PHP黑魔法 作者:Matrix_ling 序 这里必须得说一下==和===这俩货的重要性.==是比较运算,它不会去检查条件式的表达式的类型===是恒等,它会检查查表达式的值与类型是否 ...

  7. Eclipse实现数据库反向生成实体类(pojo)-------(插件安装和实现步骤的说明)

    一.插件安装 1.下载插件: http://jaist.dl.sourceforge.net/sourceforge/jboss/HibernateTools-3.2.4.Beta1-R2008103 ...

  8. mongodb添加验证用户 删除用户

    1.创建用户 db.createUser( { user:<name_string>,                   #字符串 pwd:<password_string> ...

  9. Centos7 安装redis及其入门使用

    wget -c http://download.redis.io/releases/redis-3.2.9.tar.gz #下载源码 tar -xvf redis-3.2.9.tar.gz #解压 c ...

  10. 使用kube_ping进行Keycloak群集设置 - DZone Cloud

    转自:https://www.jdon.com/51501 看看如何使用kube_ping和Keycloak实现自动发现? Keycloak是一个开源软件,提供身份管理和访问管理的单点登录.Keyco ...