position属性一共有4个值,分别是static、absolute、relative、fixed。

  static为默认值,指块保持在原本应该在的位置上,即该值没有任何移动的效果。

  absolute属性是参照浏览器的左上角,配合top、right、bottom、left进行定位,在没有设定top、right、bottom、left时,默认根据父级的坐标原点为原点。如果设定了top、right、bottom、left,并且父级没有设定position属性,那么当前的absolute则以浏览器的左上角为原点进行定位,位置将由这四个属性决定。

  relative属性与absolute属性完全不同,子块则相对于其父块中它本来应该在的位置进行定位,同样采用top、right、bottom、left这4个属性配合。

  fixed属性与绝对定位很类似,只不过固定定位时,元素会完全从文档流中去除,不会有相对于文档中任何部分的位置。

css 之 position定位的更多相关文章

  1. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  2. css元素position定位和z-index

    网页元素定位 1.注意点: 1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高.此时最好通过padding等来控制高度. 2)对于同一个元素,不要讲float ...

  3. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  4. CSS使用position定位后导致元素浮动

    1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolut ...

  5. css中position 定位的兼容性,以及定位的使用及层级的应用

    一.首先我们来看看定位的兼容性,当然是在IE6.7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧: 1.在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素 解 ...

  6. CSS——对position定位和margin-top的理解

    一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...

  7. css的position定位终极总结

    relative相对定位是相对于自己的位置定位,absolute绝对定位是向上级一级一级搜索有position属性的div,如果没有找到就相对于body定位

  8. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  9. position定位的小问题

    css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...

随机推荐

  1. 关于js中onclick字符串传参问题(html="")

    规则: 外变是“”,里面就是‘’外边是‘’,里边就是“”   示例: var a="111"; var html="<a onclick='selecthoods( ...

  2. BFS:HDU-1242-Rescue(带守卫的迷宫问题)(优先队列)

    解题心得: 1.读清楚题意,本题的题意是有多个'r'(起点),多个r多个bfs比较最短的时间即可,但是hdoj的数据比较水,直接一个起点就行了,迷宫里有多个守卫,如果在路途中遇到守卫会多花费一个时间点 ...

  3. Reachability from the Capital

    题目描述 There are nn cities and mm roads in Berland. Each road connects a pair of cities. The roads in ...

  4. P1101 单词方阵

    题目描述 给一 n \times nn×n 的字母方阵,内可能蕴含多个"yizhong"单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着 88 个方向的任一方向,同一单词摆放 ...

  5. 给B公司的一些建议(又一篇烂尾的文章)

    感慨:太多太多的悲伤故事,发生在自己身上,发生在自己的身边.因此,为了避免总是走"弯路",走"错误"的道路,最近一直在完善自己的理论模型. 烂尾说明:本文是一篇 ...

  6. Windows下如何用CMD命令跳转到指定的目录下

    以Window7为例说明,想要跳转到I:\adt-bundle-windows-x86-20130219\sdk\platform-tools目录下. 1.在运行中打开CMD命令窗口如下图所示: 2. ...

  7. Pre 自动换行和手动换行

    pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre ...

  8. 34、Java集合框架List,Map,Set等全面介绍(转载)

      Java Collections Framework是Java提供的对集合进行定义,操作,和管理的包含一组接口,类的体系结构.   Java集合框架的基本接口/类层次结构: java.util.C ...

  9. 引用其他头文件时出现这种错误,莫名其妙,error C2065: “ColorMatrix”: 未声明的标识符

    今天做项目时,直接拷贝了另一个工程里的头文件和源文件,然后运行时就出现这种问题,莫名其妙,在原程序里运行一点问题就没有,但是在新工程里就是error. >e:\c++\button_fly2\b ...

  10. hnust 搬书

    问题 G: 搬书 时间限制: 1 Sec  内存限制: 128 MB提交: 576  解决: 49[提交][状态][讨论版] 题目描述 XCQ队长要退役啦,由于队长常年刷题,机位上摆着各类算法书,一个 ...