CSS的相对定位和绝对定位

relative的意思就是相对自己的一开始的位置进行的定位。如图：

但是这个元素的本身边距不变，还在原来位置

absolute的意思就是

如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）

一般z-index和left,top,right,bottom这些元素也是在设置了position的定位之后才会用到

时间： 2024-07-29 02:52:42

CSS的相对定位和绝对定位的相关文章

CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: 1. 标准流   (最稳定) 2. 浮动流   (float 其次) 3. 定位流    ( 稳定性最后) 定位是完全脱离标准流的一种布局方式. 其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学

详解CSS的相对定位和绝对定位

原文地址:http://www.3lian.com/edu/2015/01-31/191131.html 详解CSS的相对定位和绝对定位 感谢 3lian8 的投递 时间:2015-01-31 来源:cmsgood zcp CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100p

开发中如何合理使用CSS的相对定位和绝对定位

在谈论如何使用时.我们先来看看CSS对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用.relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义.absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. 什么是文档流? 文档流是将

css 中相对定位和绝对定位

1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏移(设置top, left...后) 仍然处于标准文档流中 随即拥有偏移属性和z-index属性 绝对定位: 建立了以包含块为基准的定位 完全脱离了标准文档流 随即拥有偏移属性和z-index属性 3.  先上示例代码 1 <!DOCTYPE html> 2 <html lang="

css关于相对定位与绝对定位

1.一般如果我们不给元素设置position,则默认为static,此时是该元素是没有定位的,像left/right这些偏移属性都是没有效果的. 2.position:relative (相对定位) 若设置为相对定位,即可配置left/right这些偏移,相对于该元素原有位置进行偏移,并且,原有位置任占据着文档流的空间,偏移并不会挤开别的元素,所以如果发生重叠,可以通过z-index设置堆叠顺序. 3.position:absolute(绝对定位) 当一个元素设置为绝对定位的时候,在文档流中是不

秒懂相对定位与绝对定位，【组合拳relative,absolute】 瞬间清醒有木有？

上文:组合拳 层级关系为: <div ----------- position:relative; 不是最近的祖先定位元素,不是参照物 <div----------没有设置为定位元素,不是参照物 <div-------- position:relative 参照物 <div box1 <div box2 --–position:absolute; top:50px; left:120px; <div box3 效果图: 为改变参照物(橘色框)后的效果 层级关系为: &l

css 浮动 相对定位 绝对定位区别

今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然还得找人去做:不同的是,后台的就可以放心找人做,只要测试得没问题,效率还过得去就可以了,所以最近打算学好点前端,自己接一些单子来做.废话不多说,入正题: html是按照文件流(普通流)的方式加载的,但是全部是普通流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先

div+css相对定位和绝对定位

今天突然发现自己在布局的时候思路很乱,于是毅然决然的想要重新的理一下自己的布局思路,今天就先从定位开始吧~ 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,如果对象的父级没有设置定位属性,则依据body对象左上角作为参考进行定位.绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持). 同时z-index仅能在定位元素上奏效!!! 相对定位(relative):对象不可层叠,依据left,ri

CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移. right 定义了定位元素右外边距边界与其包含块右边界之间的偏移. bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移. left 定义了定位元素左外边距边界与其包含块左边界之间的偏移. overflow 设置当元素的内容溢出其区域时发生的事情. clip 设置元素的