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

时间: 2024-10-08 10:10:41

Web之路笔记之二 - CSS Positioning的相关文章

ASP.NET Web Pages ----学习笔记(二)

C#主要Razor语法规则: Razor代码块由@{...}包围 行内表达式以@开始 代码语句以分号结束 变量通过var关键词进行声明 字符串用引用来包围 C#代码对大小写敏感 C#文件的扩展名是.cshtml 内容块 @RenderPage()从不同的文件导入内容 使用布局页面 @RenderBody()内容页必须以Layout指令开头 防止代码泄露 在ASP.NET中,名称以下划线开头的文件无法通过Web来浏览 隐藏敏感信息 在ASP.NET中,隐藏敏感信息常用方法是把这些信息保存在名为"_

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

一.JavaBean简介 JavaBean是使用Java语言开发的一个可重用的组件,在JSP的开发中可以使用JavaBean减少重复代码,使整个JSP代码的开发更简洁.JSP搭配JavaBean来使用, 有以下的优点: 可将HTML和Java代码分离,这主要是为了日后维护的方便.如果把所有的程序代码(HTML和Java)写到JSP 页面中,会使整个程序代码又多又复杂,造成日后维护上的困难. 可利用JavaBean的优点.将常用到的程序写成JavaBean组件,当在JSP要使用时,只要调用Java

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

1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 css存在方式: 元素内联 页面嵌入 外部引入 语法:style = 'key1:value1;key2:value2;' 1.元素内联(在标签中使用css) <!--在标签使用--> &

Web之路笔记之一

简单说一句,现在开始准备面试前端的知识,每天完成相关的任务,记录一些点. 2014秋季学期Web2.0课程习题 <Lab1 - About Me Page> 目标是自己动手写一个粗略的包含主要标签的html文件和附加的css练习. html方面,使用了定义文件类型的doctype,定义文档信息的head和显示本体的body,另外标题的h1.h2等,段落的p和列表的ol——总共五类. css方面,定义了body的背景.文字颜色,还有一些id和class的样式. 1. id是唯一的,class是可

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

1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指出样式表要放包含在页面的< head />区域内:“和< a />不同,< link />只能出现在文档的< head />区域内,尽管它可以多次使用它”.无论是引起白屏还是出现没有样式化的内容都不值得去尝试.最好的方案就是按照HTML规范在文 档< he

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

2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来所在的div,如图所示. 需要注意的是,float之后的element也是从页面正常流里面移除了.极端的来说,如果一个div里面的所有element都设置为float的话,那么它的高度就为0了.此时用Chrome开发者工具查看,图片的margin和文本的content上端是水平的,可以知道他仍然是在conte

python简易web服务器学习笔记(二)

import BaseHTTPServer #------------------------------------------------------------------------------- class RequestHandler(BaseHTTPServer.BaseHTTPRequestHandler): '''Respond to HTTP requests with info about the request.''' # Template for page to sen

web开发学习笔记(二)

读取properties文件里的内容: properties文件里的内容都是以键值对的形式存放的,即 key=value 的形式. 读取properties文件内容,Java代码: Properties properties = new Properties(); InputStream inputStream = new FileInputStream("properties文件的存放路径"); properties.load(inputStream); inputStream.cl

【web开发学习笔记】Structs2 Action学习笔记(二)

action学习笔记2-有关于action method的讨论 Action执行的时候并不一定要执行execute方法,可以在配置文件中配置Action的时候用method=来指定执行哪个方法 也可以在url地址中动态指定(动态方法调用DMI)(推荐) 方法一 <struts> <constant name="struts.devMode" value="true" /> <package name="user" e