CSS之 absoulte 属性
特性:
absoulte 与 float 具有相同的特性:包裹性,与破坏性
absoulte 与 float 可以交替使用
不受 relative 限制的 absoulte 定位,行为表现上可以不使用 left/right/top/button/auto 等属性
行为表现
脱离文档流
去浮动( float 与 absoulte 元素不能同时出现)
位置跟随(还在原来的位置)
问题: IE7使用 absoulte 的元素永远是 inline-block 元素
解决: 外层套一层无设置属性的标签
可以配合margin 精确定位
支持负值定位
兼容性强 IE6
自适应强,维护性好,具有健壮性
动画尽量作用与绝对定位元素上,多个 absoulte 元素会重叠,后者居上
z-index 无依赖
如只有一个 absoulte 元素,不需要设置
如两个 absoulte 元素,控制DOM流的顺序,也可不需要
多个定位交错, z-index: 1 控制
非弹框类的 absoulte 元素, z-index <= 2 若冗余,需优化
left/right/top/bottom与width/height可相互替代
left:0;right:0; 等于 width:100%; top:0;bottom:0; 等于 height:100%; 以上IE7+支持 具有相互合作性:left:0;right:0;width:50%;margin:auto;可居中
absoulte整体布局
<header></header> <article> <aside></aside> <main></main> </article> <footer></footer>
;; } ; } ; } ;;; } ; left: 200px; overflow: auto;}
CSS之 absoulte 属性的更多相关文章
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS Counters 计数属性
CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...
- 利用CSS的@font-face属性 在网页中嵌入字体
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
随机推荐
- 微信小程序中的微信支付js代码和流程详解
微信支付流程 步骤 (一)获取用户的信息 (二)统一下单(返回的prepay_id用于第(三)步的请求参数) (三)发起支付请求 操作(这边假设你已经获得了用户的openId) (一).获取用户ope ...
- 团队作业4——第一次项目冲刺(ALpha版本)第四天
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完善了昨天的的代码---前端的HTML页面设计 2.功能 完成后台数据处理的全部基本功能: a.数据结构设计及数据交 ...
- 201521123008《Java程序设计》第八周实验总结
1. 本周学习总结 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.删除元素的时候从最后一个元素开始,避免删除元素后位置发生变化而导致有些元素没有删 ...
- 201521123005 《java程序设计》 第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123049 《JAVA程序设计》 第3周学习总结
1. 本周学习总结 1.学习了对象与类的定义: 2.掌握了构造函数与其重载: 3.学会了this关键字的利用: 4.明白了静态变量与非静态变量的区分. 下面是对本周学习的图片小结: 2. 书面作业 Q ...
- 我的Emacs配置文件
(custom-set-variables ;; custom-set-variables was added by Custom. ;; If you edit it by hand, you co ...
- 201521123036 《Java程序设计》第13周学习总结
本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分 ...
- PowerDesigner连接MySQL和逆向工程图
0.写在前面的话 最近想梳理公司项目的表间关系,从项目后台管理系统的操作入手,以及代码的hibernate注解入手,都不算特别尽人意,于是最后还是鼓捣了一下PowerDesigner的逆向工程图,这样 ...
- JUDE-UML工具软件介绍
JUDE社区版(不考虑破-解). 现在Jude改名为Astah了.JUDE已停止发展,Astah是它的替代品.Jude有3个版: Professional版, Community版(免费),Share ...
- Linux 下安装maven
1.首先到Maven官网下载安装文件,目前最新版本为3.0.3,下载文件为apache-maven-3.0.3-bin.tar.gz,下载可以使用wget命令:2.进入下载文件夹,找到下载的文件,运行 ...