前言

关于 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. 窥探Swift之别样的枚举类型

      想必写过程序的童鞋对枚举类型并不陌生吧,使用枚举类型的好处是多多的,在这儿就不做过多的赘述了.Fundation框架和UIKit中的枚举更是数不胜数,枚举可以使你的代码更易阅读并且可以提高可维护性.在 ...

    2. Java中的网络编程

      ​ Java中的网路编程主要是Java的Socket编程,属于JavaEE中的高级的部分,以下内容是对java网路编程的一个小结,代码都是经过编译调试的 C/S程序应用:客户/服务器模式,如QQ客户端 ...

    3. Lua 性能相关笔记

      1.创建一个闭合函数要比创建一个table更廉价,访问非局部的变量也比table字段更快. 2.访问局部变量要比全局变量更快,尽可能的使用局部变量,可以避免无用的名称引入全局环境. 3.do-end语 ...

    4. PHP代码的执行

      先看下PHP的结构图:

    5. 多种方法实现Loading（加载）动画效果

      当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢.

    6. C++基础知识

      基础知识 &&和||具有"短路"特性,特别是在第二个操作数有++或--时要注意. 显式类型转换 (类型说明符)表达式 //C风格的 类型说明符(表达式) //cpp ...

    7. HTML5 音频 <audio>

      HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...

    8. mybatis入门基础(四)----输入映射和输出映射

      一:输入映射 通过parameterType指定输入参数的类型,类型可以是简单类型.hashmap.pojo的包装类型. 1.1.传递pojo的包装对象 1.1.1.需求描述 完成用户信息的综合查询, ...

    9. 故障恢复和恢复模式（Crash Recovery & Recovery Models）

      数据库的恢复模型是否影响故障恢复,在简单恢复模式里,你是否会丢失事务?在今天的文章里我想谈下这点,详细讨论下. 恢复模式(Recovery Models) 对于这个问题的最简单的答案是不会:恢复模型不 ...

    10. 做一个会使用PS的前端开发

      做前端开发的需不需要PS 记得在之前的老东家做某一个系统开发,当时正在做界面开发,发现界面还需要添加几个图标,于是把这个需求反馈给了项目经理.过了十几分钟,项目经理跑过来告诉我:产品部的UI设计人员( ...