绝对定位可以做很多事情，如广告位，弹出框，遮罩层等一些功能

css的定位方式：1.静态定位， 2.绝对定位(固定定位和绝对定位) ，3.相对定位

绝对定位会受到影响的因素有

1.属性的取值。

2.元素偏移量

3.元素偏移参照基准。

绝对定位完全脱离标准文档流

未设置偏移量时，都会按照已经定位（absolute,relative）的父级元素的左上角定位

当设置了绝对定位那么就会有了z-index的属性

fixed 和absolute的区别

1.absolute,无已定位的祖先元素，以html标签为基准偏移

2.有已经定位祖先元素，以距其最近的，已定位的祖先元素为基准偏移

3.fixed定位，有无已定位祖先元素，都以浏览器可是窗口为基准偏移

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>绝对定位</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	margin:0 auto;

    height: 300px;

  	position: relative;

  	overflow: hidden;

    background-color: #198610

  }

  .absolute{

    position: absolute;

    left: 50px;

    top:15px;

    height: 100px;

    width: 200px;

    background-color: #861028

  }

  .fixed{

    position: fixed;

    left: 10px;

    top: 10px;

    height: 100px;

    width: 300px;

    background-color: #9c9c9c;

  }

</style>

<body>

	<div class="wrapper">

		<div class="absolute">position:absolute</div>

    <div class="fixed">position:fixed</div>

	</div>

</body>

</html>

　　

大家看看效果，希望对大家有帮助，谢谢

css定位之绝对定位的更多相关文章

  1. [Web 前端] 019 css 定位之绝对定位与相对定位

    1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...

  2. CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

  3. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  4. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  5. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  6. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  7. CSS 定位

    一.CSS 定位和浮动   它们代替了多年来的表格布局.   定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置.   浮动在 CSS1 中被首次提出.浮动不完全是定位, ...

  8. CSS定位小技巧

    CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...

  9. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

随机推荐

  1. 数据可视化：Echart中k图实现动态阈值报警及实时更新数据

    1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:

  2. 通过Trainingkit对Azure有一个初步的了解

    学习Azure有一个非常不错的资料库Azure training kit. 这里面包含了很多Azure团队编写的实例代码,以及为初学Azure的开发人员准备的新手教学课程. 开发人员可以从http:/ ...

  3. 设置Ubuntu 14.04右键终端的方法

    设置Ubuntu 14.04右键终端的方法如下: 首先要安装一个包,即可在右键里面添加一个"打开终端"的菜单. sudo apt-get install nautilus-open ...

  4. iOS 枚举的巧用

    前言 在之前的一篇文章中简单的提到了这个问题, 但是自己写的不详细, 并且自己深入了解的也不是特别多, 在开发中也没怎么用到,所以经过阅读者的反馈对这个问题很是疑惑! 本篇文章会分析之前的不足之处, ...

  5. CentOS7 续

    网络环境 第一步:通过cmd查询自己本机的IP,然后记录下来,手工配置到本地连接上面IP:子网掩码:DNS1:101.7.8.9DNS2:202.38.184.13 第二步:给物理机 本地连接配置第二 ...

  6. cygwin配置git

    对于windows用户来说,使用git bash经常会出现乱码情况,那么一款优质高尚的软件,值得推荐一下了,那就是cygwin 下载cygwin后,在安装过程中,安装git,安装vim编辑器 然后会在 ...

  7. Linux架构

    Linux架构   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我以下图为基础,说明Linux的架构(architecture ...

  8. REST 架构风格

    目前基于网络应用的架构风格主要有三种: RPC架构风格   将服务器看作是由一些过程组成,客户端调用这些过程来执行特定的任务.SOAP就是RPC风格的一种架构.过程是动词性的(做某件事),因此RPC建 ...

  9. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  10. iOS - Library 库

    1.动态库 & 静态库 什么是库: 库是程序代码的集合,是共享程序代码的一种方式.根据源代码的公开情况,库可以分为 2 种类型: 开源库: 公开源代码,能看到具体实现. 比如 SDWebIma ...