ylbtech-CSS：CSS Positioning(定位)
1.返回顶部
1、

CSS Positioning(定位)

position 属性指定了元素的定位类型。

position 属性的四个值：

  • static
  • relative
  • fixed
  • absolute

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

实例

p.pos_fixed

{

    position:fixed;

    top:30px;

    right:5px;

}

尝试一下 »

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

relative 定位

相对定位元素的定位是相对其正常位置。

实例

h2.pos_left

{

    position:relative;

    left:-20px;

}

h2.pos_right

{

    position:relative;

    left:20px;

}

尝试一下 »

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

实例

h2.pos_top

{

    position:relative;

    top:-50px;

}

尝试一下 »

相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

实例

h2

{

    position:absolute;

    left:100px;

    top:150px;

}

尝试一下 »

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

实例

img

{

    position:absolute;

    left:0px;

    top:0px;

    z-index:-1;

}

尝试一下 »

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

更多实例

裁剪元素的外形

此示例演示如何设置元素的外形。该元素被剪裁成这种形状，并显示出来。

如何使用滚动条来显示元素内溢出的内容

这个例子演示了overflow属性创建一个滚动条，当一个元素的内容在指定的区域过大时如何设置以适应。

如何设置浏览器自动溢出处理

这个例子演示了如何设置浏览器来自动处理溢出。

更改光标

这个例子演示了如何改变光标。

所有的CSS定位属性

"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性 说明 值 CSS
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto
length
%
inherit		 2
clip 剪辑一个绝对定位的元素 shape
auto
inherit		 2
cursor 显示光标移动到指定的类型 url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help		 2
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto
length
%
inherit		 2
overflow 设置当元素的内容溢出其区域时发生的事情。 auto
hidden
scroll
visible
inherit		 2
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content		 2
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto
hidden
scroll
visible
no-display
no-content		 2
position 指定元素的定位类型 absolute
fixed
relative
static
inherit		 2
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto
length
%
inherit		 2
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto
length
%
inherit		 2
z-index 设置元素的堆叠顺序 number
auto
inherit		 2
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

CSS：CSS Positioning(定位)的更多相关文章

  1. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  2. 简明CSS属性：定位

    简明CSS属性:定位 第一话 定位 (Positioning) 关键词:position/z-index/top/bottom/right/left/clip POSITION 该属性用来决定元素在页 ...

  3. CSS布局与定位——height百分比设置无效/背景色不显示

    CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...

  4. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  5. CSS学习摘要-定位

    CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...

  6. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  7. （转）CSS+DIV float 定位

    来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...

  8. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  9. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

随机推荐

  1. 聊一聊 http2.0

    1. 我们认识http 协议,从最初的,客户端与服务器进行通讯,基于连接发生的请求与响应 在HTTP1.0时代,连接无法复用,每次下完单,都被强制登出/关机,下一次下单,就得重新登录. 为了解决htt ...

  2. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...

  3. Jeecg_Jflow整合记录

    系统组织机构 t_s_deparselect * from t_s_departselect * from t_s_depart where id='402888fd6a8c24e9016a8c531 ...

  4. 用processing生成屏保程序

    想法 利用随机数控制圆圈的大小.位置以及颜色,可以产生随机的美感. 让小球动起来,并且在屏幕边界处产生反弹效果. 代码 1: float circle_x = (float) 0.0; 2: floa ...

  5. 导数与偏导数 Derivative and Partial Derivative

    之前做了很长时间“罗辑思维”的听众,罗胖子曾经讲起过,我们这一代人该如何学习.其中,就讲到我们这个岁数,已经不可能再去从头到尾的学习一门又一门工具课程了,而是在学习某一领域时,有目的的去翻阅工具课程中 ...

  6. 从输入url到显示网页，发生了那些事情？

    作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...

  7. js中继承的实现，原型链的知识点归纳，借用构造函数，组合继承（伪经典继承）

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/10/31/js%e4%b8%ad%e7%bb%a7%e6%89%bf%e7%9a%84%e ...

  8. 42-python基础-python3-字符串-原始字符串

    原始字符串 可以在字符串开始的引号之前加上 r,使它成为原始字符串. “原始字符串”完全忽略所有的转义字符,打印出字符串中所有的倒斜杠. 如果输入的字符串包含许多倒斜杠,比如正则表达式字符串,那么原始 ...

  9. Neo4J(Cypher语句)初识

    欢迎各路大神临幸寒舍 以下节点标签为people,friend,用户自己也可以设置成其他标签,查询时需要用到标签.这个标签可以类比为关系数据库中的表名 创建节点.关系 创建节点(小明):create ...

  10. 用IDEA打可运行的jar包

    今天,需要将一个定时项目打成jar包,直接放在服务器上运行,看了一下要求是将依赖包几种放到lib文件夹下,以前都是用maven来打包的.这一次想利用idea直接打包. 但是打完包后运行发现一直缺失ma ...