position属性学习与分析

Positon 属性:是用来对元素进行定位的。定位就是允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

Position的属性值有:

(1)static:它是position的默认值。默认块级元素和行内元素按照各自的特性进行显示;

(2)relative:设置这个属性,相对于元素本身在文档中应该出现的位置来移动这个元素,具体根据top,left,bottom,right,进行偏移,关键点,是它原本的空间仍然保留。举个例子说明,如图:

设置 相对定位后,css代码如

Htnl 代码如

效果图如

上面的div1虽然向上,向左偏移了,但是它所占的位置还在,下面的div2仍然距离父元素150px;这就是它的特点。

Relative属性自己经常用在作为ablsoute元素的包含块了,对设置了ablsoute这个元素进行限制位置偏移。

(3)abosulte:元素设置绝对定位后会脱离文档流,然后相对其包含块进行偏移,不占有原本的空间,后面的元素会顶上去,而且行内元素或者块级,都会生成一个块级框。举个例子:如下图

Css代码:

Html代码:

效果图:

相对与父元素进行了绝对定位,向上,向左,设置的绝对定位后,脱离文档流,后面的元素顶上来,看下面的实现代码与图;

Css代码

Html代码

效果图

下面的div2元素顶上去,占据了原来div1没有设置absolute 的位置,也就说明了,设置absolute元素会脱离文档流,但是和前面说的float元素脱离文档流,还不一样,float说的是盒子会无视这个元素,但文本内容会环绕,会为这个元素让出位置;而absolute脱离文档流,其他盒子与盒子内的文本都会无视它,占据它原有的位置,这样设置的文本就被视觉挡住,看不见了。因此,在使用绝对定位时候,经常使用css z-index来控制页面的层重叠顺序

(4)fixed:生成绝对定位元素,类似与绝对定位,它是相对浏览器窗口进行偏移的。一般用在导航栏固定在顶部,或者顶部,来使用。举个例子说明:

Css代码如图

Html代码如图

效果图如

(6.3)当滚动条向下滚动时,红色部分依然固定在顶部,这就是fixed的应用。

这些就是关于position的简单应用,以及基本原理,更深入的请查看http://www.zhangxinxu.com/wordpress/2011/03/css-相对绝对relativeabsolute定位系列,讲的非常深刻,由于个人只是欠缺,暂时还没没看懂。

时间: 2024-09-29 23:01:01

position属性学习与分析的相关文章

CSS学习笔记——定位position属性的学习

今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什么特点? 第一个问题:position作为一个属性,它一共有哪几个属性值? 对于position属性,他一共有5个值,分别是 static:默认值.没有定位,元素出现在正常的流中. relative:生成相对定位的元素,相对于其正常位置进行定位.正常位置也就是指如果没有position属性它会出现的

jqueryui.position.js源码分析

最近要写前端组件了,狂砍各种组件源码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源码总体结构图 1.看到$.fn.position 是不是很熟悉?嗯,就是将position方法挂载到原型上,然后控件就可以直接调用了, 2.$.ui.position 这个对象是,用来进行冲突判断的,什么冲突?就是元素与父容器所拥有的空间以及当前可用窗口的控件,默认情形下,如果冲突则采用反转方向的方式显示:对这一点不要惊讶,一切都是为了正常显示而用的

css中关于position属性的探究(原创)

关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定元素按照常规的文档内容刘(从左到右,从上到下)进行定位. absolute:独立定位,它的定位要么是相对于最近的定位祖先元素,要么是相对于文档本身. fixed:该值指定元素是相对于浏览器窗口进行定位的.不会随着文档其他部分而滚动. relative:元素按照常规文档流进行布局,它的定位相对于文档流中的

详解CSS position属性

position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移.postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用. 基础知识 postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性. position四种类型 (1)staticstatic是position属性的默认值,默认情况下,块级元

CSS浮动(float)属性学习经验分享

作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的“门道”. 下面就通过一些例子来归纳总结一下我所学到的浮动特性: (一)浮动元素对其兄弟元素是标准流元素的影响: 现在假定HTML文档中从上到下有3个块元素A.B.C 1.现设定A.C为标准流中的元素,B设为float:left (注:为了更直观地显示,设B的透明度为0.5,B是在C上方的) 由此可见:将B设为浮动元素后,B脱离了标准文档流,浮于其上方,因此他

WPF MediaElement.Position属性

Position 属性定义:获取或设置媒体播放时间的当前进度位置. // // 摘要: // 通过媒体播放时获取或设置进度的当前位置. // // 返回结果: // 媒体时自以来的.默认值为 00:00: 00. // // 异常: // T:System.InvalidOperationException: // System.Windows.Controls.MediaElement.Clock 属性不是 null. public TimeSpan Position { get; set;

CSS中Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. relative : 相对于元素自身的定位. absolute :相对于包含块的定位. fixed : 相对于窗口的定位. 2.包含块 包含块就是 top | righ

CSS position属性整理详解

在css布局中position的使用非常广泛.在一些面试题目中也会常见到position的问题.所以在这篇博客里面整理一下position属性的使用,在以后的深入学习中还会在补充的. 1.position有哪些属性? static:所以元素的默认定位是position:static,这意味着元素没有被定位,元素出现在正常流中. relative:生成相对定位的元素,相对于其正常位置定位,还占有原来的位置,元素通过top,right,left,bottom属性进行规定. absolute:生成绝对

css中的display以及position属性

我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个div都是块级元素,输出的结果为: 块级元素的特征就是各占一行. 接下来用display将第二个div转换成行内元素:(先看一下几个现象) 1. 结果变成了: 2. 将后面两个div都转成行内元素: 结果是: 3. 只把第二个元素转换为行内元素,增加div的高度: 结果是这样: 4. 把所有的div