position定位笔记
position定位
position一共有四个可选属性：static/relative/absolute/fixed
代码：
<style type="text/css">
* {
margin: 0;
}
.d1 {
position:absolute;
height:400px;
width:400px;
background:yellow;
left:80px;
top:80px;
}
.d2 {
position:absolute;
height:200px;
width:200px;
background:red;
left:100px;
top:80px;
}
.d3 {
position:relative;
height:200px;
width:200px;
background:blue;
left:186px;
top:186px;
}
.d4 {
position:fixed;
height:140px;
width:140px;
background:black;
left:20px;
top:20px;
}
.d5 {
position:static;
height:140px;
width:140px;
background:brown;
left:220px;
top:220px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</div>
<div class="d5"></div>
</body>
</html>
代码结果：
- 棕色(brown)的是static的，所以它的left和top没有起作用，一直跑到最上面去了
- 黑色（black）的是fixed的，所以它直接以浏览器窗口开始计算left和top的值
- 红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值，只是因为有一个是absolute所以产生了重叠效果，没有被另外一个挤走。
- 因为默认的类型都是static，所以页面长度等定位的不合理时一个会把一个挤走。
static
position:static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列
relative
position:relative
- 微调元素，相对于自己原来的位置移动
- 不脱标，形影分离，身体留在原本位置（本体看不见但还是占有位置），影子移动
- relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。
- relative产生一个新的定位上下文
absolute
position:absolute
- absolute元素脱离了文档结构。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构）
- absolute元素具有“包裹性”。宽度刚好是内容的宽度。
- absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值。
- absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。
fixed
position:fixed
固定定位就是相对浏览器窗口定位。页面无论如何滚动，这个盒子显示位置不变。
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的父元素来进 ...
随机推荐
- 浅谈JavaScript之function用括号包起来
(function a(){}) (命名函数表达式)会返回这个函数(不会执行),但是在括号外面无法调用该函数,需要一个变量接收这个函数,var fun = (function a(){}),一般这个用 ...
- 函数arguments对象
一.arguments对象 arguments 是一个对应于传递给函数的参数的类数组对象. 二.语法 arguments 三.描述 arguments对象是所有(非箭头)函数中都可用的局部变量.你可以 ...
- 基于容器微服务的PaaS云平台设计（一） 实现容器微服务和持续集成
版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 ,博主地址:http://www.cnblogs.com/SuperXJ/ 前言:关于什么是容器微服务PaaS和容器微服务PaaS的 ...
- makefile 通配符了解% $@ $^ $<
把目录下所有文件都编译的命令. 1 all:$(subst .c,.o,$(wildcard *.c)) 2 3 %.o:%.c 4 gcc -o $@ $< 下面是几个特舒符号的意思: $@: ...
- myeclipse 下载 checkstyle 引入后不显示问题
参照这篇博客,http://blog.csdn.net/zzq900503/article/details/42003499 下载最新的checkstyle版本后,在本地导入后一直不显示,步骤什么的也 ...
- 三、安装远程工具xshell，使用SFTP传输文件——Linux学习笔记
A)远程工具 学Linux没有远程工具怎么行,百度了下,发现了xshell这个东西,重点是可以免费. 链接是多简单啊 输入地址,账号就搞定了. 打命令什么的都搞定了,真的感谢这个时代,求学有路啊! 到 ...
- 使用NSURLConnection实现大文件断点下载
使用NSURLConnection实现大文件断点下载 由于是实现大文件的断点下载,不是下载一般图片什么的.在设计这个类的时候本身就不会考虑把下载的文件缓存到内存中,而是直接写到文件系统. 要实现断点下 ...
- Java集合工具类
import java.util.ArrayList; import java.util.Collection; import java.util.List; import java.util.Map ...
- July 18th 2017 Week 29th Tuesday
My heart is stronger now that you are in it. 我的心里有了你,从此变得更强大. You will no longer feel lonely if ther ...
- 在Kubernetes上运行SAP UI5应用(下): 一个例子体会Kubernetes内容器的高可用性和弹性伸缩
上一篇文章 在Kubernetes上运行SAP UI5应用(上),我介绍了如何在Docker里运行一个简单的SAP UI5应用,并且已经成功地将一个包含了这个UI5应用的docker镜像上传到Dock ...