html按钮相对位置,html相对定位绝对定位

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

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

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

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

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

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属性。而不是盲目的去套那些子绝父相什么的。搞懂原理才是正解。希望能帮到需要的人，花了一下午整理，就怕有些定义搞不太懂，编辑博客也是一个学习的过程，本着对他人负责的态度，写出来的东西一定要确认无误后才敢发表。有不足之处欢迎指出。

内容来源于网络如有侵权请私信删除

html按钮相对位置,html相对定位绝对定位相关推荐

HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
element-ui中$confirm弹出框的确定和取消按钮互换位置
element-ui中$confirm弹出框的确定和取消按钮互换位置 (1)定位元素 (2)找到元素class,通过flex布局,进行位置更换 (3)app.vue中进行全局修改 /* 确认窗取消 ...
汇川H3U标准程序，程序有本体脉冲控制的三轴定位，有总线控制的汇川伺服定位，轴点动，回零，相对定位绝对定位
汇川H3U标准程序,程序有本体脉冲控制的三轴定位,有总线控制的汇川伺服定位,轴点动,回零,相对定位绝对定位,程序结构清晰,分模块控制,是工控者学习的好案例. YID:6229641434050887自 ...
汇川H3U标准程序，程序有本体脉冲控制的三轴定位，有总线控制的汇川伺服定位，轴点动，回零，相对定位绝对定位，程序结构清晰，分模块控制，是工控者学习的好案
汇川H3U标准程序,程序有本体脉冲控制的三轴定位,有总线控制的汇川伺服定位,轴点动,回零,相对定位绝对定位,程序结构清晰,分模块控制,是工控者学习的好案例.
html 重置按钮如何居中,如何设置html 表单按钮的位置，如居中，急？
设置html 表单按钮的位置的代码是: 超文本标记语言, 标准通用标记语言下的一个应用. " 超文本 "就是指页面内可以包含图片. 链接,甚至音乐. 程序等非文字元素. 超级文本标 ...
在Google Maps中更改”我的位置按钮“的位置
项目场景: 概述我最近正在研究谷歌地图,现在需要更改我的位置(当前位置按钮)的位置.目前,当前位置按钮位于右上方,第一次写博客,有什么写得不好地方,请多多见谅. 问题描述如何将谷歌地图我的位置(当 ...

html按钮相对位置,html相对定位绝对定位

html按钮相对位置,html相对定位绝对定位相关推荐

最新文章

热门文章