css布局学习笔记之position属性
position属性用于定位元素,它的几个值分别如下:
1,static
static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”。
2,relative
relative 相对于自己在文档流中本来的位置进行定位,设置top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。不脱离文档流,其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
3,fixed
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, top 、 right 、 bottom 和 left 属性都可用。脱离文档流,不会保留它原本在页面应有的空隙。
4,absolute
absolute 与 fixed 的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。
多个同级absolute元素会重叠在一起,重叠是按代码本身顺序排列,越后输入的其越靠前(浮在上面)。除非元素设置了z-index属性,z-index属性值越大越靠前。
这些都是理论知识,加上一点小练习就能够理解,但是具体的用处,还有待多看多练。做个小小的笔记,记录自己的学习。
css布局学习笔记之position属性的更多相关文章
- CSS布局学习笔记之position
CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- 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 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
随机推荐
- js拖拽进度条
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx. ...
- gridview动态生成列
// 有连接的列 if (!String.IsNullOrWhiteSpace(filedModel.C_SqlDetail)) { HyperLinkField hyperColumn = new ...
- C++基本要点复习--------coursera程序设计实习(PKU)的lecture notes
因为一些特性复杂,很多时候也用不到一些特性,所以忘记了,算是随笔,也当作一个临时查找的手册.没有什么顺序,很杂. 1.构造函数通过函数重载的机制可以有多个(不同的构造函数,参数个数,或者参数类型不同. ...
- Qt编程之d指针与q指针
我们在Qt中可以看到两个宏Q_D和Q_Q这两个红分别是取得d指针和q指针的,d指针指向封装的私有类,q指针指向公共的类.(我的理解类似于回调,回指的意思). 为什么Qt要这样实现呢?下面几个链接中的文 ...
- MySQL强制性操作
1.强制索引FORCE INDEX SELECT * FROM TABLE1 FORCE INDEX (FIELD1) … 只使用建立在FIELD1上的索引,而不使用其它字段上的索引. 2.忽略索引 ...
- find详解
一.简介 在目录结构中搜索文件,并执行指定的操作. 二.语法 find path -option [ -print ] [ -exec -ok command ] {} \;path: find命令所 ...
- Java学习系列(一)Java的运行机制、JDK的安装配置及常用命令详解
俗话说:“十五的月亮十六圆”.那学习是不是也是如此呢?如果把月亮看成是我们的愿望,那十五便是我们所处的“高原期”,坚持迈过这个坎,我相信你的愿望终究会现实的.记得马云曾说:今天很残酷,明天更残酷,后天 ...
- MySQL数据备份之mysqldump
mysqldump常用于MySQL数据库逻辑备份 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dum ...
- Axure设计分析作业-实例解析
本文转载自人人都谁产品经理,作者完全使用Axure做了这一个产品需求文档.文档地址:http://1passwordmanager.sinaapp.com/ 大家可以先睹为快.这个PRD完全使用axu ...
- Thinkphp 3.0版本上传文件加图片缩略图实例解析
先看html加个表单,注意这里的action 路径要选 对. <div> <form action="__URL__/add_img" enctype=" ...