一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS Positioning</title>

    <style>

    p.pos_fixed {

        position: fixed;

        top: 30px;

        right: 5px;

    }

    h2.pos_left {

        position: relative;

        left: -20px;

    }

    h2.pos_right {

        position: relative;

        left: 20px;

    }

    h2.pos_top {

        position: relative;

        top: -50px;

    }

    h2.absolute {

        position: absolute;

        left: 100px;

        top: 150px;

    }

    img {

        position: absolute;

        left: 0px;

        top: 0px;

        z-index: -1;

    }

    </style>

</head>

<body>

    <p class="pos_fixed">Some more text</p>

    <p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <p>Some text</p>

    <h2>This is a heading with no position</h2>

    <h2 class="pos_left">This heading is moved left according to its normal position</h2>

    <h2 class="pos_right">This heading is moved right according to its normal position</h2>

    <p>Relative positioning moves an element RELATIVE to its original position.</p>

    <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>

    <p>The style "left:20px" adds 20 pixels to the element's original left position.</p>

    <h2>This is a heading with no position</h2>

    <h2 class="pos_top">This heading is moved upwards according to its normal position</h2>

    <p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>

    <h2 class="absolute">This is a heading with an absolute position</h2>

    <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>

    <h1>This is a heading</h1>

    <img src="w3css.gif" width="100" height="140" />

    <p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS Positioning的更多相关文章

  1. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  2. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  3. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  4. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  5. CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  6. python 学习笔记十二 CSS基础（进阶篇）

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

  7. Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形

    Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...

  8. @import————————css代码内部链接另外css

    在css代码里这样可以链接另外的css @import url("style.css");   @import语法结构 @import + 空格+ url(CSS文件路径地址); ...

  9. Web云笔记--CSS

    CSS CSS CSS Web自学第二阶段之CSS 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出 ...

  10. 写给自己的web总结——css篇（1）

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

随机推荐

  1. 大数据BI框架知识点备注

    将这段时间的一些基于大数据方案的BI知识点暂时做些规整,可能还存在较多问题,后续逐步完善修改. 数据模型: 1.星型模型和雪花模型,同样是将业务表拆分成事实表和纬度表:例如一个员工数据表,可以拆分为员 ...

  2. JSP的执行原理

    在一个JSP文件第一次被请求时,JSP引擎把该JSP文件转换成为一个Servlet.而这个引擎本身也是一个Servlet.JSP的运行过程如下所示: (1)JSP引擎先把该JSP文件转换成一个Java ...

  3. [Swift]LeetCode84. 柱状图中最大的矩形 | Largest Rectangle in Histogram

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  4. BUGKU-逆向(reverse)-writeup

    目录 入门逆向 Easy_vb Easy_Re 游戏过关 Timer(阿里CTF) 逆向入门 love LoopAndLoop(阿里CTF) easy-100(LCTF) SafeBox(NJCTF) ...

  5. linux字符测试以及for循环

    1.字符测试 常用的测试字符的命令: == .=都表示测试字符相等,格式为[ A = B ]需要注意的是变量与等号之间需要有空格,不然测试的结果不正确示例如下 若字符与等号不加空格,假设变量A=ab  ...

  6. MetaEditor中MQL使用方法

    MT4程序--帮助--MQL5文档,转到网页,切换到中文,点击旁边搜索图标. MetaEditor编辑器,点击相应关键字,按F1键,即可启动MT4对应的MQL4的对应关键字用法帮助.但是英文. 时间序 ...

  7. ELK快速搭建日志平台

    1.  抛砖引入 <Elasticsearch> <Logstash> <Filebeat> <Filebeat模块与配置> <Kibana> ...

  8. 面向切面编程 ( Aspect Oriented Programming with Spring )

    Aspect Oriented Programming with Spring 1. 简介 AOP是与OOP不同的一种程序结构.在OOP编程中,模块的单位是class(类):然而,在AOP编程中模块的 ...

  9. 初探Java设计模式3：行为型模式（策略，观察者等）

    行为型模式 行为型模式关注的是各个类之间的相互作用,将职责划分清楚,使得我们的代码更加地清晰. 策略模式 策略模式太常用了,所以把它放到最前面进行介绍.它比较简单,我就不废话,直接用代码说事吧. 下面 ...

  10. 行为驱动：Cucumber + Selenium + Java(二) - 第一个测试

    在上一篇中,我们搭建好了Selenium + Cucumber + Java的自动化测试环境,这一篇我们就赶紧开始编写我们的第一个BDD测试用例. 2.1 创建features 我们在新建的java项 ...