定位 position

position:relative;相对定位

a 不影响元素本身的特性

b 不使元素脱离文档流(元素移动之后原始位置会被保留)

c 如果没有定位偏移量,对元素本身没有任何影响

d 提升层级

定位元素位置控制:top|right|left|bottom 定位元素偏移量

position:absolute;绝对定位

a 使元素完全脱离文档流

b 是内嵌支持宽高

c 如果有定位父级 相对于 定位父级发生偏移,没有定位父级相对于document(可视区域)发生偏移

d 相对定位一般都是配合绝对定位元素使用

f 提升层级

z-index: [number];定位层级

a 定位元素默认后者层级高于前者

b 建议在兄弟标签之间比较层级

position:fiexd;固定定位

与绝对定位的特性基本一致,差别是始终相对整个文档进行定位

问题:IE6不支持固定定位

定位其他值

position:static;默认值

position:inherit;从父元素继承定位属性的值(不兼容)

定位清浮动方法,遮罩滤镜

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法

position:fiexd;固定定位元素子级的浮动可以不用写清浮动方法(IE6不兼容)

遮罩弹窗

标准不透明度:opacity:0-1

IE滤镜(IE6,7) :filter:alpha(opacity=0-100);

时间: 2024-10-14 19:05:40

定位 position的相关文章

定位--position属性

一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) 3.absolute:绝对定位 4.fixed:固定定位 二.相对定位元素的规律 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响 三.绝对定位-- absolute属性 1.偏移位置:left right

CSS.04 -- 浮动float、overflow、定位position、CSS初始化

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

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认识

1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolute(表示绝对定位),作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口. 如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动

网页元素定位Position

 第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位  (一般不用) static没有定位,以标准流方式显示 relative设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置.设置相对定位的盒子仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 设置了position属性值为relative的网页元素,无论是在标准流中还是在浮动流中,都不会对它的父级元素和相

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

10步掌握CSS布局定位: position static relative absolute float

无意中看到此文,因作者强调其中避开了浏览器bug/分歧,所以个人认为值得借鉴. 不才仔细看了此文,自觉受益匪浅 ,屡试不爽,佩服作者对css布局的精炼总结,顺便小译了一段, 英文水平有限,且个人通常写写php,对css了解不深却有点兴趣,错误之处还请指正. 个人没有空间,代码中的css文件和js保留了完整路径:http://www.barelyfitz.com/screencast/html-training/css/positioning/ 原文地址:http://www.barelyfitz

《css定位 position》课程笔记

这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三种布局:标准流,浮动,定位 两大元素:块级元素(div,h1-6,table,ol,ul,li,p),内联元素(a,span,img,input) position可选参数 static(标准流中正常排列) relative(相对定位) absolute(绝对定位) fixed(脱离正常的文档流,登

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以

CSS布局定位:position

position:属性规定元素的定位类型. 取值:static | absolute | fixed | relative static : 默认值.无特殊定位 .对象遵循HTML定位规则. absolute(绝对定位)  : 将对象从文档流中拖出(可层叠).用left, right, top, bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依照body对象绝对定位. fixed(固定定位,一种特殊的绝对定位) :相对于浏览器窗口.可以根据le