css定位问题，position：absolute/relative

最新推荐文章于 2019-02-20 13:49:39 发布

SmthiHy

最新推荐文章于 2019-02-20 13:49:39 发布

阅读量358

点赞数

分类专栏： css 文章标签： css position absolute re

本文链接：https://blog.csdn.net/hongyinghehe/article/details/51028407

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

看到网上都说的好复杂，两个图就明白了absolute/relative的区别。。虽然很基本，哈哈，写给自己看免得以后又忘记了。随便在w3cschool上面写了代码。

1.绝对定位

会脱离文档流，原点根据最近一个有relative/absolute定位的父类元素（相对/绝对都可以）

结果：

2.相对定位

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在

ps：csdn的文本编辑器好坑啊

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SmthiHy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS之定位布局 -- position：relative/absolute/fixed/sticky

qq_48802092的博客

07-27

437

特点默认文档流定位---positionstatic;

CSS position: absolute、relative定位问题详解

weixin_34235135的博客

08-31

249

CSS2.0 HandBook上的解释：　　设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。 TRBL属性（TOP、RIGHT、BOTTOM、LEFT）　　当设定position:absolute　　如果父级（无限）没有设定positio...

参与评论您还未登录，请先登录后发表或查看评论

关于relative和absolute定位问题

jczhang294的博客

07-30

976

absolute是相对于离它最近的父级元素（父级元素进行的定位方式必须是relative和absolute并不一定是直接父级元素）如果所有父级元素都没有定位的话，那么就以body为标志定位。如果是relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。另外absolute脱离标准流并且不占用标准流的位置。父级元素一般用relative因为子元素用absolute相对于父元素定...

关于CSS样式position属性的定位 relative ,absolute,fixed,static

kakamonster的博客

02-20

167

static(静态)：没有特别的设定，遵循基本的定位，不能通过z-index进行分层 absolute（绝对）：脱离文档流，通过top,bottom,left,right定位。选取最近的一个最优定位设置的父级对象，进行绝对定位，如果对象的父级没有设置定位属性，将以body坐标原点进行定位，可以通过z-index进行分层 relative（相对）：对象不可层叠，不脱离文档流，通过top,bottom...

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

weixin_34199405的博客

11-16

445

一、position：relative 相对定位分两种情况分析： · 无 position: relative； · 有 position: relative。代码如下图：显示效果如下图：我们给box4加入position:relative属性. *如果元素加上position:relative属性;元素默认为块级元素. ...

层叠加的5条原则

哲

11-04

645

首先明确几点在文中所需要用到的概念：静态定位：position:static（为position属性的默认值）。动态定位：position:relative或position:absolute或position:fixed。祖元素：任意包含该元素的元素。父元素：直接包含该元素的祖元素。同辈元素：拥有共同的父元素的元素。注：这些概念为作者自定义，仅用于本文。

css position: absolute、relative详解

10-30

总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...

position:relative/absolute无法冲破的等级

10-31

### Position:relative/absolute无法冲破的等级解析 #### 前言在Web前端开发过程中，元素的定位机制是至关重要的。CSS提供了多种定位方式，包括`static`、`relative`、`absolute`、`fixed`和`sticky`。本文将深入...

CSS中的position:relative;的作用示例介绍

12-10

在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`以及与之相关的其他定位方式。首先，我们来看`position`属性的四种主要值： 1. **...

CSS中的position 的值： absolute 与 relative

04-12

在CSS（层叠样式表）中，`position`属性...总结起来，`position: relative`和`absolute`在CSS布局中各有其独特的功能和用途。理解并熟练运用它们，能帮助开发者更好地控制网页元素的布局，实现更复杂、精细的设计效果。

相对（relative）定位和绝对（absolute）定位

qq_39561207的博客

08-18

5160

首先，position的这两个属性一般是不使用的，因为有了浮动，所以我们才需要position属性来实现我们想要的布局。 1.相对定位（relative）：相对于原来位置（原来位置指在文档流中默认的位置，若加上了浮动时，那么这个原来位置就是你设定浮动时的位置）的偏移，原来位置依然占据空间。（1）box1和box2都没有设置position属性（没有设置float属性时）效果图：我...

请教CSS中的position:relative;的作用

u010227447的专栏

06-07

8988

对于position的其它几个属性，我都搞懂了引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 relative : 　对象不可层叠，但将依据left，right，top，

css中position相对定位和绝对定位(relative,absolute)详解

chendanhong92的博客

08-30

6237

css中position相对定位和绝对定位

定位position详解:relative与absolute

allenmu1982的博客

04-25

400

一,position:relative相对定位 1，不会改变行内元素的display属性 3，并没有脱离普通流，只是视觉上发生的偏移。 html元素： <div class="box"> <div class="box2"></div> </div> css清单： .box{ ...

总结·CSS3中定位模型之position属性的使用方法

weixin_30522183的博客

06-19

290

一、position元素介绍 position属性规定了元素的定位类型，通过定位，可准确地定义元素相对于其正常位置而应该出现的位置，或者是相对于父元素、另一元素和浏览器窗口等的位置。 position属性包含有5个属性值，分别为static、relative、absolute、fixed以及inherit。具体属性值描述如下表格所示：属性值描述所属类别 s...

子类absolute相对父类不同position的定位

萌新_zackXiong_勇闯前端~

12-12

1465

在学习前端的时候遇到过一个问题: 当子类position为absolute时,父类的position 不同时子类会怎么定位. 直接上图好理解~ 灰色框框为祖父元素 position:relative 红色框框为父元素 position: absolute/relative/inherit/…. 蓝色框框为子元素 position :absolute 各种情况:...

CSS的定位即position属性的值有4种：static,relative,absolute,fixed

汪小哥

06-12

1571

最近这今天看视频，学习了一点javascript的知识, static是默认值，元素位于文档流中，正常显示，忽略元素的top,bottom,left,right属性。需要注意的一点是z-index属性在这个定位方式下始终为0.如果其他定位方式的漂浮元素要位于static定位的内容之下，必须使用负数的z-index属性才行。relative是保留元素在文档流中占用的位置和尺寸，元素在static模式的

css层的定位position、absolute、relative层叠加的五条叠加法则

weixin_30700099的博客

03-03

567

css层的定位position、absolute、relative层叠加的五条叠加法则貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。首先明确几点在文中所需要用到的概念: 静态定位：pos...

CSS 元素的定位之相对定位 position: relative