absolute与relative
absolute与relative我们都知道absolute是绝对定位，relative是相对定位，但 是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间 又有什么样的技巧呢？下面我们就来一一解读。 Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认 依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位， 位置将由TRBL决定。
一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而 Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相 似，但是还是有本质的区别的。 Relative，CSS中的写法是：position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合 TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。但是z- index也不是万能的，z-index也受到了等级的限制，关于这个等级的限制请查看(注：这个地方转载失效，不好意思)。 |
absolute与relative相关推荐
- css中position的两种定位（absolute、relative）
[position:absolute] 意思是:绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 如果没有TRBL,以父级的左上角,在没 ...
- 探究position定位中absolute和relative的异同
相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方式来揭露absolute和rel ...
- Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- position中的absolute与relative的区别
Position(位置)属性值需要注意的地方 position的属性有: Absolute:绝对定位,是相对于最近的且不是static定位的第一个父元素来定位,元素位置通过"right&qu ...
- position absolute 与 relative 区别
position absolute 与 relative 区别 absolute 绝对定位元素可以放置到页面上的任何位置 relative 相对定位会按照元素的原始位置对该元素进行移动
- position属性的absolute和relative的理解
概述: 每个定位的意义:相对定位是"相对于"元素在文档流中初始位置的,而绝对定位是"相对于"最近的已经定位的祖先元素. 主要: (其实对于定位的理解,主要问题是 ...
- position：absolute与relative的区别
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,在没有 ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative ...
- Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
最新文章
- 使用钩子函数[4] - 钩子链和 CallNextHookEx 的返回值
- OpenMV生成AprilTag码
- Kaldi拜拜！PyTorch语音工具包SpeechBrain要来了，支持多种语音任务，实现最强水准...
- MacBook file storage 256g is ok
- LeetCode 1430. 判断给定的序列是否是二叉树从根到叶的路径（递归）
- SVN登录时不断弹出用户名密码输入
- 《Spring参考手册》中定义了以下几个AOP的重要概念
- vtk 转换视角_vtk使用基础[1]
- 变换例题_矩阵的初等变换
- Yii框架官方教程增补篇3——开始：创建第一个Yii应用
- Centos7 Zabbix3.2安装(yum)
- Golang: How to sort struct with multiple sort parameters?
- C10K问题—高并发网络IO模型
- 关于笔记本电脑网卡出问题的简单解决
- PNP型三极管s9012驱动共阳极数码管
- mysql日期相减返回月数_MySql日期相减返回月数_MySQL
- 4.16 期货每日早盘操作建议
- 游戏拳皇命运服务器维护,拳皇命运
- amd显卡风扇调节_解决办法：设置显卡风扇速度的教程方法
- ECharts 饼图数据放在饼图内部显示