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: 内容将在边界内换行.如果需要,词 ...
随机推荐
- MarkDown常用语法记录
目录 1. 斜体和粗体 2. 分级标题 3. 超链接 3.1 行内式(推荐) 3.2 行外式 3.3 自动链接 4. 锚点 5. 列表 5.1无序列表 5.2有序列表 6. 引用 7. 插入图像 8. ...
- IOC理解
控制反转(反转控制):谁控制了谁? 就是交换控制权1.A a =new A(); 要使用这个A 必须你去new他.控制权在a2.由第三方来进行创造这个A,你用的时候直接用就是.控制权在第三方. 3 ...
- 【转】Centos升级Python 2.7.12并安装pip、ipython
Centos系统一般默认就安装有Python2.6.6版本,不少软件需要2.7以上的,通过包管理工具安装不了最新的版本,通过源码编译可以方便安装指定版本,只需要把下面版本的数字换成你想要的版本号. 1 ...
- 微信内嵌浏览器sessionid丢失问题,nginx ip_hash将所有请求转发到一台机器
现象微信中打开网页,图形验证码填写后,经常提示错误,即使填写正确也会提示错误,并且是间歇性出现. 系统前期,用户使用主要集中在pc浏览器中,一直没有出现这样的问题.近期有部分用户是在微信中访问的,才出 ...
- 学习PYTHON之路, DAY 3 - PYTHON 基础 3 (函数)
一 set 集合 (无序且不重复的元素集合) 基本操作: t.add('x') # 添加一项 s.update([10,37,42]) # 在s中添加多项 删除一项: t.discard('H') t ...
- Java Js实现导出csv
$.ajax({ type: 'GET', async: false, url: '../../api/screening/exportTable?seriesIndex=' + param.seri ...
- [IOS 开发] 懒加载 (延迟加载) 的基本方式,好处,代码示例
懒加载的好处: 1> 不必将创建对象的代码全部写在viewDidLoad方法中,代码的可读性更强 2> 每个属性的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强,松耦合 ...
- 十天学会DIV+CSS(DIV布局)
一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...
- Bootstrap 表单
表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...
- CoreOS Linux引入了Kubernetes kubelet
CoreOS Linux引入了Kubernetes kubelet 作者:Kelsey Hightower 2015年8月14日 这周我们在 CoreOS Linux 的 alpha 开发版集成了 k ...