这篇文章是2000年时写的,那时有一个织梦论坛,站长是Jet,当我发了这个帖子后就被Jet邀请做了个版主,人生第一次当版主,确实挺兴奋的。
在那个年代,WEB页面有一个相对定位的问题无人解决,页面上的元素要么绝对定位,要么左右对齐,我这篇文章首次解决了相对定位的难题,所以一出现立刻一石激起千层浪。
由于文章年久失修,图片已丢失,文章放这里纪念一下,以下是原文:
-----------------------------------------------------------
关于相对于绝对定位的问题经过一阵研究与借鉴他人经验,得出入下结论:
一. 常出现的问题
当你的表格选居中的时候又插入了层(插入层方法1:object->draw layer)的时候(800*600),分辨率一旦变大、窗口最大化之后,层就错位了,而如果使用菜单(插入层方法2:Insert->Layer)插入层的时候,这个层就会与它的上级元素相对定位,但是一旦在Dreamweaver中用移动工具动了它,它就会马上变成绝对定位,不会再与上级元素相对定位了。
二. 思想:
通过object面板置入的层是绝对定位的层,这个绝对定位指的是层的左上角与浏览器窗口内部的左部、顶部距离,代码中的写法是left与top。
通过菜单置入的层是相对定位的层,这个相对定位指的是层与它的上级元素的距离(它的上级元素的左上角),由于这个div中不再有left与top的属性,所以浏览器把它的位置定为与它的上级元素相同
(总结一:只要去掉层的left与top属性就可以相对定位!)
三. 深入思想:
现在层已经相对定位了,可是只是这样还完全不能满足要求,因为很多时候不能把表格设定得那样准确,否则会把表格搞得很麻烦,把代码搞得很大很大。
如果在上面说做出的相对定位的层的基础上再做一个层对它相对定位,不就解决问题了吗?
这就涉及到了父层与子层的问题(由于它是层的基础,在书与网上教程中就可以看到,这里不再阐述),父层相对于某点定位,而子层相对于父层定位,就可以达到层的相对定位这个目标了
四. 具体制作(只介绍最简单的方法,对代码熟的朋友可以手敲的):
先在页面内插入表格(可以设居中,表格就居中了,否则几乎无意义),鼠标在某单元格内点一下,让光标在此闪动,然后通过菜单插入一个层,这个层就相对与这个单元格定位了。插入一个层之后,不要动它,而且也永远不要动,但是可以更改它的大小,比如把它的高与宽都改成"0",让它不再影响你对其他内容的编辑,否则,这个层的left与top属性出现之后就成了绝对定位了,变成绝对定位后你可以把它的left与top属性去掉,就恢复成相对定位了。变成"0"之后,有时子层会看不见,可以按[f11]键点它恢复编辑。
现在光标在这个层内闪动,再通过菜单插入子层,这时子层与父层重叠,你可以随意移动它,不管怎么动,它都是相对与父层定位。
好了,一个相对定位的层(子层)做好了,你可以在里面随意添加内容了,也可以改变它的尺寸、位置、背景等所有属性,但是不要动left与top属性,因为它是相对于父层的左上角定位的。
下面给出父层与子层在Dreamweaver中的属性面板:
父层:
子层:
五. 技巧:
先插入一个表格,在其中一个单元格中插入父层,可以把它定得小一点,比如说20象素宽、10象素高,这样它就不会盖住下面的链接,也不影响子层的相对定位。
如果要用778象素宽定义表格,可以把父层插入到表格的第一行第一个单元格中,这样就可以在所有层制作完后插入父层了!对代码熟的朋友就可以手敲父层而不必再去调整子层的位置了。
六. 结束语:
欢迎转载、欢迎批评,欢迎大家前来交流,转载请注明出处
相关推荐
相对定位是将元素相对于自身原本的位置,通过偏移指定的距离,到达新的位置,元素仍然保持其未定位前的形状,它原本所占的空间仍保留。 说明 水平方向的偏移量由left或right属性指定 竖直方向的偏移量由top和bottom...
要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义...定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视
但是位置总是设置为相对于浏览器窗口的可见区域(即视口),而不是像 AP 元素那样相对于父元素。访问者滚动页面时,固定内容将保持在屏幕上的确切位置上。 固定定位可以创造性地用于背景图像或者导航区域。即使你滚动...
如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素...
定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位 流定位 页面中的块级元素框从上到下一个接一个地...
然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,...
详解微信小程序 相对定位和绝对定位 相对定位:元素是相对自身进行定位,参照物是自己。 绝对定位:元素是相对离它最近的一个已定位的父级元素进行定位 相对定位: position:relative; /*启用相对定位*/ ...
相对于传统的导航策略,该策略的优势在于可以时时精确定位,时时调整自己的航向与速度。同时,提出采用单冗余信息融合(FSRI)法来提高超声波的绝对定位精度,并将基于FSRI法的绝对定位应用到0DMM导航上。仿真与实验...
,这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查,直到相对于body元素...
absolute绝对定位(相对于最近的父元素,假如父元素都是默认的static,那么将相对body进行定位,如果父元素为relative定位,那么就相对该父元素进行定位) relative相对定位(相对于自己,在原来位置上移动。与...
3.绝对定位相对于已定位的最近的祖先元素,绝对定位脱离普通流 4.固定定位是相对于浏览器窗口的定位 5.浮动的元素可以左右移动,直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘 6.浮动的元素脱离普通...
CSS中关于定位(position)是这样定义的:定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都...
当其父元素是相对定位的,而我们想要此元素在父元素的内部或者距离父元素很近的位置,这时候就可以使用绝对定位来对这个元素进行操作,当然也可以用相对定位(相对于此元素本身的位置进行left,right,top,bottom值的...
前言: position:sticky是css定位新增属性; 可以说是static(没有定位) 和 固定...absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的 位置通过"left", "top", "right" 以及
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 具体实例 复制代码代码如下: <html> &...
CSS中关于定位(position)是这样定义的: 定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都...
今天研究了一下,总算有所了解。...3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候...元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好
相对定位:让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调)。 我们之前学习的背景属性中,是通过如下格式:background-position:向右偏移量 向下偏移量; 但这回的定位属性,是通过如下格式: ...
1.position:relative相对定位:顾名思义,相对定位就是相对于原来自己的位置做出对应的变化, 需要注意的是 :元素移动后会占有原来的位置(这是relative定位最为重要的一点) 下面为代码演示部分: * { margin: 0; ...