一，效果图。

二，代码。

<!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. JS Fetch

    使用Fetch 1.进行 fetch 请求 一个基本的 fetch请求设置起来很简单.看看下面的代码: fetch('http://example.com/movies.json') .then(fu ...

  2. 最简单的 nginx 负载均衡，只能演示，企业中最好不用

    修改nginx.conf 配置,重启nginx即可 upstream 包名{ ip_hash; #使用此功能,权重和备份都不能使用!一台机器永远只连同一台机子 server IP:端口 weight= ...

  3. [转]jenkins2 插件安装

    文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.com/ciandcd Jenkins的安装包和插件在7个国家有20多个镜 ...

  4. Shadow Copying导致ASP.NET应用启动很慢的解决办法

    What's Shadow Copying? 我们安装一个应用程序并启动后,我们是无法更新应用程序安装目录中程序集文件的.如果强制替换会提示文件正在使用,如下图所示. 那你可能会问,为什么会无法更新呢 ...

  5. 一个开源的，跨平台的.NET机器学习框架ML.NET

    微软在Build 2018大会上推出的一款面向.NET开发人员的开源,跨平台机器学习框架ML.NET. ML.NET将允许.NET开发人员开发他们自己的模型,并将自定义ML集成到他们的应用程序中,而无 ...

  6. idea中@Data标签getset不起作用

    spring cloud中使用@Data标签,不用手动添加get set方法,但是如果项目中其他类中使用getset方法,如果报错,原因是idea中没有添加Lombok插件,添加上插件便可以解决.截图 ...

  7. js 动态生成背景图 GeoPattern

    以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...

  8. [Swift]LeetCode239. 滑动窗口最大值 | Sliding Window Maximum

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  9. [Swift]LeetCode935. 骑士拨号器 | Knight Dialer

    A chess knight can move as indicated in the chess diagram below:  .            This time, we place o ...

  10. spring-cloud-sleuth+zipkin源码探究

    1. spring-cloud-sleuth+zipkin源码探究 1.1. 前言   粗略看了下spring cloud sleuth core源码,发现内容真的有点多,它支持了很多类型的链路追踪, ...