前言

关于 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. DOM扩展-HTML5、专有扩展

       HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...

    2. JavaScript中的日期处理注意事项

      在业务逻辑比较多的系统里面,一般都会涉及到日期的处理.包括选择起始日期和结束日期,结束日期要大于起始日期,日期的显示和输入等. 输入这一块基本都是使用jQuery datetimepicker,后来系 ...

    3. bootstrap 学习总结

      Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index ...

    4. c# 实现简单udp数据的发送和接收

      服务端代码 static void Main(string[] args) { UdpClient client = null; string receiveString = null; byte[] ...

    5. c/c++ 函数、常量、指针和数组的关系梳理

      压力才有动力,15年中旬就要准备实习,学习复习学习复习学习复习学习复习……无限循环中,好记性不如烂笔头……从数组开始,为主干. c 的array由一系列的类型相同的元素构成,数组声明包括数组元素个数和 ...

    6. 1Z0-053 争议题目解析86

      1Z0-053 争议题目解析86 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 86.Your production database is running in archivel ...

    7. 微信小程序小技巧系列《一》幻灯片，tab导航切换

      作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...

    8. WebGIS中解决使用Lucene进行兴趣点搜索排序的两种思路

      文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前跟信息采集相关的一个项目提出了这样的一个需求:中国银行等 ...

    9. OpenGL超级宝典visual studio 2013开发环境配置，GLTools

      做三维重建需要用到OpenGL,开始看<OpenGL超级宝典>,新手第一步配置环境就折腾了一天,记录下环境的配置过程. <超级宝典>中的例子使用了GLEW,freeglut以及 ...

    10. web.config配置

      <appSettings> <add key="DepartmentRootID" value="A90AEAEC-E3D4-43DE-BB67-854 ...