CSS+DIV相对定位和绝对定位的区别和联系.pdfVIP

CSS+DIV 相对定位和绝对定位的区别和联系 你对CSS+DIV 定位的概念是否熟悉，这里和大家分享一下，主要包括CSS+DIV 相对定位和绝对定位两大部分内 容，如果理清了定位的原理，那定位会让网页实现的更加完美，相信本文介绍一定会让你有所收获。 CSS+DIV 定位详解 定位一直是WEB 标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会 走样。如果理清了定位的原理，那定位会让网页实现的更加完美。 CSS+DIV 定位的定义： 在CSS 中关于定位的内容是：position:relative|absolute|static|fixed ◆static 没有特别的设定，遵循基本的定位规定，不能通过z index 进行层次分级。 ◆relative 不脱离文档流，参考自身静态位置通过top,bottom,left,right 定位，并且可以通过z index 进行层次分级。 ◆absolute 脱离文档流，通过top,bottom,left,right 定位。选取其最近的父级定位元素，当父级position 为static 时， absolute 元素将以body 坐标原点进行定位，可以通过z index 进行层次分级。 ◆fixed 固定定位，这里他所固定的对像是可视窗口而并非是body 或是父级元素。可通过z index 进行层次分级。 CSS 中定位的层叠分级：z index:auto|namber; auto 遵从其父对象的定位 namber 无单位的整数值。可为负数 CSS+DIV 定位的原理： 可以位移的元素 （CSS+DIV 相对定位） 在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS 我们依然使得这些元素可以改变自 己的位置，我们可以通过float 来让元素浮动，我们也可以通过 margin 来让元素产生位置移动。但是事实上那并非 是真实的位移，因为，那只是通过加大margin 值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left （下称TRBL ，TRBL 可以折分使用。）针对一个CSS+DIV 相对定位的元素所产生的。我们看下面的图： 我们看图中是一个宽度为200px，高度为50px，margin:25px;border:25pxsolid#333;padding:25px;CSS+DIV 相对定 位的元素，并且位移距上50px，距左50px 。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被 上面的CSS+DIV 相对定位挡住了一部分，这说明：“当元素被设置CSS+DIV 相对定位或是CSS+DIV 绝对定位后，将自 动产生层叠，他们的层叠级别自然的高于文本流”。 1 / 3 除非设置其z index 值为负值，但是在Firefox 等浏览器中z index 为负值时将不会显示。并且我们发现当CSS+DIV 相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽 与总高 （内容的高度或是宽度加上margin\border\padding 的数值）。这说明在 CSS+DIV 相对定位中，虽然表现区脱 离了原来的文本流，但是在文本流中还还有此CSS+DIV 相对定位的老窩。这点要特别注意，因为在实际应用中如果 CSS+DIV 相对定位的位移数值过大，那么原有的区域就会形成一块空白。 并且我们注意，定位元素的坐标点是在margin 值的左上边缘点，即图中的B 点。那么所有的位移的计算将以这个点 为基础进行元素的推动。当TRBL 为正值时位移的方向是内聚的。由此可推，当TRBL 为负值时位移的方向是外放的。 在图片中有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位移方向。 可以在任意一个位置的元素 （CSS+DIV 绝对定位） 如上所述：CSS+DIV 相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表 现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依 然有一个专属于他的位置，这个位置不随他的移动