定位position-relative

position:absolute和position:fixed都会导致元素脱离文档流（CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位）。

position:relative是基于该元素本身原来的位置来定位的，所以，当它进行位置移动时，实际上它还是占用着原来的位置的

示例

<style type="text/css">div {float: left;width: 100px;height: 100px;background-color: red;}.w {position: relative;left: 200px;background-color: saddlebrown;}
</style><body><div></div><div></div><div></div><div></div>
</body>

如下图所示，四个div排列在一起

给第二个div加上一个w类，就成了下图这样

那个relative定位的div根据它本来所在的位置向右移动了200px，就到了第三个div的后面了，但是，显而易见的，它原本所在的位置并没有被第三个div补上，第三、四个div还是保持原位

定位position-relative相关推荐

定位：relative相对定位、absolute绝对定位、fixed固定定位
作者有话说:在学定位之前有了解过吗?再没学浮动之前,这些块元素标签会出现在一列,要想实现并排就可以使用浮动float,现在我们可以学习定位,给背景图片或者图片.div.border等添加属性等,有定位 ...
定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
CSS 元素的定位之相对定位 position: relative
在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原 ...
微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
position:relative与position:absolute的定位区别
CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...
深入理解position:relative 与 position:absolute（divb相对于diva进行绝对定位）
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relative ...
定位--position属性
一.定位--position属性 1.static:默认值没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right botto ...
position:relative 与 position:absolute
position 有三个值,static(静态).relative(相对).absolute(绝对):由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的 ...

定位position-relative

定位position-relative相关推荐

最新文章

热门文章