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. 总结一下在ASP.NET中开发网站的一般步骤

    1.打开Miscosoft Visual Studio2010 2.新建网页添加新项 3.设计网页 4.添加窗体控件 5.优化页面 6.调试网页

  2. Mvc请求管道中的19个事件

    下面是请求管道中的19个事件. (1)BeginRequest: 开始处理请求 (2)AuthenticateRequest授权验证请求,获取用户授权信息 (3):PostAuthenticateRe ...

  3. @synthesize vs. @dynamic

    @synthesize will generate getter and setter methods and corresponding instance variable for your pro ...

  4. TTL

    TTL(Time To Live )是IP协议包中的一个值,它告诉网络,数据包在网络中的时间是否太长而应被丢弃.有很多原因使包在一定时间内不能被传递到目的地.解决方法就是在一段时 间后丢弃这个包,然后 ...

  5. HDU Machine scheduling

    Machine scheduling Time Limit : 5000/2000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) ...

  6. struct内存对齐1：gcc与VC的差别

    struct内存对齐:gcc与VC的差别 内存对齐是编译器为了便于CPU快速访问而采用的一项技术,对于不同的编译器有不同的处理方法. Win32平台下的微软VC编译器在默认情况下采用如下的对齐规则:  ...

  7. VS2010/2012配置优化记录笔记

    VS2010/2012配置优化记录笔记 在某些情况下VS2010/2012运行真的实在是太卡了,有什么办法可以提高速度吗?下面介绍几个优化策略,感兴趣的朋友可以参考下,希望可以帮助到你   有的时候V ...

  8. select框内容的编辑、修改、添加、删除操作

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  9. 使用jquery中height()方法获取各种高度大全

    alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(docum ...

  10. iPhone6搜索如何打开？详细使用方法

    iphone6搜索功能在哪?怎么用呢?当iPhone6中安装了太多的应用或者联系人太多时,我们就可以使用iPhone6搜索功能就能快速找到,但是还有很多朋友对于iphone6搜索功能在哪,怎么用还不太 ...