前言

关于 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. 效率和协作工具--OneNote

      身边有很多的朋友,都是在电脑上办公.除了会计和外贸相关的工作,用到Excel,公司的ERP比较多.日常工作中,特别是事情一多,大家基本不知道从何处完成今天的任务,而已有时经常丢三落四.同事在QQ或者M ...

    2. 使用Windows Service Wrapper快速创建一个Windows Service

      前言 今天介绍一个小工具的使用.我们都知道Windows Service是一种特殊的应用程序,它的好处是可以一直在后台运行,相对来说,比较适合一些需要一直运行同时不需要过多用户干预的应用程序,这一类我 ...

    3. js ES6 对字符的操作注意事项

      1.codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法. function is32Bit(c) { return c.codePointAt(0) > 0xFFF ...

    4. ZOJ Problem Set - 1045 HangOver

      #include <stdio.h> int main() { float c; int i; while(scanf("%f",&c)!=EOF&&a ...

    5. Oracle RAC客户端tnsnames.ora相关配置及测试

      1.Oracle RAC服务端/etc/hosts部分内容如下 2.查看服务端的local_listener和remote_listener参数 3.客户端tnsnames.ora配置参考 3.1 1 ...

    6. Cesium原理篇：6 Renderer模块(2: Texture)

      Texture也是WebGL中重要的概念,使用起来也很简单.但有句话叫大道至简,如果真的想要用好纹理,里面的水其实也是很深的.下面我们来一探究竟. 下面是WebGL中创建一个纹理的最简过程: var ...

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

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

    8. 判断点是否落在面中的Oracle存储过程描述

      文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 公司在乐亭的项目中,工程同事提出了需要在对接车辆GPS上报点 ...

    9. Android应用底部导航栏(选项卡)实例

      现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

    10. 使用签名来保证ASP.NET MVC OR WEBAPI的接口安全

      当我们开发一款App的时候,App需要跟后台服务进行通信获取或者提交数据.如果我们没有完善的安全机制则很容易被别用心的人伪造请求而篡改数据. 所以我们需要使用某种安全机制来保证请求的合法.现在最常用的 ...