position:ablosute和position:relative的简单理解

##position:ablosute和position:relative的简单理解 ##

先看一下两者的定义：
relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

关于relative和absolute这段***话更简洁***
/*absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位，按照我们中国人的理解观念，这个其实是相对定位，是脱离文档流的。用了abolute属性，原有float属性将失效；
relative的英文意思是相对的意思，实际上是相对于对象当前位置的定位。而且是不脱离文档流的，就算用top、lef、bottom、right或margin将其移动位置，它也会在原来的文档流中占有自己实际大小的一块位置。
absolute则会找他的父元素,直到找到一个position属性不是static的父元素,可能是它的上一层,也可能是好几层,如果都没有定义position属性的话,那将根据body定位.
还有一个区别是:relative的元素,不管你怎么改变top或是left,他原来的那一块div的位置还是存在着的,会占着那边.如果有人挤掉了那一块,那他的位置也会改变.

position:ablosute和position:relative的简单理解相关推荐

position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
区分position:relative； position:absolute； position:fixed
区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; posit ...
css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
Android：安卓学习笔记之共享元素的简单理解和使用
Android 共享元素的简单理解和使用 1 .基本概念 2.基本使用 1.Activity to Activity跳转实现 1.1.使用步骤 1.2.案例说明 2.Fragment to Fragm ...
Deep Reinforcement Learning: Pong from Pixels翻译和简单理解
原文链接: http://karpathy.github.io/2016/05/31/rl/ 文章目录原文链接: 前言 Policy-Gradient结构流程图 Deep Reinforcement ...
Android：安卓学习笔记之Bitmap的简单理解和使用
Android Bitmap的简单理解和使用 Android Bitmap 一.Bitmap的定义二.Bitmap的格式 2.1 存储格式 2.2 压缩格式三.Bitmap创建方法 3.1 Bit ...
android 点击事件消费,Android View事件分发和消费源码简单理解
Android View事件分发和消费源码简单理解前言: 开发过程中觉得View事件这块是特别烧脑的,看了好久,才自认为看明白.中间上网查了下singwhatiwanna粉丝的读书笔记,有种茅塞顿开 ...
【转载】Deep learning：十九(RBM简单理解)
Deep learning:十九(RBM简单理解) 这篇博客主要用来简单介绍下RBM网络,因为deep learning中的一个重要网络结构DBN就可以由RBM网络叠加而成,所以对RBM的理解有利于我 ...

position:ablosute和position:relative的简单理解

position:ablosute和position:relative的简单理解相关推荐

最新文章

热门文章