html相对定位绝对定位

HtmlCssJs 发布于2019-04-23 13:27 / 2324人阅读

摘要：经常做页面渲染的筒子可能会遇到的一个问题，的相对定位和绝对定位。网上流传着一个说法，叫子绝父相。就是说子元素设置绝对定位，父元素设置相对定位。也就是相对定位是相对于本身的位置进行偏移。而不是盲目的去套那些子绝父相什么的。

　　孔子说：“温故而知新，可以为师矣。”这几天参加了一个免费的前端课，每天晚上都有直播，讲解一个独立的案例。在听前端基础的时候，发现自己有不少东西没学会，平时在学校虽说html也写了不少，但有好大一部分都被忽略掉了。就在刚才看了一个基础案例，很是有共鸣，一个简单的轮播图，牵扯到的东西实在是多。不得不说，专业的就是专业的。

　　好了，废话不多说，直接上干货。经常做页面渲染的筒子可能会遇到的一个问题，position的相对定位和绝对定位。这个问题看似很简单，不就是一个定位嘛，有什么的？别急，我们慢慢往下看。网上流传着一个说法，叫子绝父相。就是说子元素设置绝对定位，父元素设置相对定位。然后就可以给子元素设定top,left值来控制位置。这其实是一种很错误的观念，完全曲解了定义。楼主之前在学校写页面的时候也犯过类似的错误，只要实现了效果就行，管他什么原理呢，结果每次碰到定位的问题都卡壳。查半天还记不住，为了彻底搞懂这个，特地花时间写了这篇帖子。

　　relative也就是相对定位：是相对于本身的位置进行偏移。只看自己，不看其他。

　　absolute绝对定位：相对于非static的祖先元素进行位置偏移，当这样的元素不存在，则相对于根级容器定位。

　　以一个轮播图为例，html代码：

class="banner">
    class="banner-bg">

<！--E banner-->

CSS代码：

　　banner是banner-bg的父级，然后给banner设置一个position：absolute属性。按照规则absolute要找他的非static祖先元素，我们为了让banner-bg这几个轮播图都固定在最上面，所以就要给轮播容器banner添加一个position：relative属性。这样设定left：0；top：0；就会定位到banner了。虽然不设定banner的relative属性也能将图片放到顶部，但那样的话，banner-bg找的是根级元素html，这并不是我们想要的效果。为了以后不出现差错，还是给想要定位的元素添加一个position：relative属性。

　　说了这么多，其实absolute定位的时候，就看你想要定位到哪个父级元素，就给哪个元素添加relative属性。而不是盲目的去套那些子绝父相什么的。搞懂原理才是正解。希望能帮到需要的人，花了一下午整理，就怕有些定义搞不太懂，编辑博客也是一个学习的过程，本着对他人负责的态度，写出来的东西一定要确认无误后才敢发表。有不足之处欢迎指出。

GPU云服务器云服务器相对定位-绝对定位相对定位绝对定位相对定位自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1888.html

移动端页面头部固定定位的绝对定位实现

摘要：在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。其中的默认定位都是。因此最终的代码形式是禁用滚动条，实现相对于的绝对定位代替固定定位。因此如果有元素找不到非的祖先元素，那么是相对于进行定位的。在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。...

terasum 2019-08-30 15:55 评论0 收藏0
移动端页面头部固定定位的绝对定位实现

摘要：在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。其中的默认定位都是。因此最终的代码形式是禁用滚动条，实现相对于的绝对定位代替固定定位。因此如果有元素找不到非的祖先元素，那么是相对于进行定位的。在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。...

adie 2019-08-23 14:43 评论0 收藏0
解析什么是绝对定位，相对定位与浮动

摘要：注意，绝对定位使元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。相对定位相对定位，元素相对于它自己原来的位置进行移动。在理解定位之前，先说一个概念，文档普通流，就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。绝对定位绝对定位：absolute，元素相对于离它最近的已定位祖先元素进行移动，如果元素没有已定位的祖先元素，那么它的位置相对于最...

wawor4827 2019-04-23 13:18 评论0 收藏0
CSS进阶——绝对定位元素的宽高是如何定义的

摘要：绝对定位元素的布局计算公式表示内容宽度，即标准盒子模型默认值是默认值是以水平方向从左至右为例说明一下绝对定位元素的位置或大小是如何定义的。先抛两个小问题：绝对定位相对于谁来定位？大多数人都知道是相对于最近的position设置为relative/absolute/fixed的父元素来定位。那如果所有父元素的position都没有设置上面三个值，那又是相对谁来定位呢？包...

teren 2019-08-29 12:43 评论0 收藏0