解析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定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
随机推荐
- leetcode笔记:Merge Sorted Array
一.题目描写叙述 二.解题技巧 这道题不存在复杂的分析过程和边界条件.假设单纯得考虑从小到大地将两个数组进行合并的话.每次在num1中插入一个数的话,须要将后面的元素都向后移动一位.这样.整个处理过程 ...
- 由动态库文件dll生成lib库文件
本文基于OpenBlas的编译和安装.来说明怎样从一个dll文件生成lib库文件. 參考OpenBlas的说明"Howto generate import library for MingW ...
- 数位DP CF388D - Fox and Perfect Sets
题目地址 一个整数perfect集合满足性质:集合中随意两个整数的异或和仍在这个集合中. 求最大数不超过K的perfect集合的个数. 每一个集合都是一个线性的向量空间. .能够通过全然的高斯消元得出 ...
- Android Stuido 好卡怎么办?不要急,兄弟来教你
近期使用Android studio 开发app,编译的时候特别卡,常常卡死.我的机器 i3 + 8G,按道理来说流畅的跑个androidstudio还是绰绰有余的... 于是在各大论坛寻找解决方式, ...
- emmet教程
https://www.zfanw.com/blog/zencoding-vim-tutorial-chinese.html https://www.zfanw.com/blog/zencoding- ...
- 如何知道 CPU 是否支持虚拟化技术(VT)
作者: Sk 译者: LCTT geekpi 我们已经知道如何检查你的 Linux 操作系统是 32 位还是 64 位以及如何知道你的 Linux 系统是物理机还是虚拟机.今天,我们将学习另一个有用的 ...
- NodeJS学习笔记 (13)数据加密-crypto(OK)
写在前面 本章节写得差不多了,不过还需要再整理一下(TODO). hash例子 hash.digest([encoding]):计算摘要.encoding可以是hex.latin1或者base64.如 ...
- es6 学习1 let表示变量 、const表示常量 与 var 变量的区别
一.let 1.看下代码,在函数中无论在哪里声明变量,都会自动提到函数顶部,这就是函数变量提升,它的作用于为当前函数中. function aa() { if(bool) { var test = ' ...
- NOIP2017普及组题
提高组死亡选手来AK普及(耗时两天). T1 #include<bits/stdc++.h> using namespace std; int A,B,C; int main() { ci ...
- wall---向系统当前所有打开的终端上输出信息
wall命令用于向系统当前所有打开的终端上输出信息.通过wall命令可将信息发送给每位同意接收公众信息的终端机用户,若不给予其信息内容,则wall命令会从标准输入设备读取数据,然后再把所得到的数据传送 ...