1、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。(父元素不仅可以是相对定位(relative))

  2、当绝对定位的元素找不到定位类型是非static定位的父元素时,即相对于根元素进行定位(根元素一般是html)

  3、一般子元素设置为绝对定位,父元素需要设置为相对定位

  4、absolute元素可以通过top,left,bottom,right进行重新定位元素位置。

  5、对于absolute元素,top,left,bottom,right均为0,且width: 100%,height:100%时,则元素height确定,元素位置与top,left,bottom,right有关。

  6、对于absolute元素,如果没有设置height,则真实height为子元素height的和,展示height为父元素的height-top-bottom(如果top或bottom缺失,则展示height也为子元素height的和)

  7、对于absolute元素,如果设置了width: 100%或height:100%时,则真实height与展示height均为父元素的height(如果父元素也没有height的话,则为根元素height,即为html元素高度,即为屏幕高度)

  8、也就是说,对于absolute元素,height没有值或height:100%时,其height都会和父元素height有关,但计算公式不同。

  9、对于absolute元素,如果设置了height,则真实height和展示height为同一值。否则为不同值。

公式:

该元素的witdh = 父元素的width-left-right;

该元素的height= 父元素的height-top-bottom;

该元素位置(该元素left,该元素top);

css之absolute温习的更多相关文章

  1. CSS绝对定位absolute详解

    转:https://www.jianshu.com/p/a3da5e27d22b     之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...

  2. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  3. css之absolute

    一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似(看下面的demo,如果图片在左上角,那么用float和absolute都一样) <!doct ...

  4. css position absolute 浮动特性

    absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...

  5. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  6. css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

  7. css之absolute绝对定位(技巧篇)

    无依赖的绝对定位 margin,text-align与绝对定位的巧妙用法 例子1:实现左右上角的图标覆盖,如图,

  8. css之absolute绝对定位(绝对定位特性)

    学习了绝对定位以后,对此进行一个总结,啦啦啦啦~ 绝对定位特性 1.破坏性 破坏了原有的位置,从文档流里脱离出来 2.包裹性 如果下面这种情况,父级元素将不会有高度和宽度,失去原有的大小

  9. css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

随机推荐

  1. Spring <mvc:default-servlet-handler/>

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...

  2. MySql中order by和union all同时使用

    () UNION ALL () 两边的语句加上括号就可以了

  3. appium+夜神模拟器+python安卓app爬虫初体验

    环境搭建:Windows 7 64bit jdk包:jdk-8u171-windows-x64.exe(http://www.oracle.com/technetwork/java/javase/do ...

  4. Google开源软负载seesaw

    https://github.com/google/seesaw ------------------------ 在分布式系统中,负载均衡是非常重要的环节,通过负载均衡将请求派发到网络中的一个或多个 ...

  5. JDK、CGlib动态代理详解

    Java动态代理之JDK实现和CGlib实现(简单易懂)      一 JDK和CGLIB动态代理原理 1.JDK动态代理 利用拦截器(拦截器必须实现InvocationHanlder)加上反射机制生 ...

  6. python note 16 re模块的使用

    1.re模块(#regex) # 查找 # findall : 匹配所有 每一项都是列表中的一个元素 import re ret = re.findall('\d+','dawdawd154wadwa ...

  7. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...

  8. Java反射基础知识

    反射机制就是可以把一个类,类的成员(属性.方法)当成一个对象来操作,也就是说,类,类的成员,我们在运行的时候可以动态的去操作它们. 所有的Java类都继承了Object类,在Object类中定义了一个 ...

  9. Flask 验证码 点击验证码刷新

    ---恢复内容开始--- import random import string # Image:一个画布 # ImageDraw:一个画笔 # ImageFont:画笔的字体 # pip insta ...

  10. Spring bean的生命流程

    Spring 是一个轻量级的 J2EE 开源框架,其目标是降低企业级应用开发难度,提高企业级应用开发效率.在日程开发中,我们会经常使用 Spring 框架去构建应用.所以作为一个经常使用的框架,了解其 ...