解析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定位的元素
当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...
随机推荐
- 【转】C#添加修改删除文件文件夹大全
[转]C#添加修改删除文件文件夹大全 C#添加修改删除文件文件夹大全 StreamWriter sw = File.AppendText(Server.MapPath(".")+& ...
- 通过force index了解的MySQL查询的性能优化
查询是数据库技术中最常用的操作.查询操作的过程比较简单,首先从客户端发出查询的SQL语句,数据库服务端在接收到由客户端发来的SQL语句后, 执行这条SQL语句,然后将查询到的结果返回给客户端.虽然过程 ...
- 《Spring技术内幕》笔记-Spring的设计理念和总体架构
1.Spring的主要子项目: -1.Spring Framework(Core):Spring项目的核心.提供IoC,AOP,MVC等核心功能. -2.Spring Web Flow ...
- C++ 学习笔记(一些新特性总结3)
C++ 学习笔记(一些新特性总结3) public.protected 和 private 继承 public 继承时,基类的存取限制是不变的. class MyClass { public: // ...
- UVA 11825 - Hackers' Crackdown 状态压缩 dp 枚举子集
UVA 11825 - Hackers' Crackdown 状态压缩 dp 枚举子集 ACM 题目地址:option=com_onlinejudge&Itemid=8&page=sh ...
- What's the difference between returning void and returning a Task?
http://stackoverflow.com/questions/8043296/whats-the-difference-between-returning-void-and-returning ...
- ajax无刷新翻页后,jquery失效问题的解决
例如 $(".entry-title a").click(function () { 只对第一页有效, 修改为 $(document).on('click', ".e ...
- [POI2002][HAOI2007]反素数 数论 搜索 好题
题目描述: 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1,2,4, ...
- vue 学习笔记1 入门
可以在 JSFiddle上在线学习vue 注意:所演示的示例,都是在JS中将Vue实例绑定至HTML中的指定元素,然后再通过Vue实例中data内的属性或者methods中的方法,来对所绑定元素的子元 ...
- [笔记-统计学习方法]感知机模型(perceptron) 原理与实现
前几天认把感知机这一章读完了,顺带做了点笔记 现在把笔记做第三次的整理 (不得不说博客园的LaTex公式和markdown排版真的不太舒服,该考虑在服务器上建一个博客了) 零.总结 适用于具有线性可分 ...