参考:http://www.w3school.com.cn/cssref/pr_class_position.asp

position 属性规定元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

值         描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed   生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 像素。
static   默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

默认值:static。

参考:http://www.w3cschool.cn/pr_pos_bottom.html

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

参考:http://www.jb51.net/w3school/css/pr_pos_left.htm

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

参考:http://www.w3school.com.cn/cssref/pr_pos_right.asp

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

参考:http://www.w3school.com.cn/cssref/pr_pos_top.asp

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

注释:如果 "position" 属性的值为 "static",那么设置"left" ,"bottom","right","top" 属性不会产生任何效果。

默认值都为:auto。

(四)学习CSS之position、bottom、left、right和top属性的更多相关文章

  1. 学习CSS布局 - position例子

    position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...

  2. 学习CSS布局 - position

    position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...

  3. css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  4. css中的四个不同的position设置

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  6. 轻轻松松学CSS:position

    position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...

  7. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  8. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  9. 分享一下学习css,js心得

    简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端 ...

随机推荐

  1. ems lite 客户端远程连接mysql server

    在本地用ems客户端远程连接虚拟机上的mysql server,弹出客户端没有权限访问mysql server.使用下面方法进行设置:mysql> select host,user,passwo ...

  2. 请给出一个左侧定宽右侧自适应的HTML结构及样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  3. [译] ASP.NET 生命周期 – ASP.NET 应用生命周期(一)

    概述 ASP.NET 平台定义了两个非常重要的生命周期.第一个是 应用生命周期  (application life cycle),用来追踪应用从启动的那一刻到终止的那一刻.另一个就是 请求生命周期 ...

  4. UI开发核心问题-UI随屏幕自适应

    屏幕分辨率对UI适配的影响 一般来说,UIRoot都会选择FixSize的缩放模式,这样可以让UI随着分辨率而自动缩放,保持和屏幕相对的大小比例不变,让UI整体看上去不会有变大变小的奇怪现象.但是,还 ...

  5. kruskal算法-Pascal

    马上就快要考试了,然而突然发现自己图论已经废了,于是再都打一遍练练手...... const maxn=; maxe=maxn*maxn; type edge=record //edge记录每一条边, ...

  6. python学习笔记21(正则表达式)

    正则表达式模式: 模式 描述 ^ 匹配的开始的 $ 匹配行尾 . 匹配除换行符的任何单个字符.使用-m选项允许其匹配换行符也是如此. [...] 匹配括号内任何单个字符 [^...] 匹配非单个字符集 ...

  7. (转)Linux 文件系统:procfs, sysfs, debugfs 用法简介

    网址:http://www.tinylab.org/show-the-usage-of-procfs-sysfs-debugfs/ 1 前言 内核中有三个常用的伪文件系统:procfs,debugfs ...

  8. Oracle数据库-建库、建表空间,建用户

    Oracle安装完后,其中有一个缺省的数据库,除了这个缺省的数据库外,我们还可以创建自己的数据库. 对于初学者来说,为了避免麻烦,可以用'Database Configuration Assistan ...

  9. 1026: [SCOI2009]windy数 - BZOJ

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数?Inp ...

  10. UIScrollView的坑--UINavigationController Push后位置变化

    今天在使用UIScrollView的时候遇到了一个问题,记录一下.如果这个记录有幸被您搜索到,或许对您有些帮助. 今天有这样一个需求: 在一个由导航条控制的页面中.需要显示一些信息,目前已经有10多行 ...