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!

人工智能实验室
相关文章相关文章
  • 第一批国家重点研发计划公布,旷视科技开启“五年行动”

    第一批国家重点研发计划公布,旷视科技开启“五年行动”

  • 品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

    品友互动为Digital Travel APAC2018 唯一受邀中国AI企业

  • 让AI触手可及  Qualcomm携手创通联达推出全新终端侧AI开发套件

    让AI触手可及 Qualcomm携手创通联达推出全新终端侧AI开发套件

  • 长虹新款智能语音空调,告诉你空调也能玩Siri

    长虹新款智能语音空调,告诉你空调也能玩Siri

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

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...