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

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

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

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

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

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

时间: 2024-11-05 16:34:50

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

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

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

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

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

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

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

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

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

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

css 定位(相对定位与绝对定位)

可以使用 position:relative 对元素从排列顺序的当前位置进行偏移 可用position:absolute 对元素从排列顺序的当前位置或依照定位最近的祖先元素进行偏移 用position:fixed 对元素参照视窗进行偏移 浮动与清除 问题:想把一个元素从正常排列顺序中移除,并令它靠父元素的左侧或右侧显示.想把它当作块状元素来解析,并排列在父元素内边距所包围的区域里.还想让它的顶部基于原始提取位置进行排列.还想控制邻近的其他浮动元素或非浮动内容,或把它们移到自己的下面. 解决方案:

CSS关于相对定位和绝对定位的说明实例_CSS/HTML

<style>body{margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e{   width: 100px;   height: 100px;   margin: 5 auto;   color: #fff;   background: #000;}.aa, .bb, .cc, .dd, .ee{   top: 10px;   left: 10px;   width: 10px;   height: 10px;   overflow: hidden