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. MarkDown常用语法记录

    目录 1. 斜体和粗体 2. 分级标题 3. 超链接 3.1 行内式(推荐) 3.2 行外式 3.3 自动链接 4. 锚点 5. 列表 5.1无序列表 5.2有序列表 6. 引用 7. 插入图像 8. ...

  2. IOC理解

    控制反转(反转控制):谁控制了谁? 就是交换控制权1.A a =new A();   要使用这个A 必须你去new他.控制权在a2.由第三方来进行创造这个A,你用的时候直接用就是.控制权在第三方. 3 ...

  3. 【转】Centos升级Python 2.7.12并安装pip、ipython

    Centos系统一般默认就安装有Python2.6.6版本,不少软件需要2.7以上的,通过包管理工具安装不了最新的版本,通过源码编译可以方便安装指定版本,只需要把下面版本的数字换成你想要的版本号. 1 ...

  4. 微信内嵌浏览器sessionid丢失问题,nginx ip_hash将所有请求转发到一台机器

    现象微信中打开网页,图形验证码填写后,经常提示错误,即使填写正确也会提示错误,并且是间歇性出现. 系统前期,用户使用主要集中在pc浏览器中,一直没有出现这样的问题.近期有部分用户是在微信中访问的,才出 ...

  5. 学习PYTHON之路, DAY 3 - PYTHON 基础 3 (函数)

    一 set 集合 (无序且不重复的元素集合) 基本操作: t.add('x') # 添加一项 s.update([10,37,42]) # 在s中添加多项 删除一项: t.discard('H') t ...

  6. Java Js实现导出csv

    $.ajax({ type: 'GET', async: false, url: '../../api/screening/exportTable?seriesIndex=' + param.seri ...

  7. [IOS 开发] 懒加载 (延迟加载) 的基本方式,好处,代码示例

    懒加载的好处: 1> 不必将创建对象的代码全部写在viewDidLoad方法中,代码的可读性更强 2> 每个属性的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强,松耦合 ...

  8. 十天学会DIV+CSS(DIV布局)

    一列布局: 一列固定宽度.一列固定宽度居中.一列自适应宽度.一列自适应宽度居中 一列固定宽度 <head> <style type="text/css"> ...

  9. Bootstrap 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  10. CoreOS Linux引入了Kubernetes kubelet

    CoreOS Linux引入了Kubernetes kubelet 作者:Kelsey Hightower 2015年8月14日 这周我们在 CoreOS Linux 的 alpha 开发版集成了 k ...