css之position

 1、关于css中的position属性

  position 属性设置或返回用于元素定位方法的类型static(静态的)、relative(相对的)、absolute(绝对的)或 fixed(固定的)以及inherit(继承的)

 2、各属性的说明

  2.1、static:position属性的默认值。位置设置为 static 的元素,它始终会处于页面流给予的位置进行定位,

  2.2、asolute:position 为 absolute 的元素,定位的元素为position不为static的最近父元素,否则为body本身此元素的位置通过 属性来规定

  2.3、fixed:position 为 fixed 的元素,相对于浏览器窗口的指定坐标进行定位。不论窗口滚动与否,元素都会留在那个位置。(IE8及以下不支持,需要特殊处理)

  2.4、relative:position 为 relative 的元素,可将其定位于相对于其正常位置的地方

  2.5、inherit:position 属性的值从父元素继承。(IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit")

 3、辅助属性说明

  3.1、对于position来说,以上五个值决定其定位的方式,但是确定定位方式之后,需要用到 "left"、"top"、"right" 以及 "bottom"这几个辅助属性值进行精确的定位

  3.2、static 元素会忽略任何 top、bottom、left 或 right 声明,所以一般的元素没有显示设置position属性时,其特性是默认的值为static,设置top、bottom、left 或 right是无效的。

  3.3、对于同时设置了top和bottom或者同时设置了left和right的元素,会忽略bottom和right

  3.4、relative是基于其本身元素的margin的左上侧进行定位的,而absolute是基于可以定位的parent的padding左上侧定位的

 4、position影响文档流

  4.1、position 设置了absolute和relative的值都会脱离文档流,而设置了absolute的元素脱离文档流之后,其他元素会填补其位置,设置了relative值得元素,虽然脱离文档流,但其仍占据原来的位置,其他元素是不会进行填充空位的

 5、关于设置position影响滚动条

  5.1、当元素的position设置了absolute 和 relative值时,窗口缩小到不可见这个元素时,会产生滚动条,而设置了fixed的不会产生滚动条

时间: 06-27

css之position的相关文章

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

css中position:fixed实现div居中

上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px;} 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 下面附一个DIV 元素在浏览器窗口居中 其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞

CSS的position属性

position属性的定义和用法:检索或设置对象的定位方式.设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局.假如其他具有不同z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有margin,但仍有padding和边框border.要激活对象的绝对定位,不但要设置此属性值为absolute,而且必须指定left,right,top,bottom属性中的至少一个.否则上述属性会使用他们的默认值auto ,这将导致对

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t

转载,最容易理解的CSS的position教程——十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

CSS定位——position、float小结

在CSS使用position属性来指定元素的定位类型,该属性有四种不同类型的定位,分别为static(默认定位).relative(相对定位).absolute(绝对定位)和fixed(固定定位). 要理解以上四种定位,写看一下CSS的文档流(普通流)概念: 除非专门指定,否则所有框(也就是html元素)都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来.若某元素的position属

浅谈 css 之 position用法

在 css中, position 属性有四个值可用: static(默认值).absolute.relative.fixed. relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留自身原始的位置) absolite: 1.相对于自身的包含块定位: 2.寻找包含块的规则:从自身网上寻找祖先元素,寻找到的第一个position为非static修饰的祖先元 素的内边距边界 就是当前绝对定位元素的包含块:如果没有的话,则相对于 html进行定位: 3.完全脱离文档流: 4.displ

CSS的position设置

CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getS

css中position属性(absolute/relative/static/fixed)

css中position属性(absolute/relative/static/fixed): position:static   无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. position:relative 对象遵循正常文档流,相对的是它原本在文档流中的位置而进行的偏移,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. position:abso