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 transDate() { var $time =document.getElementById("share-time"); var date = $time. ...
- 洛谷P1024 一元三次方程求解(数学)
题意 题目链接 Sol 本来是一道好的公式题. 然后输出只要保留两位小数?? 直接上不就赢了嘛.. #include<bits/stdc++.h> #define LL long long ...
- 24点-code1
#include <iostream> #include <string> #include <cstdlib> #include <cmath> us ...
- Sandworm Attack小结
这个漏洞刚出来时就分析过,当时大致弄明白了原理,但对很多细节和原理还是一知半解.后来开始找工作……今天终于有时间来把欠的这部分功课补上. 这个漏洞网上的各种中英文分析已经很多了,因此这里我只根据自己的 ...
- 允许远程链接mysql，开放3306端口
首先查看端口是否打开 netstat -an|grep 3306 此图为开启3306端口的截图,之前显示为. . . 127.0.0.1:3306 . . . 打开mysql配置文件vi /etc/m ...
- nginx限制IP恶意调用短信接口处理方法
真实案例: 查看nginx日志,发现别有用心的人恶意调用API接口刷短信: /Jun/::: +] "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) ...
- c# HttpWebRequest与HttpWebResponse
[转]c# HttpWebRequest与HttpWebResponse 绝技 如果你想做一些,抓取,或者是自动获取的功能,那么就跟我一起来学习一下Http请求吧. 本文章会对Http请求时的Get和 ...
- Java基础之二维数组的回顾
class ArrayWork { /* * 二维数组的复习! * * 2014年4月2日 21:45:50 * * * **/ public static void main(String[] ar ...
- 不错的.net开源项目
Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...
- ST表学习总结
前段时间做16年多校联合赛的Contest 1的D题(HDU 5726)时候遇到了多次查询指定区间的gcd值的问题,疑惑于用什么样的方式进行处理,最后上网查到了ST表,开始弄得晕头转向,后来才慢慢找到 ...