CSS布局学习笔记之position
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的更多相关文章
- css布局学习笔记之position属性
position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...
- css布局学习笔记之box-sizing
当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素. .div{ width: 500px; margin: 20px auto; padding: 50px; ...
- css布局学习笔记之max-width
设置块级元素的 width 可以阻止它从左到右撑满容器.然后你就可以设置左右外边距为 auto 来使其水平居中.元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距. div{ width ...
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
随机推荐
- antd 学习
1,react中文文档http://reactjs.cn/react/docs/thinking-in-react-zh-CN.html 2,antd文档 https://ant.design/doc ...
- 非标准JSON解析
http://blog.csdn.net/superit401/article/details/51734591 String category = "{'v-soft-list':[{ty ...
- native vlan(本征VLAN)
其实就是不打tag的VLAN,因为你想,一个VLAN在经过交换设备老是打tag,然后再脱掉tag...这个很浪费计算资源,尤其是在转发的报文量相当大的时候. 如何解决: 可以定义一种vlan, ...
- npm install报错Error: ENOENT
E:\projects\ueditor\ueditor1_4_3_3-src>npm installError: ENOENT, stat 'C:\Users\Lucas\AppData\Roa ...
- JAVA开发错误总结(仅记录遇到的错误---后续不断更新......)
=======华丽分割线(工具总结)===================== 1:Maven项目中junit测试找不到主类的问题 Class not found com.test.utils.tes ...
- H5 学习笔记(一、关于position定位)
主要是relative与absolute的用法: 1.relative 依据left right top bottom 等属性在正常文档流中脱离位置,即相对于他的正常文档流位置进行移动.两个都为rel ...
- Java Integer(-128~127)值的==和equals比较产生的思考
最近在项目中遇到一个问题,两个值相同的Integer型值进行==比较时,发现Integer其中的一些奥秘,顺便也复习一下==和equals的区别,先通过Damo代码解释如下: System.out.p ...
- js 根据不同情况引入不同操作
1.根据分辨率不同引入不同的JS // 根据不同的分辨率引入不同的JS代码 <script> if (screen.width == 1440 && screen.heig ...
- How (not) to trigger a layout in WebKit
As most web developers are aware, a significant amount of a script's running time may be spent perfo ...
- css利用padding生成图标
先插入HTML结构: <div class="line-three"></div> <div class="circle"> ...