css 之 position定位
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定位的更多相关文章
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- css元素position定位和z-index
网页元素定位 1.注意点: 1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高.此时最好通过padding等来控制高度. 2)对于同一个元素,不要讲float ...
- 【CSS】position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS使用position定位后导致元素浮动
1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolut ...
- css中position 定位的兼容性,以及定位的使用及层级的应用
一.首先我们来看看定位的兼容性,当然是在IE6.7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧: 1.在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素 解 ...
- CSS——对position定位和margin-top的理解
一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...
- css的position定位终极总结
relative相对定位是相对于自己的位置定位,absolute绝对定位是向上级一级一级搜索有position属性的div,如果没有找到就相对于body定位
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...
- position定位的小问题
css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...
随机推荐
- 阻止touchslider事件冒泡,防止左右滑动时出发全局滑动事件
最近适用mui开发一个项目,全局有个侧滑菜单offCanvasSideScroll,首页用了一个touchslider插件来实现行的左右滚动 touchslider的当滚动方向与侧滑菜单滚动方向一致时 ...
- 常用自写函数[更新ing]
int gcd (int x, int y)//最大公约数 { return y == 0 ? x : gcd( y , x % y ); } int lcm(int x, int y)//最小公倍数 ...
- GTF/GFF
- linux下安装VMware出错:Gtk-Message: Failed to load module "canberra-gtk-module"解决方法
最近又有兴趣在linux下搭建个虚拟机,于是去找了个VMWorkstation,安装的过程中报了两个错误 Gtk-Message: Failed to load module "pk-gtk ...
- Girls and Boys-hdu 1068
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 决策树python实现小样例
我们经常使用决策树处理分类问题,近年来的调查表明决策树也是经常使用的数据挖掘算法K-NN可以完成多分类任务,但是它最大的缺点是无法给出数据的内在含义,决策树的主要优势在于数据形式非常容易理解决策树的优 ...
- Python-S9——Day84-ORM项目实战之权限、form以及modelform
01 权限菜单显示 02 Django路径的自动添加问题 03 原生form实现增删改查 04 modelform实现增删改查 01 权限菜单显示 1.1 优先查找项目中的templates,如果没有 ...
- php字符串 函数
strtolower()//字符串转化小写的字母 $str="abcdEfG";$s=strtolower($str); 输出:abcdefg; strtoupper();字符串转 ...
- 在数组中寻找出现次数大于N/K的数
给定一个int[]数组,给定一个整数k,打印所有出现次数大于N/k的数,没有的话,给出提示信息. === 核心思想:一次在数组中删除K个不同的数,不停的删除,直到剩下的数的种类不足K就停止删除,那么如 ...
- POJ 3494 Largest Submatrix of All 1’s 单调队列||单调栈
POJ 3494 Largest Submatrix of All 1’s Description Given a m-by-n (0,1)-matrix, of all its submatrice ...