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的父元素来进 ...
随机推荐
- 判断sql是否存在特定的对象
1 判断数据库是否存在if exists (select * from sys.databases where name = '数据库名') drop database [数据库名] 2 判断表是否存 ...
- linux sheel script demo
demo1 (输入/输出) 1.1. target : 输入姓.名, 输出姓名 1.2. create directory mkdir ~/bin 1.3. create & edit she ...
- Python入门-初始函数
今天让我们来初步认识一个在python中非常重要的组成部分:函数 首先,让我们来幻想这样一个场景: 比如说我们现在想要通过社交软件约一个妹子,步骤都有什么? print('打开手机 ') print( ...
- Windows API-----top level window
原文地址: http://blog.163.com/cumt_xl/blog/static/19071504420136911838683/ Q: What is a top-level window ...
- C# Winform DataGridView获取单元格的值
1,可以直接通过DataGridView的重载运算符[]直接获取 使用方法: dataGridView[columnIndex][rowsIndex].Value.ToString().//colum ...
- EF+Oracle
一个小项目,设计到几十张表,但都是简单的增删改查,所以呢,想偷懒用EF. 结果,在.NET4.0下,死活都不行.最后在Oracle官方找到demo,上面清清楚楚的写着必须>NET4.5. 看着E ...
- C++教程|菜鸟教程
https://www.runoob.com/cplusplus/cpp-tutorial.html 在线编辑器 http://www.runoob.com/try/runcode.php?filen ...
- C++的字符串分割函数
原文: C++的字符串没有分割函数,因此需要自己写方便使用.而受到开发工具的影响,有很多用起来比较麻烦啦,下面这个比较不错奥. 用STL进行字符串的分割 涉及到string类的两个函数find和sub ...
- 【Udacity】误差原因——方差variance与偏差bias
偏差造成的误差-准确率和欠拟合 方差-精度和过拟合 Sklearn代码 理解bias &variance 在模型预测中,模型可能出现的误差来自两个主要来源,即:因模型无法表示基本数据的复杂度而 ...
- recommendation baselines
整理recommendation baseline 的实现代码和方法归类: bpr: https://github.com/gamboviol/bpr fpmc: https://github.c ...