定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom…

一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那个大盒子.元素有positon属性就必然涉及到包含块.先简单总结一下. 1.初始包含块(Initial containing block),即根元素的包含框. 在浏览器中是原点与 canvas 原点重合.大小与 viewport 相同的矩形. 2.position:static|relative元素包含块为最…

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

event.pageX get mouse position Description: The mouse position relative to the left edge of the document. Example <script> $(document).on( "mousemove", function( event ) { console.log( "pageX: " + event.pageX + ", pageY: &qu…

postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: relative4. position: absolute5. position: fixed 依次讲解这5个值的应用. position: static static 为position 属性的默认值,static 元素会遵循正常的文档流,且会忽略 top,bottom,left,right 等属性…

网页开发中布局是一个永恒的话题.巧妙的布局会让网页具有良好的适应性和扩展性.css的布局主要涉及两个属性——position和float.它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还是很明显的.下面和大家分享一下我的学习心得. 首先,先介绍一个很重要的概念“文档流”,明白了这个概念之后就很容易理解position和float的定位原理了. 在css中有一个z-index属性,因为网页是“立体的”,它有z轴,这个z轴的大小就由z-index控制.默认情况下,所有页面元素均位于z-ind…

用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域.position:sticky为此而生. position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:rela…

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

在实际开发页面布局时,运用position,对定位的块级元素的嵌套的效果总是不太理解,这里做了几个测试 一般的在w3c中我们可以很容易的获取定义: static : 默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). fixed :生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom&q…

用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域.position:sticky为此而生. position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:rela…