Web之路笔记之二 - CSS Positioning
CSS中控制各个Block element的位置方式之一,tag为position,有4种属性。
1. static
一般网页默认的属性,表示element根据页面正常流(normal flow)进行排列,也就是默认的摆放方式,所以一般不会在CSS文件内编写。
2. absolute
表示element从页面正常流中去除,本该所属的地方不会保留位置,并且相对于距离它最近的父元素(parent element)进行移动。比如说在body内的一个div设为absolute,那么移动的时候就是相对于body这个block进行移动;如果没有父元素,则根据html元素进行移动。
3. fixed
表示element从页面正常流中去除,本该所处的地方不会保留位置,并且相对于浏览器等视窗进行移动。需要注意的是,该元素不会因为页面滚动而移动,也就是对一个fixed的元素,无论你如何滑动滚轮,它不会从一开始看到他时候的地方移动一步。使用较少,本来以为可以用于固定背景图片,但是因为背景图片是在body元素下设置的,所以没办法单独对背景图片进行设置为fixed。
4. relative
此处说的relative相关,是与该element原来在页面正常流中本该所属的位置的相关,也就是说,如果只设置了position: relative而不对element的top等进行设置的话, 显示的效果和默认的static没有区别。另外,设置完四周参数之后的效果,尽管移动了位置,但是原本本该所属的地方仍然会留出空白,也就是说他仍然存在于页面正常流中。
需要注意的是,相关的element无论如何设置z-index也不能够置于static element之上;另外一点是limits the scope of absolutely positioned child elements,这句话仍需要继续理解。
另外,移出页面正常流fixed和absolute的element会覆盖其他positioned element,不希望覆盖的时候,使用z-index属性可以修改。
z-index性质是决定了一个element在栈内的顺序,越大的在上层。当两个element覆盖在同一个地方,在html越靠后的越先显示。需要注意的是,z-index只对除static以外的element起作用!也就是说如果和(默认)static元素相比,永远是static在上而且不能用z-index改变显示顺序。
参考:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp
Web之路笔记之二 - CSS Positioning的更多相关文章
- Java web与web gis学习笔记(二)——百度地图API调用
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- JavaBean(web基础学习笔记十二)
一.JavaBean简介 JavaBean是使用Java语言开发的一个可重用的组件,在JSP的开发中可以使用JavaBean减少重复代码,使整个JSP代码的开发更简洁.JSP搭配JavaBean来使用 ...
- 默认文档接卸--手机web app开发笔记(二)
首先我们启动HBuilderX2.0 ,界面如图2-1所示 图2-1 软件开发界面 单击“文件—新建—项目”,弹出新建项目管理界面,我们在里面进行了项目类型选择“5+APP”.项目名称填写“编程之路” ...
- python 学习笔记十二 CSS基础(进阶篇)
1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...
- web前端学习笔记(二)---Django
[前言]前面(一)学习了web的基础知识,介绍到了MVC,项目使用一个Django框架. Django book:https://code.ziqiangxuetang.com/django/djan ...
- Web之路笔记之四
2014秋季学期Web2.0课程作业 <Homework1 - Recipe> 给出内容的文本文档,根据要求编写html和css.基本上没有难点. 1. 需要添加标签栏名称前面的小图标,是 ...
- Web之路笔记之三 - 使用Floating实现双栏样式
2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来 ...
- Web之路笔记之一
简单说一句,现在开始准备面试前端的知识,每天完成相关的任务,记录一些点. 2014秋季学期Web2.0课程习题 <Lab1 - About Me Page> 目标是自己动手写一个粗略的包含 ...
- WEB前端性能优化之二——css优化
1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...
随机推荐
- YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法
上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...
- FTPClient使用中的问题--获取当前工作目录为null
使用org.apache.commons.net.ftp.FTPClient 来做ftp的上传下载功能 FTPClient ftp = new FTPClient();ftp.connect(doc. ...
- python opencv 实现Reinhard颜色迁移算法
Reinhard颜色迁移算法的过程很简单,流程如下,细节部分见原文,题目为color transfer between images: 将参考图片和目标图片转换到LAB空间下 得到参考图片和目标图片的 ...
- 09A-独立按键消抖实验01——小梅哥FPGA设计思想与验证方法视频教程配套文档
芯航线--普利斯队长精心奉献 实验目的: 1.复习状态机的设计思想并以此为基础实现按键消抖 2.单bit异步信号同步化以及边沿检测 3.在激励文件中学会使用随机数发生函数$random 4.仿真模 ...
- 7. LAMP环境搭建
一.准备工作 1.安装编译工具gcc.gcc-c++ 注意解决依赖关系,推荐使用yum安装,若不能联网可使用安装光盘做为yum源-- 1)编辑yum配置文件: # mount /dev/cdrom / ...
- Codeforces Round #342 (Div. 2)-B. War of the Corporations
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- 使用discovery板上的st-link给别的板子下载
discovery板上的6pin swd接口 20pin 的jtag 接线: 6 20 def 1 1 目标vdd 2 9 swclk(PA14) 3 20 gnd 4 7 swdio(PA13) ...
- HTML 5 应用程序缓存(下)
Manifest 文件manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的 ...
- 文档对象模型(DOM)中的结点属性
在文档对象模型中,每个结点都是一个对象.DOM结点有三个重要的属性:nodeName .nodeValue和nodeType,分别表示结点名称.结点的值和结点的类型 一.nodeName,结点名称,只 ...
- break continue return
break 通常用在循环语句和开关语句中,当break语句用于do-while.for.while循环语句中时,可使程序终止循环而执行循环后面的语句, 通常break语句总是与if语句联在一起,即满足 ...