解析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定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
随机推荐
- TCP/IP、UDP、 Http、Socket的差别
网络由上往下分为: 表示层和应用层 :HTTP协议(基于传输层的TCP协议,主要解决怎样包装数据) 会话层 传输层: TCP协议(基于网络层的IP协议).TPC/IP协议(主要解决数据怎样在网络中传输 ...
- Linux下安装过程中编译PHP时报错:configure: error: libjpeg.(a|so) not found
在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决的方法: 检查之后发现已经安装libjpeg.可是/usr/l ...
- UVA 1415 - Gauss Prime(数论,高斯素数拓展)
UVA 1415 - Gauss Prime 题目链接 题意:给定a + bi,推断是否是高斯素数,i = sqrt(-2). 思路:普通的高斯素数i = sqrt(-1),推断方法为: 1.假设a或 ...
- 使用isolation forest进行dns网络流量异常检测
代码如下,测试发现,是否对输入数据进行归一化/标准化对于结果没有影响: import numpy as np from sklearn.ensemble import IsolationForest ...
- Conditionals
1. Modulus operator (%) The modulus operator works on integers and yields the remainder when the fir ...
- ARM嵌入式复习
第一章 1.嵌入式系统 “以应用为中心,以计算机技术为基础,软硬件可裁剪,适用于应用系统对功能,可靠性,成本,体积,功耗要求严格的专用计算机系统” 根据应用的要求,沿着“体积小,低功耗,高可靠”方向发 ...
- 服务器TCP连接中 TIME_WAIT 状态过多
今天查看服务器的TCP连接数,发现其中 TIME_WAIT 状态的太多了: # netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a ...
- caffe for python (官方翻译)
导言 本教程中,我们将会利用Caffe官方提供的深度模型——CaffeNet(该模型是基于Krizhevsky等人的模型的)来演示图像识别与分类.我们将分别用CPU和GPU来进行演示,并对比其性能.然 ...
- [NOIP2012提高组]国王游戏
题目:洛谷P1080.Vijos P1779.codevs1198. 题目大意:国王和每个大臣左.右手各写了一个数.规定每个大臣得到的金币数为他前面所有人左手的数字的乘积除以他自己右手的数(向下取整) ...
- 监控memcached服务
#!/bin/bash #监控memcached服务 printf "del key\r\n" | nc 127.0.0.1 11211 &>/dev/null #使 ...