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. winform 对话框、打印框

    winform 对话框控件 1.打开文件对话框(OpenFileDialog) 2.保存文件对话框(SaveFileDialog) 3.字体对话框(FontDialog) 4.颜色对话框(ColorD ...

  2. Js原生 双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 1.1 C#简介

    大家好,这是我的C#(读做 "C sharp")学习之旅,先简介一下我了解的C#吧! 首先,说到C#,就不得不提到微软的.NET..NET是微软推出的软件开发和运行平台,允许应用程 ...

  4. winform下的智能提示框

    winform下的智能提示框 最近在搞winform的程序,接触到有些可能以后还会用到的功能,所以写到博客园里去,第一可以加深自己的印象,第二可以在以后再遇到同样问题的时候忘记了可以马上回来看看,第三 ...

  5. SQL中 Left Join 与 Right Join 与 Inner Join 与 Full Join的区别

    首先看看Left Join 与Right Join 与 Inner Join 与 Full Join对表进行操作后得到的结果. 在数据库中新建两张表,并插入要测试的数据. 新建表: GO /***** ...

  6. opencv的学习笔记1

    想在周末去游泳,找了些游泳的注意事项什么的,想想还没干正事,就来继续看看opencv的使用吧,晚上看了opencv的一些基本入门的东西,打算下面主要总结CSDN上一个大牛的博文,链接如下:http:/ ...

  7. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数007, match,图像匹配

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数007, match,图像匹配 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换 ...

  8. Openstack命令行创建不同vlan段虚拟机

    默认使用nova-network的vlan模式,但是在使用默认的dashboard的时候,不能指定创建的虚拟机的使用网段,固定IP地址. 实际上该功能是在存在的,只是openstack的dashbbo ...

  9. xcode 创建项目 勾选 git 出现警告

    1. 解决方法: 在mac机上找到终端工具  >> 这里先介绍下使用Command-line. 1,下载Git installer,地址:http://git-scm.com/downlo ...

  10. Orcale与jfinal的添加时间问题

    时间只能不能使用一般的方法进行添加,必须转换,比如添加当前时间,如上图所示