CSS知识点 之 position布局

前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西。课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一些小任务虽然写起来不困难,但在写的过程中还是学到不少东西,查漏补缺。前端知识太丰富,很容易忽略一些小细节,自己也是倚着这个心态去学的,虽然写过网站,也写过app,不过这一程下来,通过里面给出的一些高水平的知识点的讲解,还是感觉很受用,现在分享出给大家伙看看,写的不好求放过,我第一次写东西,算是总结,也是回顾。

其中有不少东西,来自原帖,我会在下面给出链接。

使用position布局方式,可以分成三种,相对定位(也即position:relative)、绝对定位(postion:absolute\fixed)、粘性定位(position:sticky)等等。

通常我们还会见到一个关键字 static,static 是元素默认使用的定位方式,也就是元素在文档中处于当前的布局位置,此时,top,left,right,bottom,以及z-index 属性不起作用。

这里有一小段代码可以演示一下:(浏览器里面查看比较直观,这个是atom直接预览,速度快,推荐这玩意写前端)

可以看看设置了left 和 top 前后的变化

设置之前

设置之后

可以看到没有发生任何变化!

相对定位:默认在原先的元素位置留下一个空白,元素相对的位置是元素原先默认的位置,说起来有点绕。

之间看下面的图,设置后结果看图,对比图1,很好理解了吧!

也就是,使用relative 定位方式,元素还是存在于文档流之中的,不会脱离文档,依旧会占据一个位置。

绝对定位:absolute 和 fixed;绝对定位方式被任务是,元素是脱离了文档流。这个可以理解为元素是固定死的,相同级别的元素之间不存在位置的影响。它只和父级元素之间存在瓜葛。

先看这张图

元素2设置了绝对定位absolute,此时使用left,top,等属性的时候,元素相对的不再是元素默认的位置(也就是图1中元素2的位置),而是相对于section(最近的定位祖先元素)的位置定位了。而且,元素2将元素1盖住了。

而fixed 方式的固定定位和absolute相似。不同的是,fixed 以后,元素固定的位置不再是相对于文档流中的父级元素,而是相对于浏览器窗口!

在CSS3中新增了如下几种定位方式

center:

与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。

page:

与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。

sticky:

对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。这玩意慎用。

原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

CSS布局学习笔记之position的更多相关文章

  1. css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...

  2. css布局学习笔记之box-sizing

    当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素. .div{ width: 500px; margin: 20px auto; padding: 50px; ...

  3. css布局学习笔记之max-width

    设置块级元素的 width 可以阻止它从左到右撑满容器.然后你就可以设置左右外边距为 auto 来使其水平居中.元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距. div{ width ...

  4. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  5. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  6. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  7. (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  8. CSS布局 ——从display,position, float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  9. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

随机推荐

  1. iOS 开发之使用safari对webview进行调试

    转自:http://www.tuicool.com/articles/ZBFnUbz 使用safari对webview进行调试 时间 2016-02-25 14:35:20  陈斌彬的技术博客 原文  ...

  2. 事务管理(下) 配置spring事务管理的几种方式(声明式事务)

    配置spring事务管理的几种方式(声明式事务) 概要: Spring对编程式事务的支持与EJB有很大的区别.不像EJB和Java事务API(Java Transaction API, JTA)耦合在 ...

  3. tcp 之失败重传机制

    1.回退N步协议: 滑动窗口模式,每次传送一批的数据,接收到一个就再放进去一个,如果前面一个没有收到回复,后面的就算收到了后面的数据也丢掉 2选择性重传 区别是收到后,缓存.

  4. join / left join / right join

    1 可以自己join自己 SELECT * FROM table_1 t1join table_1 ton t.target_id = t1.target_id 2 join要双方都满足才可以出现结果 ...

  5. cfDNA(circulating cell free DNA)全基因组测序

    参考资料: [cfDNA专题]cell-free DNA在非肿瘤疾病中的临床价值(好) ctDNA, cfDNA和CTCs有什么区别吗? cfDNA你懂多少? 新发现 | 基因是否表达,做个cfDNA ...

  6. CCNA网络基础(一)

    现在我们使用这一个图来讲解网络的基础知识:     现在只看右边那个图,也就是两台主机和一个交换机       PC1 的配置是      IP 172.16.20.2/24   网关没有配     ...

  7. Pyinstaller打包Selenium脚本为exe文件执行问题

    由于同事辞职,许多运维工具的维护工作就交到我这里处理了,运维居然没人会Python脚本! 用Selenium编写的一个爬虫脚本cctv.py,需要给不懂软件的人运行.为了不让他去搭建,安装各种包,库, ...

  8. angular中动态添加的元素绑定事件问题

    $compile http://segmentfault.com/q/1010000000726448/a-1020000000727088 接口下载问题

  9. leetcode刷题全纪录(持续更新)

    2.Add Two Numbers 原题链接https://leetcode.com/problems/add-two-numbers/ AC解: public ListNode addTwoNumb ...

  10. [转]Python os.path模块

    os.path模块 原文链接:http://my.oschina.net/cuffica/blog/33494 basename('文件路径')    去掉目录路径,返回fname文件名 import ...