position 有五个值:static、relative、absolute、fixed、inherit。
position 有五个值:static、relative、absolute、fixed、inherit。
static
是默认值。就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 position,也就表示使用 static。
relative
没有脱离布局流,此时可以使用 top、right、bottom、left 属性。
- top 和 bottom 共存时,使用 top 值,忽略 bottom 值;
- left 和 right 共存时,使用 left 值,忽略 right 值;
relative 是相对位置,指相对于元素的 position 为 static 时的位置:
- top 相对于 static 下移多少像素(若 top 是负值,则上移)。
- right 相对于 static 左移多少像素(若 right 是负值,则右移)。
- bottom 相对于 static 上移多少像素(若 bottom 是负值,则下移)。
- left 相对于 static 右移多少像素(若 left 是负值,则左移)。
使用 relative 之后:
- 原来的空间不会被其他元素挤占。
- 元素在最终位置时也不会挤占其他元素的空间,它浮动到其它元素的上方。
absolute
脱离布局流,此时可以使用 top、right、bottom、left,但这些属性不再是相对于 static 时的位置,而是相对于containing block 的,相对于其边框内边缘的,而不是其 padding 内边缘。
使用 absolute 之后:
- 原来的空间会被其他元素挤占。
- 元素在最终位置时也不会挤占其他元素的空间,它浮动到其它元素的上方。
fixed
它的模式与 absolute 相同,不过无论怎么拖动滚动条,它始终固定在屏幕的指定位置。在 IE6 中不支持这个属性;在 IE7 中支持这个属性但需要指明 DOCTYPE;Firefox 等浏览器支持这个属性。
top、right、bottom、left 属性指相对于视口的。
inherit
继续父元素的 position 值。
position 有五个值:static、relative、absolute、fixed、inherit。的更多相关文章
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- What is the difference between position: static,relative,absolute,fixed
What is the difference between static,relative, absolute,fixed we can refer to this link: expand
- css的定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS之定位,relative/absolute/fixed的用法
其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- 【前段开发】10步掌握CSS定位: position static relative absolute float
希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...
- CSS:static/relative/absolute
static - default and this is the FLOW. ------------------------------------------------------------- ...
- 对于position:relative,absolute,fixed的见解:
1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相 ...
- CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...
随机推荐
- 基于SIFT特征的全景图像拼接
基于SIFT特征的全景图像拼接 分类: image Machine learning2013-07-05 13:33 2554人阅读 评论(3) 收藏 举报 基于SIFT特征的全景图像拼接 分类: 计 ...
- MongoDB(1)--简单介绍以及安装
前段时间接触了NoSql类型的数据库redis,当时是作为缓存server使用的.那么从这篇博客開始学习还有一个非常出名的NoSql数据库:MongoDb.只是眼下还没有在开发其中使用.一步一步来吧. ...
- 8.翻译系列: EF 6中配置领域类(EF 6 Code-First 系列)
原文地址:http://www.entityframeworktutorial.net/code-first/configure-classes-in-code-first.aspx EF 6 Cod ...
- 目标检测比赛---Google AI Open Images - Object Detection Track
https://www.kaggle.com/c/google-ai-open-images-object-detection-track#Evaluation Submissions are eva ...
- 运行第一个Docker容器-Docker for Web Developers(1)
1. Docker介绍 Docker由dotCloud公司发起的一个内部项目,后来Docker火了,dotCloud公司改名为Docker了: Docker使用了Go语言开发,基于 Linux 内核的 ...
- 物联网架构成长之路(8)-EMQ-Hook了解、连接Kafka发送消息
1. 前言 按照我自己设计的物联网框架,对于MQTT集群中的所有消息,是要持久化到磁盘的,这里采用一个消息队列中间件Kafka作为数据缓冲,缓冲结果存到数据仓库中,以供后续作为数据分析.由于MQTT集 ...
- Summary Checklist for Run-Time Kubernetes Security
Here is a convenient checklist summary of the security protections to review for securing Kubernetes ...
- Asp.Net MVC EF查询部分字段
例如新闻表中有几十个字段,而我们只需要显示标题和时间2个字段 如果是再Controller中查询使用的话比较简单 public string ceshi() { dbEntities db = new ...
- d3实现的力向导图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 灯箱效果插件Magnific Popup详解
Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件.它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用. 官网地址: http://dimsemenov.co ...