position 定位
position属性是指本体相对于上级的定位，position又分绝对定位和相对定位。他的默认值是static，意味着元素没有被定位，出现在文档流中应该出现的位置。如果用position来布局页面，父元素的position属性必须为relative或absolute。行元素加了 position：absolute 后可设置宽和高（加了float和fixed也可以设置宽和高）。
常见属性值：
1。static，无特殊定位，对象遵循文档流。
2.relative， 对象遵循正常文档流。
3.absolute，对象脱离文档流，使用top，right，bottom，left 等属性进行绝对定位。
4.fixed，对象脱离正常文档流，使用top，right，bottom，left 等属性以窗口为参考点进行定位，当文档出现滚动条时，对象不回随着滚动。ie6及以下不支持此参数。
static、relative正常文档流 absolute、fixed脱离文档流。
position：absolute（绝对定位）是基于父容器position：relative的定位
也就是说绝对定位 absolute 要有个参照物，这个参照物就是父容器relative。
如果已经定位的元素里面还要添加元素并想定位的话可以在在想定位的元素里直接加absolute，其父容器不需要再添加relative。
即：absolute里面可以直接添加absolute来进行绝对定位。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
ul li{width: 300px; height: 210px;border: 1px solid #ddd; float: left;
list-style: none; margin-right: 30px;
}
li{position: relative;}
div{width: 100px; height: 100px; background: url("img/QQ截图20161221123126.png") no-repeat;
position: absolute;left: 105px; top: -50px;
}
p{text-align: center;}
.p1{position: absolute; right: 0px; bottom: 0px;}
.span1{position: absolute; left: 0px; bottom: 0px;}
</style>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<ul>
<li>
<div class="d1"><span class="span1">随便写点</span></div>
<br />
<br />
<br />
<br />
<p class="p1">极速定位</p>
<p class="p2">极速定位</p>
</li>
<li>
<div class="d2"></div>
</li>
<li>
<div class="d3"></div>
</li>
</ul>
</body>
</html>
显示如下：
通常我们不会让元素相对于浏览器绝对定位。元素都有各自的布局，我们要让元素基于他的父级来定位，这就要让元素知道哪个是他绝对定位的父级，一般，加了position的会最为定位元素的父级。
如果不是父子级关系，其他元素为relative，那里面的sbsolute会以浏览器定位。
伪元素+雪人定位练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css"/>
<style type="text/css">
div{width: 100%; height: 340px; background: pink; position: relative;}
div::before{
content: ""; width: 70px; height: 70px;
background: url("img/QQ截图20161221172609.png") no-repeat;
position: absolute; bottom: 0px; right: 150px;
}
div::after{
content: ""; width: 100%; height: 14px; background: url("img/QQ截图20161221173421.png");
position: absolute;bottom: 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
显示如下：
position 定位的更多相关文章
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- position定位
CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- position定位的小问题
css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...
- (转)Position定位：relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- 盒子模型&position定位
有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
- 归纳篇（一）CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
随机推荐
- C# 窗体（登录界面）
首先拖动一个 lable(写用户名) 后面 跟一个Textbox 再lable(写密码) 后面 跟一个Textbox(需设置一下属性—行为—useSystemPasswordChar(默认输入的密 ...
- Web应用程序项目以配置使用IIS。未找到Web服务器
解决办法 右键编辑该Web项目的csproj文件 把UserIIS改为False.或者在IIS服务器里面配置一个IISUrl里面的地址 如图
- JetBrains WebStorm 安装破解问题
1.选择用户名验证码注册,进入地址:http://15.idea.lanyus.com/ 然后输入用户名,提交便会生成验证码,注册成功, 2.选择License server,输入以下地址: http ...
- spring事物配置，声明式事务管理和基于@Transactional注解的使用
http://blog.csdn.net/bao19901210/article/details/41724355 http://www.cnblogs.com/leiOOlei/p/3725911. ...
- win7 APPCRASH问题解决！
真是废了老劲了..什么清理插件,各种运行msconfig/启动都试了 问题:**.exe已停止工作 问题事件名称: APPCRASH 应用程序名: compute_image_mean.exe 应用程 ...
- [转]Win7 64位搭建本地SVN服务器 Apache+Subversion
转载地址:http://blog.sina.com.cn/s/blog_4f072a7001015j5z.html 一.工具下载 01.SVN 服务器Subversion:Setup-Subversi ...
- POJ3420Quad Tiling（矩阵快速幂）
Quad Tiling Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3740 Accepted: 1684 Descripti ...
- Unity的旋转-四元数,欧拉角用法简介
当初弄不明白旋转..居然找不到资料四元数应该用轴角相乘...后来自己摸明白了 通过两种旋转的配合,可以告别世界空间和本地空间矩阵转换了,大大提升效率. 每个轴相乘即可,可以任意轴,无限乘.无万向节锁问 ...
- [问题2014A07] 解答
[问题2014A07] 解答 我们分三步进行证明. \(1^\circ\) 先证 \(\alpha_1,\alpha_2\) 线性无关. 用反证法, 设 \(\alpha_1,\alpha_2\) ...
- sql2008 表名为全数字时查询报错
今天遇到个很奇葩的问题,在写一个应用程序时需要查询表的数据,但是表名是全数字的,直接查询会报错,于是想到给111的表名加一对中括号:即——>select * from [111] 刚开始还是报错 ...