口语解说让你理解网页相对定位与绝对定位

网页

  我刚开始学习时也不是很明白它们到底有什么区别,经过多次的实践与对定义的理解,才渐渐明白过来,就象我们平时所说的会的不难,难的不会

  1.先说相对定位position:relative:是相对于它自身在文档中的位置,比如我们排队,你排到了第三个位置,如果用相对定位的话我们只能是相对于你自身,也就是相对于第三个位置,如果我们相对于那个位置我出了队列的话,我的那个第三个位置还是会保留的,也就是我虽然出了队,但那个地方还存在,还是我的,只是没有人,占用了一个空位置,好象说了太多的费话,但这主要是让你更准确的理解!

  补充:平时在很多网站样式表中会看到样式:position:relative;这是有用的,虽然没有定义left,right等,页面中看不出什么效果,但它是有用的,请接着往下看第2点。

  2.position:absolute|绝对定位:相对于一个“元素”的定位,比如我们平时用到的绝对定位默认都是相对于BODY,如果你想定义为相对于上一级元素,你的办法就是定义上级元素为position:relative,这样你就可以随心所欲了!

  总结:如果你对上面两条可以理解了,那很你用这两条基本原则一定可以做到为你所用,不会再让你不知所错!网上确实有很多的的教程说定位的问题,都大同小异,也太书面化了.所以我用口语话说了这些,希望对不能理解,想理解的好学者有帮助!

时间: 2024-10-02 01:29:26

口语解说让你理解网页相对定位与绝对定位的相关文章

口语解说网页相对定位与绝对定位

我刚开始学习时也不是很明白它们到底有什么区别,经过多次的实践与对定义的理解,才渐渐明白过来,就象我们平时所说的会的不难,难的不会 1.先说相对定位position:relative:是相对于它自身在文档中的位置,比如我们排队,你排到了第三个位置,如果用相对定位的话我们只能是相对于你自身,也就是相对于第三个位置,如果我们相对于那个位置我出了队列的话,我的那个第三个位置还是会保留的,也就是我虽然出了队,但那个地方还存在,还是我的,只是没有人,占用了一个空位置,好象说了太多的费话,但这主要是让你更准确

详解CSS的相对定位和绝对定位

 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100px的声明:left:100px 那么这条声明不会起到任何效果.还有z-index属性在这时也不会生效.也就是说我们平时如果不给某元素一个position属性的声明,那么它默认的就是我上述的这种情况,不过因为有了浮动,所以通

div+css相对定位和绝对定位用法实例详解

本文向大家介绍一下CSS relative相对定位的概念,如果对一个元素进行相对定位,它将出现在它所在的位置上. CSS relative相对定位 设置为相对定位的元素框会偏移某个距离.元素仍然保持其未定位前的形状,它原本所占的空间仍保留. CSS 相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像

CSS网页中的相对定位与绝对定位

css|网页 在CSS中有这样的一个指令:(position) 在DW中文版中翻译为"定位",常用的属性有relative(相对)与 absolute(绝对). 有很多朋友对这条指令的用法还是不清楚,这里做一定细致的讲解: position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的.padding与margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为

理解网页中的视觉层次

原文来自&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;Webdesign Tuts+ 原创翻译 – 设计理论 视觉层次是高效率网页设计的重要原则之一.这篇文章将向大家介绍为什么设计一个具有视觉层次的网页是这么重要.在了解这些原则之后,你可以在自己的基础设计练习中运用到这些知识. 作为核心:设计整体就是视觉交流.作为一个高效率的设计师,你必须有这个能力清楚地将你的设计思想传达出来.人是易变的,如果你给了他们巨大的信

浅谈网站建设中正确理解网页设计的目标和定位

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 谈到网站建设,无论是客户还是网建服务商,可能都会把重点放在网站设计上.其实一个好的网站,设计表现好只是其中一个重要因素,甚至可以说网站设计只是为了让网站所要表达的内容更美观.网站的主旨是内容,并非设计本身,设计在这里只是个修饰词,而并非主语.这一点品牌网站也好,企业网站也好,皆是如此. 举个例子说明,公司新聘来一个网页设计师,是科班毕业,大学

CSS中的相对定位与绝对定位

css 在CSS中有这样的一个指令:(position) 在DW中文版中翻译为"定位",常用的属性有relative(相对)与 absolute(绝对). 有很多朋友对这条指令的用法还是不清楚,这里做一定细致的讲解: position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下 左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的.padding与 margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为r

div中position相对定位与绝对定位实例

定位标签:position 包含的属性:relative(相对)与 absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动.(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其他框) 例如: #mybox{ position:relative; left:20px; top:20px; } 效果就是使这个层向

css中position相对定位和绝对定位(relative,absolute)详解

在CSS中有这样的一个指令:(position) 在DW中文版中翻译为"定位",常用的属性有relative(相对)与 absolute(绝对). 有很多朋友对这条指令的用法还是不清楚,这里做一定细致的讲解: position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的.padding与margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为relativ