CSS+DIV里面相对定位和绝对定位的区别

最新推荐文章于 2021-08-04 08:42:42 发布
最新推荐文章于 2021-08-04 08:42:42 发布
阅读量1.3k 收藏
点赞数
文章标签： css div 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a7758521haha/article/details/6486430
版权

CSS+DIV里面相对定位和绝对定位具体有什么区别？

还有哪些情况该用相对定位，哪些情况该用绝对定位？

解答：

我来打个比方跟你说一下这两个的区别吧:

相对定位和绝对定位:

下面用三个人物的位置来说明这个问题,甲乙丙三个人, 站在一排,间距都是1米;

假若以甲为边缘点即起始计算位置(也就是相当于网页元素距离浏览器边缘的位置)

则: 乙距离甲是1米,而丙的位置可以这么说: 相对位置(相对于乙来说,距离是1米),绝对位置即距离甲的位置是2米;大概意思就是这个意思.

网 页中的元素定位原理和这个差不多,只是参照物不同而已.

至于什么情况用什么没有什么绝对的定论,完全可以实际情况来使用.

但 有一点:若页面想制作成随分辨率的大小而变化的,一般使用相对定位比较好控制.

a7758521haha
关注
div+css相对定位和绝对定位用法实例详解，2024年你与字节跳动只差这份笔记
m0_74931167的博客
04-03 1188
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料一个人可以走的很快，但一群人才能走的更远。
css中的相对定位与绝对定位的区别
weixin_30482181的博客
04-03 89
1.绝对定位 position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。 2.相对定位 position: relative;相...
理解css盒模型以及三种定位的区别
zhanghaibing0903的专栏
10-12 473
.d1{ width: 500px; height: 500px; border: solid red 1px; } .d2{ width: 400px; height: 400px; border: solid blue 1px; margin-left: 88px; margin-top: 88px; position: absolute; } .d3{ width
Css 定位Div的不同方式
XIAOLINJAVA的专栏
07-27 123
margin方式定位Div： [code="java"] 无标题文档 .a1,.b1,.c1{background-color:#aaa;margin:5px;} .a1{ height:50px;width:100px;} .b1{ height:50px; width:100px;} .c1{ margin-top:-110px; margin-left...
CSS网页布局教程:绝对定位和相对定位
木子李的博客
12-25 3039
转载来自：http://www.jb51.net/css/12297.html点击打开链接 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。 CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了，如
2020.10.7定位 静态定位 相对定位 绝对定位 固定定位 粘性定位 半圆制作方法
qq_48942961的博客
10-07 237
静态定位 posintion : static;(属于标准流 ) 相对定位 position: relative; 1.相对于原来的位置 :top :100px;(距离原来的位置向下100px) 2.注意:保留原来的位置 绝对定位 position: absolute; 1.若果没有父级或父级没有定位这相对于浏览器定位 2.如果 有父级,则相对于最近有定位的父级定位 3.不保留原来的位置(相当于浮动了) 定位常用 子绝父相:子级用绝对定位不占用位置,父级用相对定位把位置占住 固定定位 1.相对于浏览器的可
div+css相对定位和绝对定位用法实例详解
09-25
本教程将深入探讨两种主要的定位方式：相对定位和绝对定位，这两种方法在DIV+CSS布局中尤其常用。 1. 相对定位（relative） 相对定位是CSS定位的基础，它保持元素在正常文档流中的位置，但允许通过`top`、`right`、...
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
css+div 经典问题
05-27
4. 定位机制：position属性（static, relative, absolute, fixed）控制元素在页面上的相对或绝对定位，是实现复杂布局的关键。 二、div与CSS布局 1. div作为容器：div元素通常用于组织页面内容，通过设置display...
相对定位
peichaohang的博客
12-26 5483
position设置元素定位 - 通过position属性来设置元素的定位 -可选值： -static：默认值，元素没有开启定位 -relative：开启元素的相对定位 -absolute：开启元素的绝对定位 -fixed：开启元素的固定定位（也是绝对定位的一种） 当元素的position属性设置为relative时，则开启了元素的相对定位： 1.当开启了元素的相对定位以后，而不设...
相对定位position: relative;
weixin_30619101的博客
10-11 90
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* position:relative; ...
练习 | CSS定位练习 实现特定页面布局
虎鲸虎鲸
02-08 1143
文章目录问题记录1.如何实现行内元素始终位于父元素的底部2.代码 目标效果 完成效果 问题记录 1.如何实现行内元素始终位于父元素的底部 主流办法：相对定位+绝对定位 参考文章：css控制div位于父容器底部 补充链接：How can I send an inner <div> to the bottom of its parent <div>? 之后计算长度，手动设...
CSS中position中的各个属性
weixin_44139167的博客
09-11 631
static：position中默认元素，没有定位，出现在正常的流中。 relative：相对定位，可以利用left，right，top，bottom来给元素定位，所以变成相对定位。 absolute：绝对定位，是相对于除了static以外的第一个父元素进行定位，使用left right top bottom定位。 fixed：也是绝对定位，但是和absolute的绝对地位不一样，fixed相对于...
css div设置相对定位,css div相对定位和div绝对定位详解
weixin_32616031的博客
08-04 1619
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;overf...
相对定位 绝对定位 两张图片完全重叠的处理方法之背景图
dtsxx123的博客
07-31 6647
#div1{ width:200px; height:200px; margin:100px auto; border:1px solid #404040; position:relative; } #tu1{ width:200px; height:200px; background:url("t1.g
相对定位(relative)和绝对定位(absolute)详细图解
路人乙丶的博客
03-29 1809
设置好position后使用top、left、right设置偏移量即可(设置后这些才会生效) 相对定位(relative) 相对其正常位置做调整，但是其原本的位置在修改后还是存在的，即仍然占据空间; 常用作绝对定位的容器 绝对定位(absolute) 相对于最近的已定位父元素做调整，若没有，则相对于整个<html>做调整,它的定位和文档流无关，...
css绝对定位、相对定位
qq_42987499的博客
09-10 653
绝对定位 position: absolute; 绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位与文档流无关，可以覆盖在其他元素上方，可以通过z-index控制层的对方顺序 绝对定位是元素想对于离他最近的设置了position的父元素的偏移 相对定位 position: relative; 相对位置是相对于元素在文档中的初始位置，也就是他首先出现的位置。 相对定位：相对自己
div布局：相对定位、绝对定位、固定定位
热门推荐
小鸣的博客
07-07 1万+
当用div布局，相对定位时，子div的位置是相对于母div来设置的（从母div左上角开始算），margin可以活动到母div外围而不会把母div撑大，padding则总是在母div内部折腾，会把母div撑大。—————————————————————————————————————————— 当用div布局，绝对定位时，div位置是相对整个页面来设置的（从整个网页的左上角开始算），绝对定位的d
理解CSS定位：相对定位与绝对定位详解
"这篇文章主要探讨了CSS中的position属性，特别是相对定位（relative）和绝对定位（absolute）的概念和用法。作者通过实例解释了这两个定位方式的差异，并着重讲解了它们相对于什么进行定位。" 在网页设计中，CSS的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值