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是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...
随机推荐
- php中关于empty()函数是否为真的判断
<?php// $a = 0; ==> 符合empty,empty($a)为true// $a = '0'; ==> 符合empty,empty($a)为true// $a = ...
- Firebase Cloud Function 编写与部署
1.设置和初始化 Firebase SDK for Cloud Functions (1).Cloud Functions 运行的是 Node v6.14.0,因此需要安装nodejs: https: ...
- 服务器常说的U是什么意思?
U是英文单词:unit 所说的1U和2U,是服务器的厚度,1U大概是相当于机柜的两个小格子,2U是四个格子.1U大概是4.45厘米(1U=1.75英寸,1英寸=2.54CM).以下这个是图片:
- kettle - Linux下定时执行kettle作业
Linux下实现kettle 自动同步数据 1.安装jdk tar -zxvf jdk-7u25-linux-x64.tar.gz -C /usr/share 2.配置java环境 vim /etc/ ...
- 设计模式之序章-UML类图那点事儿
设计模式之序-UML类图那点事儿 序 打14年年底就像写那么一个系列,用于讲设计模式的,代码基于JAVA语言,最早接触设计模式是大一还是大二来着,那时候网上有人给推荐书,其中就有设计模式,当时给我推荐 ...
- Python框架之Django学习笔记(二)
安装Django 我是在windows下安装的python以及django,下面的链接可以下载Django: http://www.djangoproject.com/download/ 1.下载 D ...
- 61、请求数据进行gizp压缩
1.请求时进行头部处理 /** * 设置通用消息头 * * @param request */ public void setHeader(HttpUriRequest request) { // r ...
- 【SCOI 2010】股票交易
题目 最近 \(\text{lxhgww}\) 又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,\(\text{lxhgww}\) 预测到了未来 \(T ...
- 图说不为人知的IT传奇故事-4-王安用一生来跟IBM抗衡
此系列文章为“图说不为人知的IT传奇故事”,各位大忙人可以在一分钟甚至几秒内了解把握整个内容,真可谓“大忙人的福利”呀!!希望各位IT界的朋友在钻研技术的同时,也能在文学.历史上有所把握.了解这些故事 ...
- 转载: CRichEditCtrl使用大全
richedit 常见使用问题 一.常见问题 a.可以编译,不能执行的 在需要在相应的对话框中加上InitInstance(void)函数中添加 AfxInitRichEdit(); b.升级默认的R ...