positio:absolute与position:relative的区别
absolute 能让元素 inline-block 化:
例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。float 可以 inline-block 化元素
float 的破坏性:使高度塌陷
absolute 的破坏性:使高度和宽度都塌陷absolute属性的
破坏性:高宽占据空间为0的特性,
定位性:借助left/top等属性的定位- 少用absolute,常见absolute布局的替代实现方案:
- 使用margin代替
覆盖定位一般都离不开absolute属性
opacity属性的半透明效果不仅会影响到当前元素,所有的子元素也会跟着半透明
使用opacity属性或是IE filter半透明滤镜会让子元素跟着半透明。半透明的纯色背景,不使用opacity,替代方案:使用 CSS3 rgba
background-color: rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);现代浏览器使用CSS3 rgba实现半透明背景色,IE浏览器使用渐变滤镜实现半透明。
把绝对定位元素直接放在body标签下,才能最大限度的发挥绝对定位元素的才能。
- 实现两栏等高布局的方法:
- display:table-cell
- position:absolute
position:absolute的元素无宽度,无高度。
绝对定位属性的元素具有包裹性,等同于没有高度与宽度的inline-block元素。
inline-block化的元素有三大特性:包裹性;高宽可定义;图文混排。
浮动元素有“无高度”特性
将需要绝对定位的元素单独放在relative属性的标签下,于是,relative相对定位就不会影响任何其他元素,仅仅是其内部的绝对定位元素。
- absolute 适合用于元素隐藏;
absolute 可以实现等高布局;
少用absolute,可以用 margin 代替。
absolute 元素比较适合放在 body 内。 - relative 的元素,设置偏移时,其原位置保留;
absolute 定位,相对于 static 定位以外的第一个父元素进行定位; - relative:相对于它本身原来的位置进行偏移(配合 right left bottom top属性进行偏移) 他偏移会空出来一些空白 其余的html元素不会填充这些空白
absolute:相对于同样设置了position属性的父级元素进行偏移(除了position:static)如果没有这样的html元素 就是body(配合 right left bottom top属性进行偏移)
positio:absolute与position:relative的区别的更多相关文章
- 浅谈position: absolute和position:relative
一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- position属性absolute与relative 的区别
连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...
- position:relative/static/fixed/absolute定位的区别以及使用场景
absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...
- css中的position 的absolute和relative的区别(转)
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css absolute与relative的区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Div CSS absolute与relative的区别小结
absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...
随机推荐
- css层叠样式表
css的三种声明方式 1.行内样式 通过每个标签都有的style属性 <div style="color:red;">黄卫星说没有内容 ...
- 文科生细谈学习Linux系统的重要性
首先大概介绍下自己,我学的是公共事业管理方面的专业,可以说是面向纯理论,社区管理社会管理的专业,但是从大二开始,对网络及服务器运维方面产生浓厚兴趣,并不断在网上找相关资料. 在这期间经历过很多,单说桌 ...
- Python网络数据采集2-wikipedia
Python网络数据采集2-wikipedia 随机链接跳转 获取维基百科的词条超链接,并随机跳转.可能侧边栏和低栏会有其他链接.这不是我们想要的,所以定位到正文.正文在id为bodyContent的 ...
- 微信小程序开发
一.基本的准备工作 1.工具安装 工具是有微信官方提供. 2.下载地址: windows32位:https://servicewechat.com/wxa-dev-logic/download_red ...
- ASP.NET Core MVC – 自定义 Tag Helpers
ASP.NET Core Tag Helpers系列目录,共四篇: ASP.NET Core MVC Tag Helpers 介绍 ASP.NET Core MVC – Caching Tag Hel ...
- linux 自动备份数据库
首先在你的项目合适的地方建立一个执行备份数据库的脚本 下面我建立一个叫 mysqlBackups.sh 的脚本内人如下: #!/bin/sh # Database info DB_NAME=" ...
- 利用GPGPU计算大规模群落仿真行为
0x00 前言 在今年6月的Unite Europe 2017大会上 Unity 的CTO Joachim Ante演示了未来Unity新的编程特性--C# Job系统,它提供了编写多线程代码的一种既 ...
- python中的赋值和深浅拷贝
python中,A object = B object 是一种赋值操作,赋的值不是一个对象在内存中的空间,而只是这个对象在内存中的位置 . 此时当B对象里面的内容发生更改的时候,A对象也自然而然的 ...
- Jsp分页的简单制作
Jsp分页的简单制作 运行环境:jsp+tomcat+eclipse 技术:servlet+jsp+mysql 分页技术还区分两个:假分页和真分页 假分页:一次性从数据库读出表的所有数据一次性的返回给 ...
- MySQL for Mac 安装和基本操作
一.安装mysql 1.mysql下载地址http://dev.mysql.com/downloads/mysql/我的机器是mac 10.8的;所以使用mysql-5.6.10-osx10.7-x8 ...