一，效果图。

二，代码。

<!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. python Cookie Session 相关用法

    Cookie一.前言1.http协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响 应情况直接影响,也不会直接影响后面的请 ...

  2. LeetCode编程训练 - 合并查找(Union Find)

    Union Find算法基础 Union Find算法用于处理集合的合并和查询问题,其定义了两个用于并查集的操作: Find: 确定元素属于哪一个子集,或判断两个元素是否属于同一子集 Union: 将 ...

  3. H5 和移动端 WebView 缓存机制解析与实战

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qHm_dJBhVbv0pJs8Crp77w 作者:叶 ...

  4. 字符串----hiho字符串(尺取法)

    注意:这道题的解法和最短摘要一样,都是采用尺取法解决问题,注意这儿题目要求恰好包含,也就是说这个hiho字符串必须包含2个'h'.1个'i'和1个'o'.一个不能多,一个也不能少. import ja ...

  5. 阿里面试题，深入理解Java类加载机制

    类的生命周期 包括以下 7 个阶段: 加载(Loading) 验证(Verification) 准备(Preparation) 解析(Resolution) 初始化(Initialization) 使 ...

  6. [Swift]LeetCode93. 复原IP地址 | Restore IP Addresses

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  7. [Swift]LeetCode703. 数据流中的第K大元素 | Kth Largest Element in a Stream

    Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...

  8. [Swift]LeetCode804. 唯一摩尔斯密码词 | Unique Morse Code Words

    International Morse Code defines a standard encoding where each letter is mapped to a series of dots ...

  9. 【web.xml】项目从web.xml开始

    前言 依自己目前的所闻所见,每个项目的WEB-INF下都会带有一个web.xml配置文件.当启动项目时,web容器(tomcat)会首先去读取web.xml中的内容,读取加载完成后才算完成了项目的启动 ...

  10. requirejs、vue、vuex、vue-route的结合使用，您认为可行吗？

    在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...