CSS 中 Position relative 和 absolute区别

Relative Positioning

A relative positioned element is positioned relative to its normal position.

The reserved space for the element is still preserved in the normal flow.

relative 位置是相对元素的父元素的位置。left, top 是相对其父元素进行调整, 但是位置还是和DOM中的看起来一致(in normal flow)。

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static

Absolutely positioned elements are removed from the normal flow.

absolute 位置是相对第一个具有position(fixed, relative, absolute) 属性的父元素位置, 实际位置可能和DOM中的不一致(be removed from the normal flow)。

时间： 2024-04-20 18:03:14

CSS 中 Position relative 和 absolute区别的相关文章

css中position属性（absolute/relative/static/fixed）

css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. position:relative 对象遵循正常文档流,相对的是它原本在文档流中的位置而进行的偏移,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. position:abso

CSS中"position:relative"属性与文档流的关系

前言近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流. 博文地址:CSS中"position:relative"属性与文档流的确切关系 "relative"与文档流说到标准,最权威的自然莫过于CSS标准文档.经过一番繁琐的查找之后(w3c网站

css中position:relative的真正理解

其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的. position属性是用四种定位.默认的是static. position:absolute(绝对定位) --是脱离文档流,相对于父级元素(包含这个position:relative)定位,当然如果没有,那就是相对于body定位的. position:relative(相对定位) --单独使用,

css中position:relative和overflow:hidden的问题

<div style="height:100px; width:100px; background:#CCC; overflow:hidden;"> <div style="height:300px; width:90px; background:#999; position:relative;"></div> </div> ↓ 解决方案:将父标签的position也设置成relative,代码如下: <div

css中position属性：absolute和relative

absolute :将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依据 body 对象.而其层叠通过z-index属性定义. relative :对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置.

css中position属性值的区别

1.relative 元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白 2.absolute 原来的元素空间被删除,新生成一个块级框,与页面内容相对静止,如果页面向下滑动,该块级框会跟随向上运动 3.fixed 原来的元素空间被删除,新生成一个块级框,固定在页面的一个位置,即使向下滑动页面,该块级框依旧位置不改变 4.sticky 跟随页面一起滚动,当超过阈值以后,固定在页面边缘,相当于 absolute和fixed的混合例如:#one { position: sticky

css position: relative，absolute详解

关于CSS中 position在布局中非常重要,查了很多资料都说的很难理解,下面说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素. absolute: 对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8