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

最新推荐文章于 2024-07-23 22:34:05 发布

这个昵称没有被占用吧

最新推荐文章于 2024-07-23 22:34:05 发布

阅读量2.6k

点赞数 4

分类专栏：疑难问题解惑文章标签： position:absolute

本文链接：https://blog.csdn.net/csm0912/article/details/82659210

版权

疑难问题解惑专栏收录该内容

30 篇文章 0 订阅

订阅专栏

给设置了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的范围。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

这个昵称没有被占用吧

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

女朋友要我教她CSS，我就写了这一篇长文，感动哭了？

超逸の学习技术博客

05-30

9658

女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？

css网页布局之定位流,JavaScript

yikenaoguazi的博客

09-21

460

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

163

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

556

CSS：position属性 fixed、absolute、relative

position:absolute 相对body定位

little_kid_pea的博客

10-19

2196

如果父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

2243

静态定位 1.静态定位是标签的默认定位方式，即各个标签在HTML文档流中的默认位置。 2.在静态定位状态下，无法通过边偏移属性(top,bottom,left,right)改变标签位置 3.一般我们需要将固定定位或者绝对定位以及其他定位转化为标准流下的元素时，我们需要将该元素设置为静态定位即可。 position:static; 绝对定位 position:absolute; left:20px...

Position属性四个取值用法和区别

ancartoon的博客

12-14

1982

Position属性四个取值用法和区别在初学css的过程中常常会碰到设置定位的问题，大多数初学者都是大概明白，如果不好好弄清楚将会给以后的开发带来困难，经过本小菜对其他文章的浏览，自我总结如下：目录 Position属性四个取值用法和区别目录 -static -relative -absolute -fixed -relative和absolute的区别 -z-index属性 ·Position属性有以下四个取值： static:静态定位，是position属性的默认值，表示无论怎么设置top、b

2021-10-15CSS学习笔记

weixin_39513719的博客

10-19

309

CSS基础概念注释方法id 和 class 选择器CSS创建背景backgrounds 基础概念 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。注释方法 CSS注释以 /* 开始, 以 */ 结束 id 和 class 选择器如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和

问题解决 | 绝对定位不依据父元素定位而依据body

海胆的博客

09-18

896

需在父元素设置 position：relative;

Position属性之relative用法

热门推荐

evilcry2012的专栏

11-24

2万+

Position属性之relative用法投稿：mrr 字体：[增加减小] 类型：转载时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat

CSS基本布局----定位

ducaifeng86的博客

11-12

277

前言 CSS有三种基本的布局机制：标准流、浮动和定位。定位就是确定元素的位置，利用top/right/bottom/left这四个偏移属性，可以准确地定义元素框相对于其正常位置应该出现的位置。top的优先级要高于bottom，left的优先级要高于right 一、相对定位：relative 相对定位：相对于元素原有位置的定位。相对定位并没有脱离文档流，因此对于它的位置设定不会影响其它兄弟元素...

ASP.NET Core 中不能多次读取 Request.Body和设置Position的问题

carcarrot的博客

07-25

1464

Asp.Net Core与以往Asp.Net在对待HttpContext.Request的Steam（在.Net Core中是属性Body，.Net中对应的属性是InputStream）的处理机制有点不同，Asp.NetCore的Request.Body默认情况下不允许 Request.Body.Position=0 ，这就意味着只能读取一次，要想多次读取，在 ASP.NET Core 2.1 中提供的解决方法是在第一次读取前通过Request.EnableRewind()【需要引用命名空间Micro...

position属性对其他元素位置的影响

tomorrow_shoe的博客

03-19

1528

position对文档流和自己原始位置的影响默认的static和设定的relative都不会脱离文档流。 static占有文档的位置就是显示的位置，它是默认的属性，即原来位置与现在位置相同。而relative占有的位置是原来的位置，**现在的位置脱离与文档的关系。**这一点非常关键，即它相对于relative计算之后的位置是脱离文档的，跟visibility设置为hiddn类似，只占原来的位置...

使用translate对元素造成类似position:relative的影响

兜里有米

09-28

2656

小白一个，总结一下遇到的问题。一个小demo，它实现的功能是拖拽第1个div当它触碰到第2个div时，第2个div背景色改变<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function (

能够实现相对于自己定位的属性设置是（）。 A position:relative; B position:absolute; C position:fixed; D position:none;

06-12

` 使得元素相对于其正常位置进行定位，不会影响其他元素的布局。你可以使用 `top`, `right`, `bottom`, 或 `left` 属性来设置相对于自身定位的距离。 B. `position:absolute;` 使元素脱离标准文档流，相对于最近的...