---恢复内容开始---

static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明。

relative:相对定位,生成相对定位的元素,通过top\bottom\left\right的设置相对于其自身的位置进行定位。可以通过z-index进行层级分级。

absolute:绝对定位,生成绝对定位的元素,相对于static定位以外其他定位(如relative\absolute\fixed)的第一个父元素进行定位,如果父元素没有定位则相对于浏览器窗口定位,可以通过z-index进行层级分级。

fixed:固定定位,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过left\top\right\bottom属性进行规定。可以通过z-index进行层级分级。

fixed属性是相对于浏览器窗口定位且随窗口的滚动而移动,而absolute是相对于浏览器窗口定位但不随窗口的滚动而移动。

---恢复内容结束---

CSS里Postion几个取值relative、absolute、static、fixed的区别和用法的更多相关文章

  1. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  2. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  3. 在jsp的js和css里面使用EL表达式取值|style里面用$取值

    众所周知,如果直接在jsp的js或者css语句块里面写${***}取值的话,程序会不识别这玩意,但是,我们有时候确实需要动态取值,比如,js为了获得对象的某一个值,不方便用js的getElementB ...

  4. 对<tr><td>标签里的input 循环取值

    需求描述:单击table整行,跳转到具体的信息页面  关键就是获取整行的id,传给后台做查询,返回list 解决思路:用带参数函数传过去id,然后在js的函数中用$("#id"). ...

  5. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  6. web(六)css的基本语法、取值与单位

    css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...

  7. JQuery里属性赋值,取值prop()和attr()方法?

    1.赋值的时候 如果是<input type="checkbox" checked>这样的只有属性名就能生效的属性 推荐prop,即:$('input').prop(' ...

  8. CSS宽度高度的百分比取值基于谁

    width=num% , height=num% 基于以下几点 1. 若元素不存在定位: 则基于直接父元素的宽高度 2. 若元素存在定位 且 定位为 relative, 则也基于直接父元素的宽高度 3 ...

  9. 前端JS获取路由地址里的参数QueryString取值

    参数的获取 声明一个函数 //参数name是路由参数 engNo function getQueryString(name) { var reg = new RegExp("(^|& ...

随机推荐

  1. vue_模板渲染

    渲染 当获取到后端数据后,我们会把它按照一定的规则加载到写好的模板中,输出成在浏览器中显示的HTML,这个过程就称之为渲染. vue.js是在前端(即浏览器内)进行的模板渲染. 前后端渲染对比 前端渲 ...

  2. Oracle导入程序Imp的使用详解

    Oracle的导入实用程序(Import utility)允许从数据库提取数据,并且将数据写入操作系统文件.imp使用的基本格式:imp[username[/password[@service]]], ...

  3. hdu3400(三分套三分)

    题意:平面上两条线段 AB,CD. A到B的速度v1,C到D的速度v2,其它地方的速度V3. 求A到D的最短时间. 解法:三分嵌套三分.首先假设AB上的点确定后.确定CD的点的确定应该是符合三分性质的 ...

  4. luogu P1858 多人背包

    嘟嘟嘟 既然让求前\(k\)优解,那么就多加一维,\(dp[j][k]\)表示体积为\(j\)的第\(k\)优解是啥(\(i\)一维已经优化掉了). 考虑原来的转移方程:dp[j] = max(dp[ ...

  5. Find a multiple POJ - 2356 (抽屉原理)

    抽屉原理: 形式一:设把n+1个元素划分至n个集合中(A1,A2,…,An),用a1,a2,…,an分别表示这n个集合对应包含的元素个数,则:至少存在某个集合Ai,其包含元素个数值ai大于或等于2. ...

  6. 错误:java.io.FileNotFoundException: /storage/emulated/0/Documents/eclipse-inst-win64.exe

    在Android服务的最佳实例中:https://www.cnblogs.com/hh8888-log/p/10300972.html,在最后运行的时候,点击Start Download按钮总是会报一 ...

  7. Android学习之触点事件的处理

    知识点: 1. Android开发中的运动事件:触摸屏(TouchScreen)和滚动球(TrackBall) 2.对运动事件的处理:MotionEvent 3.触摸时必发的三个MotionEvent ...

  8. java 面向对象基本概念

    1.面向对象与面向过程 (1).都是解决问题的思维方式,都是代码组织的方式. (2).解决简单问题可以使用面向过程 (3).解决复杂问题:宏观上使用面向对象把握,微观处理上仍然是面向过程. 2.面向对 ...

  9. java計算年齡的工具類

    整理一篇Java計算年齡的工具類,方便實用 public static int getAgeByBirth(String birthday) throws ParseException { // 格式 ...

  10. java算法----排序----(2)选择排序

    package log; public class Test4 { /** * java算法---选择排序 * * @param args */ public static void main(Str ...