CSS里Postion几个取值relative、absolute、static、fixed的区别和用法
---恢复内容开始---
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的区别和用法的更多相关文章
- CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- 在jsp的js和css里面使用EL表达式取值|style里面用$取值
众所周知,如果直接在jsp的js或者css语句块里面写${***}取值的话,程序会不识别这玩意,但是,我们有时候确实需要动态取值,比如,js为了获得对象的某一个值,不方便用js的getElementB ...
- 对<tr><td>标签里的input 循环取值
需求描述:单击table整行,跳转到具体的信息页面 关键就是获取整行的id,传给后台做查询,返回list 解决思路:用带参数函数传过去id,然后在js的函数中用$("#id"). ...
- z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.
今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...
- web(六)css的基本语法、取值与单位
css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...
- JQuery里属性赋值,取值prop()和attr()方法?
1.赋值的时候 如果是<input type="checkbox" checked>这样的只有属性名就能生效的属性 推荐prop,即:$('input').prop(' ...
- CSS宽度高度的百分比取值基于谁
width=num% , height=num% 基于以下几点 1. 若元素不存在定位: 则基于直接父元素的宽高度 2. 若元素存在定位 且 定位为 relative, 则也基于直接父元素的宽高度 3 ...
- 前端JS获取路由地址里的参数QueryString取值
参数的获取 声明一个函数 //参数name是路由参数 engNo function getQueryString(name) { var reg = new RegExp("(^|& ...
随机推荐
- Properties集合_练习
定义功能:获取一个应用程序 运行次数,如果超过5次,给出使用次数已到请注册的提示,并不要再运行程序 思路: 1.定义计数器:每次程序启动都需要计数一次,并且是在原有的次数上进行计数. 2.计数器就 ...
- c#中开发ActiveX的学习笔记
1.为什么要用ActiveX? 网页本身的功能是有限的,要想实现一些网页本身不支持的功能,比如:网页上的p2p视频播放,就得靠ActiveX这种古老的技术. 2.c#能开发ActiveX吗? 严格意义 ...
- [NOI2005]瑰丽华尔兹
嘟嘟嘟 这题大家应该都做过,就是暴力dp+单调队列优化. dp方程其实很好想,最初是这样的:dp[t][i][j]表示时刻\(t\)后,走到\((i, j)\)格子的最远路程,于是就有: \[dp[t ...
- Arduino IDE for ESP8266 项目(4)HTTP客户端+服务端
Arduio for esp8266 官网API:http://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/readme.html 很有 ...
- Arduino IDE for ESP8266 ()组网
多个esp8266连接在同一个 WIFI上,在局域网内部,相互传数据 #include <ESP8266WiFi.h> #define led 2 //发光二极管连接在8266的GPIO2 ...
- 编译安装nginx,并使用systemd管理nginx
#tar zxvf nginx-1.8.1.tar.gz #cd nginx-1.8.1/ #make && make install #cat /etc/systemd/system ...
- Objective-C @executable_path、@loader_path和@rpath
工程配置中,有三个路径和库的加载息息相关: 1.@executable_path 可执行文件的路径,例如/Applications/WeChat.app/Contents/MacOS. 2.@load ...
- Photoshop 基础四 填充(渐变、油漆桶)
一 渐变 二 油漆桶 一 渐变 技术点:选框工具(矩形.圆形.选区.反选).变换(透视).渐变 1)新建图层——>矩形选框工具,画一个矩形 2)渐变工具,定义渐变颜色 3)编辑——>变换— ...
- ubuntu开机自动运行用Qt写的程序
这里介绍一种在ubuntu系统开机自动运行使用Qt编写的程序的方法.首先要注意要自动运行Qt编的程序,不需要先打开Qt,而是直接运行编译好的与工程名同名的可执行文件即可,比如我要运行的工程为QRDec ...
- python条件、循环语句
既然讲到语句,那先说明一下语句块.语句块不是一种语句,是一组语句.在条件为真时执行或者多次的一组语句.主要注意其格式,用冒号来标识语句块的开始,块中每行缩进相同的量,一般4个空格(tab字符位置为8个 ...