body有无position:relative对相对于其定位的元素的影响

最新推荐文章于 2024-07-23 22:34:05 发布
最新推荐文章于 2024-07-23 22:34:05 发布
阅读量2.6k 收藏 1
点赞数 4
分类专栏： 疑难问题解惑 文章标签： position:absolute
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csm0912/article/details/82659210
版权

给设置了postion:absolute的元素相对于 static 定位以外的第一个父元素进行定位，如果找不到这样的一个父元素，则相对于body定位。但是这时body设置了position了没有设置position是有区别的。
如：

<style>
	body {
		height: 3000px;
		/* position: relative; */
	}
	.son {
		positon: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: red;
	}
</style>
<body>
	<div class="son"></div>
</body>

如果body没有设置除position之外的其他值，则设置了position:absolute;的元素占据的位置由当前窗口大小决定。
如果body设置了position:relative;(或其他非static的值)，则设置了position:absolute;的元素则是整个body的范围。

这个昵称没有被占用吧
关注
专栏目录
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9650
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
css网页布局之定位流,JavaScript
yikenaoguazi的博客
09-21 457
day55一.定位流1.相对定位1.1相对定位的注意点1.2相对对位的应用场景2.绝对定位2.1绝对定位的参考点2.2绝对定位的注意点2.3绝对定位水平居中2.4绝对定位的应用场景3.固定定位4.静态定位5.z-index二.JavaScript1.JavaScript简介1.1javasc组成2.JavaScript引入方式3.JavaScript语法规范4.变量4.1声明变量的语法4.2变量名命名规范4.3 ES6中let5.数据类型与内置方法5.1数值(number)5.2字符串(string)5.3
html body position,html - body {position: relative;} - Stack Overflow
weixin_34365042的博客
06-23 160
I'm looking to position my document with CSS, and I was wondering what the consensus is on setting the body element's position property to relative to establish the initial containing block. Is this c...
当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？
01-05 350
position:absolute元素相对最近的 position 为absolute / relative / fixed的祖先元素（包含块）定位，如果没有这样的祖先元素，则以初始包含块进行定位，而初始包含块并不是以<html>或<body>进行定位的。w3c关于包含块及初始包含块的定义 我们可以做一下测试： <!DOCTYPE html&g...
CSS：position属性
最新发布
ChinaDragon10的博客
07-23 550
CSS：position属性 fixed、absolute、relative
position:absolute 相对body定位
little_kid_pea的博客
10-19 2193
如果父div不设置position设置为relative，仅仅只是子元素position设置为absolute，子元素的top、left等将会相对于整个body，而不是父元素
position的值，relative和absolute分别相对于什么定位
michael8512的博客
09-14 2263
absolute：生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。 fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。 relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。 static： 默认值。没有定位，元素出现在正常的流中 sticky：生成粘性定位的元素
CSS样式中的Position属性值absolute和relative
个人学习博客，不足之处，还望不吝赐教！
10-25 414
absolute、relative
定位(position)详解以及其应用情况(可以取负值)【小米案例】
dwjdj的博客
01-24 2235
静态定位 1.静态定位是标签的默认定位方式，即各个标签在HTML文档流中的默认位置。 2.在静态定位状态下，无法通过边偏移属性(top,bottom,left,right)改变标签位置 3.一般我们需要将固定定位或者绝对定位以及其他定位转化为标准流下的元素时，我们需要将该元素设置为静态定位即可。 position:static; 绝对定位 position:absolute; left:20px...
Position属性四个取值用法和区别
ancartoon的博客
12-14 1977
Position属性四个取值用法和区别 在初学css的过程中常常会碰到设置定位的问题，大多数初学者都是大概明白，如果不好好弄清楚将会给以后的开发带来困难，经过本小菜对其他文章的浏览，自我总结如下： 目录 Position属性四个取值用法和区别 目录 -static -relative -absolute -fixed -relative和absolute的区别 -z-index属性 ·Position属性有以下四个取值： static:静态定位，是position属性的默认值，表示无论怎么设置top、b
2021-10-15CSS学习笔记
weixin_39513719的博客
10-19 308
CSS基础概念注释方法id 和 class 选择器CSS创建背景backgrounds 基础概念 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。 属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 注释方法 CSS注释以 /* 开始, 以 */ 结束 id 和 class 选择器 如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和
CSS: 相对定位、绝对定位、固定定位 的基础知识及使用
无面人的博客
03-30 4795
CSS中相对定位、绝对定位、固定定位 的基础知识及使用
问题解决 | 绝对定位不依据父元素定位而依据body
海胆的博客
09-18 893
需在父元素设置 position：relative;
CSS基本布局----定位
ducaifeng86的博客
11-12 275
前言 CSS有三种基本的布局机制：标准流、浮动和定位。定位就是确定元素的位置，利用top/right/bottom/left这四个偏移属性，可以准确地定义元素框相对于其正常位置应该出现的位置。top的优先级要高于bottom，left的优先级要高于right 一、相对定位：relative 相对定位：相对于元素原有位置的定位。相对定位并没有脱离文档流，因此对于它的位置设定不会影响其它兄弟元素...
CSS的相对定位，绝对定位，固定定位，及元素重叠（层级问题）
m0_49662897的博客
01-04 7628
CSS的相对定位，绝对定位，固定定位，及元素重叠（z-index层级问题）
Position属性之relative用法
热门推荐
evilcry2012的专栏
11-24 2万+
Position属性之relative用法 投稿：mrr 字体：[增加 减小] 类型：转载 时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat
【CSS】CSS四种定位方式
Kangadd的博客
07-10 848
默认值，没有定位自动分配在一个合适的地方这种定位方式用margin来改变位置，对left、top、z-index等设置值无效不脱离标准文档流position：relative不脱离标准文档流不影响周围元素相对于自己的位置进行定位举例：红框中的父元素使用相对了定位，而它的子元素（图片、文字）则使用绝对定位相对定位和绝对定位一般都是一起出现，绝对定位需要相对定位作为参照物对自己定位一般我们会使用相对定位处理父元素，然后再用绝对定位对子元素进行处理，就可以在父元素内将子元素放到任意位置position：absol
position属性对其他元素位置的影响
tomorrow_shoe的博客
03-19 1528
position对文档流和自己原始位置的影响 默认的static和设定的relative都不会脱离文档流。 static占有文档的位置就是显示的位置，它是默认的属性，即原来位置与现在位置相同。 而relative占有的位置是原来的位置，**现在的位置脱离与文档的关系。**这一点非常关键，即它相对于relative计算之后的位置是脱离文档的，跟visibility设置为hiddn类似，只占原来的位置...
能够实现相对于自己定位的属性设置是（ ）。 A position:relative; B position:absolute; C position:fixed; D position:none;
06-12
` 使得元素相对于其正常位置进行定位，不会影响其他元素的布局。你可以使用 `top`, `right`, `bottom`, 或 `left` 属性来设置相对于自身定位的距离。 B. `position:absolute;` 使元素脱离标准文档流，相对于最近的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值