前言

关于 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. iframe跨域+

      script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...

    2. MySQL分区总结

      MySQL支持RANGE,LIST,HASH和KEY四种分区.其中,每个分区又都有一种特殊的类型.对于RANGE分区,有RANGE COLUMNS分区.对于LIST分区,有LIST COLUMNS分区 ...

    3. C算法编程题（二）正螺旋

      前言 上一篇<C算法编程题(一)扑克牌发牌> 写东西前总是喜欢吐槽一些东西,还是多啰嗦几句吧,早上看了一篇博文<谈谈外企涨工资那些事>,里面楼主讲到外企公司包含的五类人,其实不 ...

    4. table-cell实现宽度自适应布局

      利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...

    5. 【Android】[转] Android屏幕旋转使用OrientationEventListener的监听

      说明 遇到一个奇葩的问题,我在使用onConfigChanged拦截屏幕的横竖屏旋转时,发现直接进行180度的横屏/竖屏转换居然没有反应!查找原因发现仅对landscape或者portrait状态有用 ...

    6. nodejs学习笔记四——express-session

      博友沉沉-_-的这篇express 框架之session分析的已经非常详细了,本人这里就不描述了. 总结其中的几个关键点. 1.http协议规定http链接是无状态的链接,cookie和session ...

    7. 轻松理解AOP思想(面向切面编程)

      本文旨在帮助还没有理解AOP的童鞋看透弄懂AOP,也欢迎高手批评指正. 先说一个Spring是什么吧,大家都是它是一个框架,但框架这个词对新手有点抽象,以致于越解释越模糊,不过它确实是个框架的,但那是 ...

    8. react入门（5）

      对前面四篇内容进行简单的回顾: react入门(1):jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other,map循环 react ...

    9. inno setup读取注册表遇到的一个坑

      一.背景 目前,公司针对PR开发的一个插件需要发布到64位系统上.该插件包括一个prm格式的文件和若干个DLL文件.其中,prm文件需要复制到PR公共插件目录下,DLL需要复制到Windows系统目录 ...

    10. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

      上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...