绝对定位absolute和相对定位relative

最新推荐文章于 2022-07-31 14:09:48 发布
最新推荐文章于 2022-07-31 14:09:48 发布
阅读量196 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36641107/article/details/79835951
版权

看到两句话，就想把这个知识点再总结一下

  • 相对定位的元素是相对自身进行定位，参照物是自己
  • 绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位
附加：

  • 相对定位relative；自身占据空间
  • 绝对定位absolute；自身不占据空间
  • 绝对定位absolute    如果没有父级元素那么相对的就是浏览器了
cjq4218
关注
专栏目录
相对定位 relative和绝对定位 absolute
weixin_49542222的博客
08-14 465
定位布局 在定位布局中有五种定位，分别是静态定位、相对定位、绝对定位、固定定位和粘性定位。我主要要说的是相对定位和绝对定位，一般这两个都是一起出现的。更可以说相对定位是为了当绝对定位的父亲而出现的。 相对定位（relative） 相对定位顾名思义，相对于某元素产生位移，而这个某元素就是自己本身，也就是说元素移动的时候是相对于【当前元素所在的位置】进行移动。 通过top、bottom、left和right来改变自己的位置 书写方式为 position:relative 除了这些他还有一些特性，
Javascript 绝对定位和相对定位
weixin_30840573的博客
06-01 269
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g...
css的绝对定位absolute和 相对定位relative分析
just_learing的博客
03-02 548
position:absolute； position:relative; 绝对定位使用通常是 父级定义position:relative定位， 子级定义position:absolute绝对定位属性， 并且子级使用left或right和top或bottom进行绝对定位。 　元素绝对定位后，会为其后代元素建立一个包含块。且若该绝对定位元素不设置宽度，宽度由内容撑开。 元素绝对定位后，...
绝对定位absolute、相对定位relative（脱离文档流）
Shiny0815的博客
11-26 5843
1、脱离文档流，：父元素高度不再包含文档流高度 position：absolute 子元素 position：relative 父元素， 子元素相对于祖先中的第一个relative定位，用...
相对定位 relative 和 绝对定位 absolute
qq_45886500的博客
08-27 1292
1、absolute：绝对定位，相对最近父元素，原有空间不保留会被其他元素挤占。宽度为文本宽度，且宽度不会影响父元素宽度 2、relative：相对定位，相对自身原来位置，原有空间保留，不会被挤占。宽度为父元素宽度，且宽度会撑大/缩小父元素宽度 Position的属性值有 Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位，如果没有父级元素，就以根节点 Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。 Relative：相对定位
相对（relative）定位和绝对（absolute）定位
qq_39561207的博客
08-18 5164
首先，position的这两个属性一般是不使用的，因为有了浮动，所以我们才需要position属性来实现我们想要的布局。 1.相对定位（relative）：相对于原来位置（原来位置指在文档流中默认的位置，若加上了浮动时，那么这个原来位置就是你设定浮动时的位置）的偏移，原来位置依然占据空间。 （1）box1和box2都没有设置position属性（没有设置float属性时） 效果图：我...
css中绝对定位absolute和相对定位relative
u012841667的专栏
09-28 345
参考：http://blog.163.com/love_heartbreaking/blog/static/124561901201211334714800/ 在用CSS+DIV进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。今天研究了一下，总算有所了解。在此总结一下： 先看下
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 5683
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
css中定位中的absolute和relative是什么意思
09-25
1. `relative`（相对定位）： - 当`position`设置为`relative`时，元素仍然遵循正常的文档流，也就是说，它不会脱离原有的布局上下文。它的兄弟元素会按照原本的顺序依次排列。 - 使用`top`、`right`、`bottom`和`...
相对定位relative、绝对定位absolute、固定定位fixed
qq_57215961的博客
04-25 1万+
注：默认情况下的定位是 postion：static； 使用定位时，常常使用偏移量对位置进行描述：left、right、top、bottom 定位时，使用z-indent可以元素的堆叠顺序，例：z-indent：1，出现在上层（z-index 仅能在定位元素上奏效） 相对定位relative 相对定位的参考物是元素的初使位置 相对定位的特点： 不影响元素本身的特性 元素不脱离文档流 相对于原位置进行偏移 div{ width: 100px;
定位：relative相对定位、absolute绝对定位、fixed固定定位
m0_64460142的博客
04-08 4694
作者有话说:在学定位之前有了解过吗？再没学浮动之前，这些块元素标签会出现在一列，要想实现并排就可以使用浮动float，现在我们可以学习定位，给背景图片或者图片、div、border等添加属性等，有定位在祖先级的、定位在浏览器的，比如说浏览京东页面时，当你拉动网页的时候页面会动，但是会有一个栏目始终保持在那个位置不动，这就是使用的定位，接下来一起看看吧！ 定位使用position static 默认值，没有定位 relative 相对定位 ...
iconfont的使用，阿里矢量图库的引用，配置，改变图标大小和图标颜色
热门推荐
qq_36641107的博客
03-03 7万+
怎么使用iconfont首先找到自己想要的图标，添加到购物车如果你只要一个图标的话，或者确保之后这个项目不需要其他的图标的话，可以直接选择下载代码，但是你有多个图标的话，最好选择添加至项目无论是添加项目还是直接下载代码，下载之后会有一个download.zip包，解压之后的文件如下图，前面四个文件就是官网的demo没有用的，后面五个才是有用的现在请把iconfont.css放在你常用的css文件目...
水平垂直居中的四种方法 div在div中上下左右居中
qq_36641107的博客
03-28 1280
1.设置相对位移，就是在&lt;img&gt;外部的div设置relative，在img本身设置absolute。left：0;right：0;top：0;bottom：0;margin：auto。这样就会自适应居中。2.table-cell就是在&lt;img&gt;外部的div设置display：table-cell，vertical：middle，text-align：center，设置宽高...
css 设置inline-block的时候当元素内容为空的时候位置会变化
qq_36641107的博客
07-19 972
Css的样式问题。   当一个元素设置为inline-block的时候，最好设置vertical-align：top; 也就是说，只要是行内元素，一定会受它影响。 在遇到由vertical-align:baseline造成的各种无法理解的怪异现象，可以直接放大招，废掉基线对齐（比如底线对齐、顶线对齐就很好啊），统一对齐方式。...
flex布局总结
qq_36641107的博客
04-06 135
flex布局就是有元素和容器，设置容器的display：flex；或者是display:inline-flex;flex的容器的属性flex-direction  决定元素的排列方向 决定主轴和交叉轴的位置flex-wrap       决定元素如何换行（排列不下时）flex-flow       flex-direction 和flex-wrap的简写justify-content 元素在主轴上...
山东交通学院在江西2020-2024各专业最低录取分数及位次表.pdf
最新发布
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
理解CSS定位：相对定位与绝对定位详解
"这篇文章主要探讨了CSS中的position属性，特别是相对定位（relative）和绝对定位（absolute）的概念和用法。作者通过实例解释了这两个定位方式的差异，并着重讲解了它们相对于什么进行定位。" 在网页设计中，CSS的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值