CSS 浅析position：relative/absolute定位方式

一、position：relative 相对定位

分两种情况分析：
· 无 position: relative；
· 有 position: relative。

代码如下图：

显示效果如下图：

 我们给 box4加入 position: relative属性.* 如果元素加上 position: relative 属性; 元素默认为 块级元素.* 如果未给出TRBL（top, right, bottom, left）, 元素位置不变, 样式不变.* 给出 TRBL时，是相对于 之前的位置（元素初始位置或称为元素未添加 position: relative时的位置）进行移动.* 并且 box4被解放出来了， 不会被父元素包裹.

二、position: absolute 绝对定位

分三种情况分析：
·无 position: absolute；
·有 position: absolute；
·有 position: absolute，并给父级元素加 position: relative。

代码如下图：

浏览器显示如下图：

 第二种情况：* 给 box4加入 position: absolute属性.* 如果元素加上 position: assolute 属性; 元素默认 display: inline-block.* 如果未给出TRBL（top, right, bottom, left）, 元素位置不变，仅仅是变为 行内元素.* 给出 TRBL时，是相对于 Body进行移动.第三种情况：* 给 box4加入 position: relative属性.* 如果元素加上 position: relative 属性; 元素默认为 块级元素.* 如果未给出TRBL（top, right, bottom, left）, 元素位置不变, 样式不变.* 给出 TRBL时，是相对于 之前的位置（元素初始位置或称为元素未添加 position: relative时的位置）进行移动.* 并且 box4被解放出来了， 不会被父元素包裹.

转载于:https://www.cnblogs.com/stephentian/p/CSS.html

CSS 浅析position：relative/absolute定位方式相关推荐

CSS 相对|绝对(relative/absolute)定位系列（一）
一.有话要说以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
CSS 相对|绝对(relative/absolute)定位系列
一.有话要说以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
html div相对位置,CSS 相对|绝对(relative/absolute)定位系列（一）
1.绝对定位和浮动元素是近亲:都具备包裹性和破坏性包裹性:包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100 ...
CSS 相对/绝对(relative/absolute)定位系列（二）
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1330 一.常 ...
CSS 相对|绝对(relative/absolute)定位
一.absolute属性的情感化认识我对position:absolute属性感性化的认识:absolute是一个善良的有个性的,我行我素.喜欢凌驾一切之上的魔鬼.这家伙,不喜欢也算不上讨厌,但是知 ...
CSS 相对|绝对(relative/absolute)定位系列（二）
1. 因为事先标准就已经在文字的后面显示,设置absolute之后因为跟随性仍然是在原来的文字,然后再设置margin实现定位即可 2. absolute正业之元素隐藏元素隐藏与显示是我们在页面制作 ...
CSS 相对|绝对(relative/absolute)定位系列（三）
1. absolute与等高布局拿简单的两栏布局举例,左栏与右栏有不同的背景色,且中间隔边框线分隔,如何实现?因为随着内容的不同,有可能左侧栏高度较高,也有可能是右侧栏高度较高.所以,要实现无缝的填 ...
[css] 说说position的absolute和fixed共同与不同点分别是什么？
[css] 说说position的absolute和fixed共同与不同点分别是什么? 相同点: 1.都是用来给元素定位的属性,具有定位元素的一切特点(例如脱离文本流.不占据空间等等): 2.改变元素 ...
CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

CSS 浅析position：relative/absolute定位方式

一、position：relative 相对定位

二、position: absolute 绝对定位

CSS 浅析position：relative/absolute定位方式相关推荐

最新文章

热门文章