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 定位的更多相关文章

  1. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  2. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  3. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  4. position定位的小问题

    css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...

  5. (转)Position定位：relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  6. 元素重叠及position定位的z-index顺序

    元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...

  7. 盒子模型&position定位

    有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...

  8. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  9. 归纳篇（一）CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  10. (转)浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

随机推荐

  1. ZoomBar 设计

    package com.example.canvasdemo; import android.content.Context; import android.graphics.Canvas; impo ...

  2. 修改yv12像素值

    YV12内存布局 1 unsigned char *pY = (unsigned char *)pBuf; unsigned char *pV = pY + nWidth * nHeight; uns ...

  3. 蓝灯(lantern)在服务器(vps)上运行

    蓝灯(lantern)在无界面的linux下运行的时候,会遇到一个错误: error while loading shared libraries: libappindicator3.so.1: ca ...

  4. Json.net对于导航属性的处理（解决对象循环引用）

    对于两张表A.B多对多的关系中,A的导航属性中有B,B的导航属性中有A,这样Json.net对A或者B对象序列化时会形成死循环 所以对于导航属性要加标签 首先在A.B实体类工程(Model)中引用Js ...

  5. php中curl模拟浏览器来传输数据

    cURL可以使用URL的语法模拟浏览器来传输数据, 因为它是模拟浏览器,因此它同样支持多种协议,FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以 ...

  6. 动态的计算行高 加载数据源 有多少显示多少 tableView 包含 colloctionView 显示复杂的界面写法

    有时候,我们经常碰到这样的需求 先遵守代理 @interface PublishCollectionCell ()<UICollectionViewDataSource, UICollectio ...

  7. android音乐播放器(Service+ContentProvider+Broadcast+Activity四大组件完成)

    1.获取音乐 1-1:获取手机中的音乐(用ContentProvider内容提供者来完成): package com.firefly.util; import java.util.ArrayList; ...

  8. Web的Ajax应用开发模式（二）——Ajax开发模式分析

    寄语: 前天在查看一些公司的招聘要求时,看到有公司要求测试人员了解Ajax,故写此博文旨在帮助测试人员提高自身技术知识水平,愿与广大测试同胞共同进步.(欢迎纠错!!!) Web应用的传统开发模式总结: ...

  9. 使用Rsync进行文件的同步与备份

    Rsync是Linux下非常不错的文件同步备份工具,安全性高.备份迅速.支持增量备,功能强大且高效. 服务端配置 Rsync服务的配置文件/etc/rsyncd.conf,示例配置(带用户名密码配置) ...

  10. java中正则表达式基本用法

    正则表达式是一种可以用于模式匹配和替换的规范,一个正则表达式就是由普通的字符(例如字符a到z)以及特殊字符(元字符)组成的文字模式,它 用以描述在查找文字主体时待匹配的一个或多个字符串.正则表达式作为 ...