一，效果图。

二，代码。

<!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. [Swift]LeetCode68. 文本左右对齐 | Text Justification

    Given an array of words and a width maxWidth, format the text such that each line has exactly maxWid ...

  2. CoCos2dx开发：tile地图绘制和Tiled工具的基本使用

    1.新建地图: 在Tiled工具里新建文件: 设置地图的地图大小和地图块大小: 新建好的空文件如下: 2.绘制图块: 在Aseprite中建立相应大小(注意:划分的图块为32*32,因此图片大小最好与 ...

  3. scala读取解析json文件

    import scala.util.parsing.json.JSON._ import scala.io.Source object ScalaJsonParse { def main(args: ...

  4. CentOS 7 源码编译安装 Nginx

    这里安装的是nginx 1.14版本 1.下载源码 #下载 wget http://nginx.org/download/nginx-1.14.0.tar.gz #解压 tar -xzf nginx- ...

  5. qcharts编译

    编译环境vs2013+qt5.5.1+perl5 qchart源码在git上自己下载,或者在此下载,参考文档:Qt Charts 5.7.0 安装教程,这篇文章是使用mingw的方式编译qcharts ...

  6. asp.net core 系列 7 Razor框架路由(上)

    一.概述 在上二篇中,主要是介绍了asp.net core mvc中路由的使用,这篇继续介绍路由在ASP.NET Core Razor中的使用.Razor Pages应该使用默认的传统路由,从应用程序 ...

  7. Solr 08 - 在Solr Web管理页面中查询索引数据 (Solr中各类查询参数的使用方法)

    目录 1 Solr管理页面的查询入口 2 Solr查询输入框简介 3 Solr管理页面的查询方案 1 Solr管理页面的查询入口 选中需要查询的SolrCore, 然后在菜单栏选择[Query]: 2 ...

  8. 带着新人学springboot的应用10（springboot+定时任务+发邮件）

    接上一节,环境一样,这次来说另外两个任务,一个是定时任务,一个是发邮件. 1.定时任务 定时任务可以设置精确到秒的准确时间去自动执行方法. 我要一个程序每一秒钟说一句:java小新人最帅 于是,我就写 ...

  9. EF架构~migration对mysql数据库的迁移

    回到目录 ef这个orm工具确实强大,无论在实体建模还是在实体关系上,都发挥的很出色,而最近的code first针对数据库变更的使用更让我眼前一亮,先不说对sqlserver的支持,因为mssql本 ...

  10. 15分钟在笔记本上搭建 Kubernetes + Istio开发环境

    11月13~15日,KubeCon 上海大会召开,云原生是这个秋天最火热的技术.很多同学来问如何上手 Kubernetes和Istio 服务网格开发.本文将帮助你利用Docker CE桌面版,15分钟 ...