解析position定位
关于position定位(所有主流浏览器都支持 position 属性),大家会联想到relative和absolute,下面我就讲一下relative和absolute分别是相对于谁进行定位的?
在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成,有四个可选值,它们分别是:static、absolute、fixed、relative,这里向大家描述一下它的使用。
absolute:生成绝对定位的元素,相对于最近一级的定位不是static的父元素来进行定位。
使用position:absolute,能够很准确的将元素移动到你想要的位置,让我将nav移动到页面的右上角。我们可以这样写:
nav{position:absolute;top:0;right:0;width:200px;}
fixed:也是生成绝对定位的元素,通常相对于浏览器窗口或frame进行定位。需要注意的是IE6并不支持此属性。
relative:生成相对定位的元素,相对于其在普通流中的位置进行定位。
我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。
static:默认值。没有定位,元素出现在正常的流中。
CSS中的定位:
relative:相对定位,位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,元素仍然处于正常文档流当中,可以通过left、top、right和bottom的CSS规则来改变元素所处的位置。
absolute:绝对定位,位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标,元素脱离正常文档流,可以通过left、top、right和bottom的CSS规则来改变元素所处的位置。
fixed:固定定位,位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。
position:fixed 相对于窗口的固定定位
所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。
fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。
static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
!注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
这就是我对position的理解,希望能帮到学习的你。
解析position定位的更多相关文章
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- position定位
CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...
- position定位的小问题
css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...
- (转)Position定位:relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
- 盒子模型&position定位
有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...
- CSS定位:几种类型的position定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
随机推荐
- 2015 Multi-University Training Contest 4 hdu 5335 Walk Out
Walk Out Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Su ...
- POJ——T2553 The Bottom of a Graph
http://poj.org/problem?id=2553 Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 10987 ...
- mysql-联结
一.联结 联结是利用SQL的select能执行的最重要的操作. 1.关系表:假如有一个包含产品目录的数据库表,其中每个类别的物品占一行.对于每种物品要求存储的信息包括产品描述和价格,以及生产该产品的供 ...
- Android之Http通信——1.初识Http协议
Android之Http通信--1.初识Http协议 引言: 今天是六一儿童节,先在这里给各位超龄儿童说声节日快乐哈~( ╯□╰ ),小猪也象征性地给群里的小朋友们派了红包-嗯,忙碌的五月最终过去了, ...
- NOIP2017 小凯的疑惑 解题报告(赛瓦维斯特定理)
题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付的.现在小 凯想知道在无法准确支付的物品中,最贵的 ...
- JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...
- docker 命令合集
目录 image镜像操作 container 容器操作 访问仓库 Repository 数据管理 使用网络 容器互联: image镜像操作 列出已经下载下来的镜像: docker image ls 查 ...
- 浅谈微信smali注入
作者:郭少雷 搞android搞了几年也没搞出个啥牛逼app出来,眼看时下最火的app微信如此火热,实在想搞搞它,索性就想着给它加点东西进去. 以下内容纯属本人个人爱好,仅限个人学习android用途 ...
- 微信小程序 获取数组长度
wxml中直接 {{array.length}} js中 array.length 小程序调用API返回的数据全部都是异步的:所以前提是要确保array中的数据,是存在的
- [笔记-图论]Floyd
用于可带负权的多源最短路 时间复杂度O(n^3) 注意一定不要给Floyd一个带负环的图,不然就没有什么意义了(最短路不存在) 模板 // Floyd // to get minumum distan ...