POSITION: absolute，与 relative区别

最新推荐文章于 2019-07-10 11:34:36 发布
原创 最新推荐文章于 2019-07-10 11:34:36 发布 · 3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#浏览器 #div
本文介绍了一种使用CSS实现绝对定位元素始终居于其父元素底部的方法。通过设置父元素为相对定位，并将子元素的position设为absolute且bottom设为0px，可以使子元素在任何情况下都能与其父元素底部对齐。
如果有两个DIV〔A与B〕
并且B被嵌套与A中
现在你想达到的郊果是让B在任何情况下的垂直属性都为“居底”（与A底对齐）
那么你可能会想到用bottom:0px这样的作法，前提当然是position要设为absolut
但是你会发现，如果这样设的话，得到的效果是B对齐到了浏览器的最下边
这时就要用到position:relative了。
在A中加上一句position:relative，这样就定义了A内部元素的position:absolute是相对于A自身的，而不是浏览器！所以，B中的bottom:0px就会在执行时去找它的父级元素中有没有position:relatavie的，如果没有，它会继续向它更上一层去找，直到找到<body>如果还没有，它的相对物就是济览器了！


position：absolute与relative的区别
Ven
05-28 1万+
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 一般来讲...
定位 position:absolute和position:relative的区别
热门推荐
在安静的地方安静地生活
05-07 2万+
区别：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，而定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不在存在。 position各个属性值的定义： 1、static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。 2、relative：生成相对定位的元素...
position:relative与float的区别。relative、absolute和float 。div定位 position （relative、absolute）嵌套 漂浮float 探索
hljqfl的专栏
01-14 1756
position:relative与float的区别 postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位，但是position移动后，原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。 float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin...
CSS里面position：relative与position：absolute 区别
未曾远去
07-10 5848
position：absolute这个是绝对定位； 是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如：<div class="1...
关于position: relative和position: absolute的区别
qq_41832686的博客
05-10 404
关于position: relative和position: absolute的区别 下列两种情况的结果相同 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Examples&lt;/title&gt; &lt;link href="lian
Web开发中常见的安全缺陷及解决办法
02-04 4093
提纲： 一、不能盲目相信用户输入 二、五种常见的ASP.NET安全缺陷 2.1 篡改参数 2.2 篡改参数之二 2.3 信息泄漏 2.4 SQL注入式攻击 2.5 跨站脚本执行 三、使用自动安全测试工具 正文： 保证应用程序的安全应当从编写第一行代码的时候开始做起，原因很简单，随着应用规模的发展，修补安全漏洞所需的代价也随之快速增长。根据IBM的系统科学协会（Systems Sciences In
学习Web 2.0 （四）
01-23 4004
[Web 2.0是个历史学的概念，而非是个技术性的概念，它是对Web发展历史断代的成果。对这个概念的梳理，能帮助我更好的把握互联网正在发生的技术与文化。]中文网志圈谈论的Web 2.0内容摘要：- “Web 2.0是用来研究现象、发现规律的东西，不是用来招商引资、搭台唱戏的东西。当越来越多的互联网应用采取与用户互动的方式，越来越多的内容是由用户产生，越来越多的用户参与到互联网创造的过程中的
修改CSS:设计你的漂亮家园
02-08 3279
相信很多朋友都有过这样的问题：想DIY一个自己风格的BLOG模板，却苦于看不懂系统给的CSS代码，于是只能用着默认的模板。天天看着自己不是很满意的BLOG样式，是不是一直在想着如何才能改变呢？那么，改变就从现在开始吧。 个性BLOG完全打造（一）扣门入室：想要改变自己的BLOG样式，首先要先能明白自己的BLOG都有什么部分，哪些部分可以修改。举个例子，就以BLOGCHINA的默认模板“秋天的童话”
Ajax
02-09 1290
Ajax 注：本文参考《Ajax: A New Approach to Web Applications》，简单地对 Ajax 进行描述介绍Ajax 定义这里说的 AJAX 可不是荷兰的阿贾克斯，而是 Asynchronous JavaScript + XML 的缩写，它也不是单一技术，而是几种技术的强有力组合。参考《Ajax: A New Approach to Web Applications
学习Web 2.0 （一）
01-23 1100
Web 2.0？历史很重要。对一个技术的学习也应当从历史出发，通过其在时间形成历史的流变，得以知晓现状，甚至能够预知未来。那Web 1.0是什么呢？他们说，记得静态HTML的WWW时代么？（那个时代的WWW应用、人们的Web体验、对社会的影响如何？）那么动态HTML和静态HTML下的Web相比，是多少版本？1.5？对了，他们是真这么叫的。（在效果和影响上，与1.0相比，扩展
document对象详解
02-02 1034
document对象详解document 文挡对象 - JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写   否则会提示你一个错误信息 "引用的元素为空或者不是对象"----------------
什么是DIV？
01-18 996
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。Internet Explorer和Netscape的浏览器都支持DIV标签。DIV和SPAN很多开发人员都把DIV元素同SPAN元素弄混淆了。尽管它们在特性
学习Web 2.0 （五）
01-23 989
Web 2.0阶段的一个重要特征是开放，和Web初期的开放有很大不同，有以下几种突出的表现：内容方面。- 内容的创作共用授权。它的广谱和可选择性，让它具有了足够的生命力。CC先是在网志圈中广泛采用，后来许多商业公司也纷纷采用CC方式（比如BBC）；先是文本世界采用，后来逐渐推广到了多媒体世界，比如音频、视频、Flash动画等等。一场自由的文化（free culture）运动在各个方面悄然铺
Web 1.0与Web 2.0的区别
02-09 987
  Web 1.0(1993-2003)通过浏览器浏览大量网页 Web 2.0(2003-未来)网页，加上很多通过Web分享的其他“内容”，更加互动，更像一个应用程序而非一个“网页”
什么是网站PR值？PR值对搜索引擎排名有什么价值？
01-23 931
网站的PR值（全称为PageRank），是google搜索排名算法中的一个组成部分，级别从1到10级，10级为满分，PR值越高说明该网页在搜索排名中的地位越重要，也就是说，在其他条件相同的情况下，PR值高的网站在google搜索结果的排名中有优先权。这是对PR值最基本的解释。 在搜索引擎营销的实际工作中发现，网站的PR值并不见得是决定一个网站（及其被收录的网页）在搜索结果中排名的惟一因素，甚至
实例分析CSS属性DISPLAY与VISIBILITY不同
02-09 882
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例： functi
PHP_字符串操作入门教程
02-04 870
无论哪种语言，字符串操作都是一个重要的基础，往往是简单而重要。正像人说话一样，一般有形体（图形界面），有语言（print 字符串？），显然字符串能解释更多的东西。PHP提供了大量的字符串操作函数，功能强大，使用也比较简单，详细请参看 http://cn2.php.net/manual/zh/ref.strings.php . 以下将简单的讲述它的功能和特性。 弱类型PHP是弱类型语言，所以其它
天极在web2.0方面做了很多创新
02-09 858
http://net.chinabyte.com/chxjj/107/2168607.shtml 主持人：天极在web2.0方面做了很多创新，您能否介绍一下？web2.0是否意味编辑需要转变思维，在这方面您又做了哪些工作？李大学：我们现在不把网站看成一个纯媒体，我们以前在业务中最有名的就是发布系统，发布系统驱动了门户的建设，驱动了网站应用的表现。所以传统的网站要融合Web2.0最关键的
CSS 属 性 一 览 表
02-08 782
属 性 名 称 属性功能及其取值 用 法 说 明 与 范 例 颜色与背景类 color 设置文字颜色 #rgb#rrggbbrgb(255,255,255)rgb(100%,100%,100%) H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值