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的更多相关文章

  1. Java web与web gis学习笔记(二)——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  2. JavaBean(web基础学习笔记十二)

    一.JavaBean简介 JavaBean是使用Java语言开发的一个可重用的组件,在JSP的开发中可以使用JavaBean减少重复代码,使整个JSP代码的开发更简洁.JSP搭配JavaBean来使用 ...

  3. 默认文档接卸--手机web app开发笔记(二)

    首先我们启动HBuilderX2.0 ,界面如图2-1所示 图2-1 软件开发界面 单击“文件—新建—项目”,弹出新建项目管理界面,我们在里面进行了项目类型选择“5+APP”.项目名称填写“编程之路” ...

  4. python 学习笔记十二 CSS基础(进阶篇)

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  5. web前端学习笔记(二)---Django

    [前言]前面(一)学习了web的基础知识,介绍到了MVC,项目使用一个Django框架. Django book:https://code.ziqiangxuetang.com/django/djan ...

  6. Web之路笔记之四

    2014秋季学期Web2.0课程作业 <Homework1 - Recipe> 给出内容的文本文档,根据要求编写html和css.基本上没有难点. 1. 需要添加标签栏名称前面的小图标,是 ...

  7. Web之路笔记之三 - 使用Floating实现双栏样式

    2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来 ...

  8. Web之路笔记之一

    简单说一句,现在开始准备面试前端的知识,每天完成相关的任务,记录一些点. 2014秋季学期Web2.0课程习题 <Lab1 - About Me Page> 目标是自己动手写一个粗略的包含 ...

  9. WEB前端性能优化之二——css优化

    1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...

随机推荐

  1. 【转载】Log4j详细使用教程

    本文由林炳文Evankaka创作,出处http://blog.csdn.net/evankaka 日志是应用软件中不可缺少的部分,Apache的开源项目Log4j是一个功能强大的日志组件,提供方便的日 ...

  2. size_t 和 size_type的区别

    为了使自己的程序有很好的移植性,c++程序员应该尽量使用size_t和size_type而不是int, unsigned 1. size_t是全局定义的类型:size_type是STL类中定义的类型属 ...

  3. C++ STL中的 iterator 和 const_iterator

    我们在C++中使用STL的容器时,经常会用到迭代器.使用迭代器可以很方便的进行容器元素遍历和修改等操作. 近日,在使用Visual Studio 2015编程的时候发现,set的迭代器直接就是cons ...

  4. MYSQL中存储过程的创建,调用及语法

    MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...

  5. github 添加 SSH key

    在 github 上添加 SSH key 的步骤: 1.首先需要检查你电脑是否已经有 SSH key 运行 git Bash 客户端,输入如下代码: $ cd ~/.ssh $ ls 这两个命令就是检 ...

  6. treetable 前台 累计计算树值 提交后台

    treetable   累计计算树值 效果图 html  代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  7. Tomcat崩溃

    参考: http://bbs.csdn.net/topics/390391810?page=1 自己遇到的: --------------------------------------------- ...

  8. flume的使用

    1.flume的安装和配置 1.1 配置java_home,修改/opt/cdh/flume-1.5.0-cdh5.3.6/conf/flume-env.sh文件

  9. oracle 开窗分析函数和树形结构

    1.row_number() over(partition by ... order by ...)2.rank() over(partition by ... order by ...)3.dens ...

  10. react native改变app的图标和名称

    beauty\android\app\src\main\res