1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间, 绝对定位:position:absolute, 被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除.

2.父容器使用相对定位,子元素使用绝对定位后,这样的位置不再于浏览器左上角,而是相对于父容器左上角

3.相对定位和绝对定位需要top,right,bottom。Left使用来定制具体位置,这四个属性只有在该元素使用定位后才会生效,其他情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下。或及时使用左,又使用右。

CSS中的相对定位和绝对定位的更多相关文章

  1. css中的相对定位与绝对定位

    之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...

  2. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  3. css 中的相对定位和绝对定位

    1.默认不写position的话,值为static. 2.相对定位:相对于元素自己本身的位置偏移,虽然位置偏移,但元素本身占据的空间并不释放. 3.绝对定位:相对于离它最近的,position不为st ...

  4. css中的相对定位与绝对定位的区别

    1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...

  5. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

  6. CSS网页中的相对定位与绝对定位

    在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对).有很多朋友对这条指令的用法还是 ...

  7. div中的相对定位与绝对定位

    1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动.(再一点,相对定位时,无论是否 ...

  8. CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)

    相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...

  9. 遮罩层中的相对定位与绝对定位(Ajax)

    前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到Boss满意的程度,做了半年C/S,反过来做B/S,顿时感到技术还 ...

随机推荐

  1. Android Studio安装更新终极解决方式

    之前写过一篇Android SDK无法更新的博文,其实该方式对Android Studio同样有效,大伙可以下载网盘中分享的小软件,若搜索到通道后提示需要更细,也可以选择更新.参考:http://bl ...

  2. js(function(){alert(‘’‘)})

    function(){alert('sss')}是个匿名函数.没有名字.所以没有办法调用.在外面加个括号,就变成了一个值,值的内容是函数的引用.例如var a = (function(){" ...

  3. Qt开发环境中使用报表控件FastReport遇到的一些问题(一)

    FastReport是一款优秀的报表控件,由俄罗斯开发,国内有代理商.Qt环境下可实现报表功能的还有一款叫NCReport,也是收费控件,比较来比较去还是觉得前者功能强点.网上讲解此控件在Qt中使用的 ...

  4. 鼠标点击页面任意标签,alert该标签名称(考虑兼容性)

    <script type="text/JavaScript"> document.onclick=function(e){ e=e||window.event;     ...

  5. As 和 Is的区别

    首先来说说As是干什么的: 代码: void OnMouseEnter(object sender, MouseEventArgs e){ Ellipse ell = sender as Ellips ...

  6. Linux TC基于CBQ队列的流量管理范例

    参考了TC的很多文档,自己也整理了一篇配置记录.在实际使用过程中效果还不错,在此分享给大家以备参考.环境:局域网规模不是很大40多台机器. NAT共享上网(内网:eth0 外网:eth2)CBQ是通过 ...

  7. ionic react-native和native开发移动app那个好

    ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...

  8. CF 628B New Skateboard --- 水题

    CD 628B 题目大意:给定一个数字(<=3*10^5),判断其能被4整除的连续子串有多少个 解题思路:注意一个整除4的性质: 若bc能被4整除,则a1a2a3a4...anbc也一定能被4整 ...

  9. MySQL物理文件组成

    日志文件 错误日志:Error Log 错误日志记录了MySQL运行过程中所有较为严重的警告和错误信息,以及MySQL Server每次启动和关闭的详细信息.在默认情况下,系统记录错误日志的功能是关闭 ...

  10. knockout 学习实例2 text

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...