html div相对位置,CSS 相对|绝对(relative/absolute)定位系列(一)
1.绝对定位和浮动元素是近亲:都具备包裹性和破坏性
包裹性:包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度
破坏性:浮动的破坏性在于切断linebox链,致使高度塌陷,但由于浮动元素仍在凡间(DOMtree),实体是看得见摸得着的,所以其占据的实体位置还是在的。而absolute绝对定位不仅让高度塌陷,又由于从未深入凡间,在凡间没有他的实体位置,所以宽度也是塌陷的
2.position:absolute的滥用
首先自己是个流体布局控,绝对定位这种东西,显然没有流动的气质,尤其拿来定位后(虽然有时候在relative的庇护下也有一定的流动性)。流动性布局很强调不定宽,不定高,活用标签自身属性,顺其自然,最少干预。但是由于absolute属性(尤其是带有left/top值)的破坏性,会导致高宽塌陷,于是,不得已,需要设定一个高度值(或是足以撑开高度的值),例如新浪微博导航就是绝对定位,于是,导航外标签必须定高,否则,下面的元素会上来发生重叠
3.常见absolute布局的替代实现方案
我们极易先入为主地认为absolute的价值就是借助left/top属性来进行定位的。说句不严谨的话,目前估计超过90%的普通布局中的absolute属性都是用在定位上了。恩,这个回头再说,这里还是看看一些常见的absolute布局如何通过使用其他属性完成同样的布局效果。既然absolute属性是拿来定位,我们只要使用其他属性定位就可以了。此时,自然而然想到了CSS中另外一个更加低调全能的定位属性margin,下面的前两个例子都是使用margin代替absolute及相关属性。
首先拿京东商城首页的一个标价样式举例,见下截图:
用小bug一看其code实现,果然是绝对定位+定位属性
要是我来实现,就不会使用absolute属性,会使用margin实现扩展性容错性更强的布局
因为价格是一个占据整行的div且位置和手机的位置在水平方向上始终是一样的,所以只要设定固定的margin就能保证不论是改变父容器宽度或者定位方式都可以很好的展现,同时将标价外面的div标签改为inline水平元素的标签方便inline-block化(行内元素设置了position属性或float属性后属性默认变成inline-block,所以可以设置宽高,span是行内元素,不设display=”block”或“inline-block”是没办法设宽高的)
4.absolute可以一个人战斗
我们需要意识到,一个应用的position:absolute的元素,其实就只是个非常普通的元素,我感觉与应用了float:left的差异仅仅在于宽度的缺失
点击示意的按钮后,可以发现图片还是那个图片,还在那个位置,还是那么的安静与优雅。唯一变化的就是文字们有的跑到它的下面了(宽度缺失)
由此可见,absolute属性只是个很普通的属性,跟float:left是个近亲。一个是陨落凡间的恶魔,一个是天空中的恶魔。所以,很多时候,我们在普通布局中使用到absolute时候,只要单单设置一个position:absolute就可以了,至于left/top之类的都是浮云,涉及到定位什么的就把该元素当作普通元素,使用margin进行定位,一样有着刮目的表现的
总结:
1.无依赖的绝对定位元素其一的属性是脱离文档流
2.无依赖的绝对定位元素(不受relative限制的absolute定位,行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值)存在一个非常大的特效,就是位置跟随性,也就是这个元素在普通元素的时候呆在什么位置,绝对定位之后就还是呆在什么位置,原来是block属性absolute之后还是block属性,原来是inline-block属性absolute之后还是inlne-block属性
3.在设置了overflow属性的元素内部设置的absolute元素,是不会受到overflow属性的限制的,即使设置为hidden
4.绝对定位的元素虽然具备跟随的特性,但是如果我们想精确的进行定位,那么应该使用margin,这里和普通元素使用margin的效果是一样的
5.生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。
html div相对位置,CSS 相对|绝对(relative/absolute)定位系列(一)相关推荐
- CSS 相对|绝对(relative/absolute)定位系列(一)
一.有话要说 以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- CSS 相对|绝对(relative/absolute)定位系列
一.有话要说 以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- CSS 相对/绝对(relative/absolute)定位系列(二)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1330 一.常 ...
- CSS 相对|绝对(relative/absolute)定位系列(三)
1. absolute与等高布局 拿简单的两栏布局举例,左栏与右栏有不同的背景色,且中间隔边框线分隔,如何实现?因为随着内容的不同,有可能左侧栏高度较高,也有可能是右侧栏高度较高.所以,要实现无缝的填 ...
- CSS 相对|绝对(relative/absolute)定位系列(二)
1. 因为事先标准就已经在文字的后面显示,设置absolute之后因为跟随性仍然是在原来的文字,然后再设置margin实现定位即可 2. absolute正业之元素隐藏 元素隐藏与显示是我们在页面制作 ...
- CSS 相对|绝对(relative/absolute)定位
一.absolute属性的情感化认识 我对position:absolute属性感性化的认识:absolute是一个善良的有个性的,我行我素.喜欢凌驾一切之上的魔鬼.这家伙,不喜欢也算不上讨厌,但是知 ...
- CSS 浅析position:relative/absolute定位方式
一.position:relative 相对定位 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如下图: 我们 ...
- relative absolute实例讲解
一.简介 absolute是绝对定位,relative是相对定位,配合TOP.RIGHT.BOTTOM.LEFT进行使用 二.实例 1.relative 相对谁来定位?相对自己未定位前的位置来定位 & ...
- html中如何写div中div的位置,DIV CSS绝对定位布局案例 position布局实例
DIVCSS5为大家实例讲解绝对定位布局.绝对定位我们要用到样式position:absolute和position:relative,同时需要top.bottom.left.right配合布局实现D ...
最新文章
- 后氧传感器正常数据_氧传感器正常数据流
- linux时间和时区修改(附suse)
- java 边界_Java数组边界问题
- mysql workbench ssh_通过MySQL Workbench进行SSH隧道
- Spring Boot 中使用 RabbitMQ
- 学习笔记Spark(十)—— Spark MLlib应用(2)—— Spark MLlib应用
- android ScrollView 控制行数
- 绝地求生自定义服务器租一天多少钱,绝地求生自定义服务器怎么样?绝地求生自定义服务器使用攻略...
- 闭关休养or趁火打劫:疫情之下焦点行业网络威胁分析
- ZooKeeper 特点有哪些?
- python空条件_python – 如何在SQLAlchemy中指定一个条件,其中一个条件要求列为空?...
- python 堆栈_Python堆栈
- Linux内核开发_内核模块
- Android-传感器开发
- Spring中的Bean可以绕过生命周期管理吗?
- JAVA- Jersey使用示例
- 《2019上半年网络工程师考试大纲》
- android定时启动 tasker,Android 神器 Tasker 个人的一些配置
- java第十一次作业
- iPhone屏幕适配(之屏幕尺寸)