前言

关于 CSS 的介绍，基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素，显示在 Web 页面的位置。

定位

  • 概述

    • 定义元素位置的基准，即：该元素与 HTML 文档流 和 其他 HTML 元素的关系。

  • 四种定位方式

    • Static（静态定位）

      • 默认值（没有定位），元素出现在正常的 HTML 文档流中
      • 静态定位的元素不会受到 top、bottom、left、right 的影响
    • Fixed（固定定位）
      • 元素相对于浏览器窗口的位置固定，即：固定在浏览器窗口的固定位置，即使窗口滚动也不会移动
      • 与 HTML 文档流无关，不占据空间
    • Relative（相对定位）
      • 相对于元素正常位置的定位，其原本所占的空间不会改变
    • Absolute（绝对定位）
      • 相对于最近已定位的父元素；若没有已定位的父元素，那么将相对于 <html>
      • 与 HTML 文档流无关，不占据空间

  • 四种定位方式比较

    |定位方式|是否与文档流有关|是否占据空间|是否可以重叠|是否受到 top、right、bottom、left 的影响|

    |---|:---

    CSS3-05 样式 4的更多相关文章

    1. CSS/CSS3常用样式小结

      1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

    2. [总结]CSS/CSS3常用样式与web移动端资源

      CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

    3. 炫酷的CSS3抖动样式:CSS Shake

      CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...

    4. css3-4 css3边框样式

      css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...

    5. css3-3 css3背景样式

      css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

    6. 一些上流的CSS3图片样式

      直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...

    7. css3常用样式集锦

      控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...

    8. [CSS3] 学习笔记-CSS3盒子样式

      1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

    9. css3特效样式库

      直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...

    10. css3的样式讲解-css学习之旅（3）

      css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...

    随机推荐

    1. MongoDB学习系列(1)--入门介绍

      MongoDB是一款为Web应用程序设计的面向文档结构的数据库系统. MongoDB贡献者是10gen公司.地址:http://www.10gen.com 1.MongoDB主要特性: 1.1文档数据 ...

    2. 用scikit-learn和pandas学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了. 1. 获取数据,定义问题 没有数据,当然没法研究机器学习 ...

    3. 如何装出高逼格的64位win7系统

      自从有了ghost这个玩艺儿,装系统就不再是什么技术活了,但是一直崇尚纯净.原生.DIY的挨踢男来说,这种千篇一律的系统从来都不是他们想要的.为了榨干硬件的每一滴性能,发挥软件的最大效果,他们喜欢折腾 ...

    4. Understanding delete

      简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...

    5. [mysql]支持emoji（字符集问题）

      问题的根源 主要问题就是在字符集,一般解决这种问题都是靠试验.我实验了一通,得出的结论和大家分享一下(如有错误,还望指正): 数据库的字符集 数据库连接的字符集 配置方法 设置数据库的字符集为utf8 ...

    6. Equals和ReferenceEquals

      稍微分析下一下两个方法的区别: public static bool Equals(object objA, object objB); public static bool ReferenceEqu ...

    7. Mybatis-update - 数据库死锁 - 获取数据库连接池等待

      最近学习测试mybatis,单个增删改查都没问题,最后使用mvn test的时候发现了几个问题: update失败,原因是数据库死锁 select等待,原因是connection连接池被用光了,需要等 ...

    8. 企业 SOA 设计(1)–ESB 设计

      最近为公司完成了一个 ESB 的设计.下面简要说明一下具体的设计方案.   企业 SOA 整体方案 在前一篇<SOA.ESB.NServiceBus.云计算 总结>中说到,SOA 是面向服 ...

    9. 自己实现简单的AOP（一）简介

      AOP 和 OOP,在我看来是两种相辅相成的技术,作为OOP的补充,AOP 有着自己特殊的应用场景. 假设,我们需要在Service层实现以下几项基本功能: /// <para>1.自动管 ...

    10. [Asp.net 5] DependencyInjection项目代码分析-目录

      微软DI文章系列如下所示: [Asp.net 5] DependencyInjection项目代码分析 [Asp.net 5] DependencyInjection项目代码分析2-Autofac [ ...