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

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:07 我要评论(0)

css中position包括了relative(相对)与 absolute(绝对),但很多朋友都不清楚相对定位与绝对定位具体区别在哪里,特别是相对于元素时更不会定义了,下面我给大家来介绍一下它们的用法与区别。

定位标签:position

包含的属性:relative(相对)与 absolute(绝对)

1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)

例如:

#mybox{

position:relative;

left:20px;

top:20px;

}

效果就是使这个层向下和向左移动了20px。

2.position:absolute; 表示绝对定位,位置将依据浏览器左上角的0点开始计算,

绝对定位使元素与文档流无关,因此不占据空间。普通文档流中其这元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布事HTML元素。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高,框在堆中的位置就越高。)

那么有个问题产生了,现在大家做的网页大部分是居中的,那么我需要这个元素跟着网页

中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的,那么单纯的

absolute是不行的。

正确的解决方法就是在元素的父级元素定义为position:relative;(更正:这里可以是祖父

级,也可以是position:absolute;)需要绝对定位的元素设为position:absolute;

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

下面看一些实例

代码如下

复制代码

<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;

background: #F90;

}

.b, .d, .e

{position: relative;}

.cc, .dd, .ee

{position: absolute;}

</style>

<div class="a">

<div class="aa"></div>

A:均不设置postion,一般嵌套关系

</div>

<div class="b">

<div class="bb"></div>

B:仅外div设置relative,一般嵌套关系

</div>

<div class="c">

<div class="cc"></div>

C:仅内div设置absolute,文档中为嵌套关系,页面中内div浮起[非float],相对于页面定位,与外div无关。

</div>

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...