css定位之绝对定位
绝对定位可以做很多事情，如广告位，弹出框，遮罩层等一些功能
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定位之绝对定位的更多相关文章
- [Web 前端] 019 css 定位之绝对定位与相对定位
1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...
- CSS定位（CSS定位概述、相对定位、绝对定位、浮动）
CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...
- CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位
其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
- CSS定位小技巧
CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
随机推荐
- java ftp下载文件
1.使用官方正规的jar commons-net-1.4.1.jar jakarta-oro-2.0.8.jar 注意:使用ftp从windows服务器下载文件和从linux服务器下载文件不一样 2. ...
- Dynamics AX 2012 R2 创建一个专用的批处理服务器
安装额外AOS的另一原因,是要创建一个专用的Batch服务器. AOS实例在处理batch job时,会影响它的响应速度.安装一个专用Batch服务器,可以解决这个问题. 批处理服务器不能加到 ...
- Frost R&D
Trees Procedural Math Model in Houdini,render with Mantra. Shader use SurfaceModel With Other Attrib ...
- Rmarkdown用法与R语言动态报告
Rmarkdown用法与R语言动态报告数据分析用R语言非常便捷,因为R语言的社区强大,并且在不断更新和完善,提供了各种分析利器.Knitr和Rmarkdown包则是数据分析中的动态报告利器. 下面是一 ...
- [问题2014A01] 复旦高等代数 I（14级）每周一题（第三教学周）
[问题2014A01] 试求下列 \(n\) 阶行列式的值: \[ |A|=\begin{vmatrix} 1 & x_1(x_1-a) & x_1^2(x_1-a) & \ ...
- Beaglebone Black – 连接 GY-91 MPU9250+BMP280 九轴传感器（1）
本篇内容为,通过 I2C 配置 GY-91 MPU9250+BMP280 里面的 MPU9250 连接 AK8963 磁感应.两个办法,1)MPU9250 设置 Master Mode 通过 AUX ...
- 三种DSO（标准DSO、写优化DSO、直接更新DSO）、标准DSO覆盖合计规则
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Jmockit使用
引用单元测试中mock的使用及mock神器jmockit实践中的java单元测试中各种Mock框架对比,就能明白JMockit有多么强大: JMockit是基于JavaSE5中的java.lang.i ...
- 【转】linux命令详解：md5sum命令
[转]linux命令详解:md5sum命令 转自:http://blog.itpub.net/29320885/viewspace-1710218/ 前言 在网络传输.设备之间转存.复制大文件等时,可 ...
- combobox获取值
easyui-combobox是组合框 ,既可以输入,也可以选择 获取的数据是json格式的 [{"id":"001","text":&q ...