CSS基础学习-12.CSS position
绝对定位
position:absolute,元素脱离文档流,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位。如果不存在这样的祖先元素,则相对于body元素,即相对于浏览器窗口。
相对定位
position:relative,它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
固定定位
position:fixed,fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。并且拖动滚动条时位置固定不变。
总结:
position: absolute
绝对定位:是相对于元素最近的已定位的祖先元素
position: relative
相对定位:相对定位是相对于元素在文档中的初始位置
relative:没有脱离文档流,是占位的。就是在它之后的元素内容是显示在其后面,而不是叠加显示。
absolute:脱离文档流,不占位。就是在它之后的元素内容叠加显示在上面,而不是排列在其后面。
fixed:与absolute一致,唯一的区别是偏移定位是以窗口为参考,不会随着滚动条滚动。
CSS基础学习-12.CSS position的更多相关文章
- CSS基础学习 21.CSS居中总结
注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...
- CSS基础学习 20.CSS媒体查询
- CSS基础学习 19.CSS hack
- CSS基础学习 18.CSS多列
四种常见的浏览器内核:
- CSS基础学习 17.CSS动画
- CSS基础学习 16.CSS过渡
- CSS基础学习-15-1.CSS 浏览器内核
- CSS基础学习-14 CSS visibility与overflow属性
- CSS基础学习-13.CSS 浮动
如果前一个元素设置浮动属性,则之后的元素也会继承float属性,我觉得这里说是继承不太对,可以理解为会影响到之后的元素,所以在设置浮动元素之后的元素要想不被影响就需要清除浮动.元素设置左浮动,则清除左 ...
随机推荐
- JAVA语言课堂测试01源代码(学生成绩管理系统)
package 考试; /*信1807-8 * 20183798 * 向瑜 */ import java.util.Scanner; //ScoreInformation 类 class ScoreI ...
- 【并行计算-CUDA开发】GPU 的硬体架构
GPU 的硬体架构 这里我们会简单介绍,NVIDIA 目前支援CUDA 的GPU,其在执行CUDA 程式的部份(基本上就是其shader 单元)的架构.这里的资料是综合NVIDIA 所公布的资讯, ...
- js放到head中失效的原因与解决方法
1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- rocketMq消息的发送和消息消费
rocketMq消息的发送和消息消费 一.消息推送 public void pushMessage() { String message = "推送消息内容!"; try { De ...
- provider: Shared Memory Provider, error: 0 - No process is on the other end of the pipe.
通常情况下,要解决这个,你去SQL Server配置管理器(SSCM)和: [1]在SSCM中设置 [1.1]确保共享内存协议启用 [1.2]确保命名管道协议 [1.3]确保TCP / IP被启用,和 ...
- 老贾的幸福生活day6 整型和布尔值的转换 字符串讲解 for 循环简介
整型和布尔值的转换: 整型: python 2 整型 int long(长整型) /获取的是整型 python 3 整型 int 获取的是浮点数(小数) 十进制转二进制: print(bin(36)) ...
- 利用js代码屏蔽f12,右键,粘贴,复制,剪切,选中,操作!!秀!秀!秀!
koala 专注于个人技术分享 屏蔽f12审查 <script> document.onkeydown = function () { if (window.event && ...
- table表格整体居中 和 table表格中各行各列内容居中
1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...
- Codeforces 1178F2. Long Colorful Strip
传送门 首先涂区间,那么区间最多有 $2n$ 个相邻位置不同的情况,并且连续相同的颜色可以合并起来 那么这样操作完以后,区间长度最多为 $2n$ 发现涂完一段区间以后其他的操作都不能出现一边在区间内而 ...
- python 使用pymssql连接sql server数据库(转)
import pymssql class MSSQL: """ 对pymssql的简单封装 pymssql库,该库到这里下载:http://www.lf ...