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: 内容将在边界内换行.如果需要,词 ...
随机推荐
- VS学习
7.9 今天打开老师给的俄罗斯方块的程序,硬是跑不出来.已经遇到了这几个问题 [1]在项目属性里面C++目录中修改头文件和库函数的绝对路径(基础知识刚学会) [2]errorC1083 SDKDDKe ...
- MongoDB简介与增删改查
一.简介 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB 将数据存储为一个文档,数据 ...
- 初学js/jquery 心得
1.多个对象操作的时候可以放在一起,eg: $('.send_message, .friends_increment').blur(function() {}); 2.三元表达式与if else,eg ...
- JQuery_DOM 节点操作之创建节点、插入节点
一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...
- cookie记录用户名
在说如何用cookie记录用户名之前,我们先来说说cookie的工作原理: cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 ; 1. ...
- HBase 数据读写流程
HBase 数据读写流程 2016-10-18 杜亦舒 读数据 HBase的表是按行拆分为一个个 region 块儿,这些块儿被放置在各个 regionserver 中 假设现在想在用户表中获取 ro ...
- linux建立一个快捷方式,连接到另一个目录
sudo ln -s 源目录 目标快捷方式比如你要在/etc下面建立一个叫LXBC553的快捷方式,指向/home/LXBC,那就是sudo ln -s /home/LXBC /etc/LXBC553
- could not read symbols: File format not recognized
arm-linux-gnueabi-readelf工具解决问题 编译一个32位平台的内核时,出现如下错误提示: libschw.a: could not read symbols: File form ...
- 卸载mysql
如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载不彻底而出现错误.最常见的就是安装好后设置参数的最后一步验证时,会在Execute configurattion步骤中 ...
- jmeter for循环嵌套if学习1
测试计划组成: vcondition的值都是tom. 执行结果: