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

2016-02-19 13:07 9 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享CSS网页中的相对定位与绝对定位吧。

【 tulaoshi.com - Web开发 】

在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚,这里做一些细致的讲解。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为relative的元素是真正的移动,这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。

  position:absolute; 表示绝对定位,如果定义了这个属性的元素,其位置将依据浏览器左上角的0点开始计算,并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。

  于是产生了一个问题:现在大家做的网页大部分是居中的,如果我需要这个元素跟着网页中的某个元素位置,不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的,靠单纯的absolute是不行的。

  正确的解决方法是:在元素的父级元素定义为position:relative;(这里可以是祖父级,也可以是position:absolute;,多谢谢old9的提出)需要绝对定位的元素设为position:absolute;

  这样再设定top,right,bottom,left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1603010.html

延伸阅读
标签: Web开发
今天做页的时候,遇到了一个问题:div无法对父对象绝对定位。 div id="fa"      div id="so" style="position:absolute; top:0; right:12px"      /div /div 但是发现无论怎么调整都是针对body定位,郁闷! 看了下css手册,也没发现有什么不对。到网上查了下...
标签: Web开发
在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用,也...
标签: Web开发
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素...
标签: Web开发
一、下看个两个例子 1.xhtml代码 body div class="relative" span class="absolute"Test absolute/span /div /body 2.css代码 .relative { position:relative;height:120px; border:2px solid black; } .absolute { position:absolute; top:10px; left:10px; paddin...
标签: Web开发
使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。 其实,要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。 CSS中关于定位(position)...

经验教程

867

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部