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的父元素来进 ...
随机推荐
- vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）
场景 业务要求能够直接通过 "域名+/file"的方式访问静态资源的html,然而产品绝对static暴露在url中不好看又不能直接将html放在static中.所以想到了既然st ...
- nodejs繁琐地自建路由
一.繁琐的自建路由 app.js var server = require('./server'); server.startServer(); server.js var http = requir ...
- CSS3自定义loading效果
效果: 使用CSS3完成loading的制作 css样式: <style type="text/css"> .mask { position: fixed; left: ...
- csharp:using Newtonsoft.Json.Net2.0 in .net 2.0 webform
/// <summary> /// http://www.weather.com.cn/data/sk/101280601.html /// {"weatherinfo" ...
- 11.7NOIP模拟赛解题报告
心路历程 预计得分:\(50 + 100 + 100\) 实际得分:\(50 + 100 +100\) T2 T3两道数据结构题美滋滋,然而写完就过去\(3h\)美滋滋 T1数学题学弟们都会做Orzz ...
- webapp 的简单开发
web app 的技术平台很多,如adobe phonegap.sencha touch.appcan(国产).dcloud(国产)平台.我选择了dcloud平台,原因:简单,容易上手. web ap ...
- 【转载】从创业者角度看《印度合伙人 Padman》后的一点感受
***************************** 这部电影看简介是真实事件改编的,当时除了电影本身的精彩和主角宠妻狂魔之外,印象最深的就是感觉到主角的创业者心态是一步步在生活中被培养的.特别 ...
- 纯css面板插件，自适应，多样式
最近在做公司的系统后台,用的bootstrap,在设计布局的时候不喜欢他的面板,所以自己写了这个面板插件,分享给大家 先上预览图: 默认样式: 绿色: 黄色: 蓝: 红: 使用方法: 引用MoUi.c ...
- Logger性能优化
最近排查线上问题,无意中发现了Logger堵塞的情况,排查的同时也做下总结,做个笔记,以防备用. 先上图,看下实际堵塞的情况 从图中可以清楚的看到标黄的都在 waiting to lock <0 ...
- Android PopupWindow显示位置设置
当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的那样,会发 生错位的情况,尤其是不同尺寸的平板上,那错位错的不是一般的不 ...