一，效果图。

二，代码。

<!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. ubuntu14.04 安装lnmp + redis

    1.更新源 apt-get install update 2.安装nginx : apt-get install nginx 配置nginx: ① cd /etc/sites-enabled/ ② v ...

  2. 【RL-TCPnet网络教程】第24章 RL-TCPnet之网络控制报文协议ICMP

    第24章     RL-TCPnet之网络控制报文协议ICMP 本章节为大家讲解ICMP(Internet Control Message Protocol,网络控制报文协议),通过前面章节对TCP和 ...

  3. Dubbo架构设计及原理详解

    Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单的模 ...

  4. APP测试流程的总结

    本规范基于app大小版本测试经验总结. 第一阶段:需求分析(技术+产品) 1. 新需求是否合理 2. 新旧需求时否存在冲突 3. 理出测试重点 4. 估算测试时间 5. 不熟悉的需求点,确认(负责人, ...

  5. Java构造方法、成员变量初始化以及静态成员变量初始化三者的先后顺序是什么样的？

    [Java笔试真题]:构造方法.成员变量初始化以及静态成员变量初始化三者的先后顺序是什么样的? [解答]:当类第一次被加载的时候,静态变量会首先初始化,接着编译器会把实例变量初始化为默认值,然后执行构 ...

  6. [Swift]LeetCode621. 任务调度器 | Task Scheduler

    Given a char array representing tasks CPU need to do. It contains capital letters A to Z where diffe ...

  7. .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI

    作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...

  8. SpringCloud(7)---网关概念、Zuul项目搭建

    SpringCloud(7)---网关概念.Zuul项目搭建 一.网关概念 1.什么是路由网关 网关是系统的唯一对外的入口,介于客户端和服务器端之间的中间层,处理非业务功能 提供路由请求.鉴权.监控. ...

  9. Spring Cloud中服务的发现与消费

    之前没注意,微信公众号的图片不能引用到其他地方,本文图片显示不正常,原图在写完博客后已经删了,,,,,,所以本文小伙伴可以移步这里https://mp.weixin.qq.com/s/GoIZdwt5 ...

  10. Android Studio升级到3.1.4后打开旧项目警告：The `android.dexOptions.incremental` property is deprecated and it has no effect on the build process.

    现象截图 问题原因&解决方案 在build.gralde中,对Android开发过程中突破的方法数的限制,做了如下解决配置: dexOptions { incremental true jav ...