position中absolute、relative、fixed、static

最新推荐文章于 2022-07-22 21:50:12 发布

susie30

最新推荐文章于 2022-07-22 21:50:12 发布

阅读量289

点赞数

分类专栏： CSS 文章标签： CSS position absolute

本文链接：https://blog.csdn.net/susie30/article/details/79627612

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

position样式的四个取值
absolute	相对于非static的最靠近的祖先元素进行定位。会忽略eft、top、right、bottom和z-index属性，只有margin起作用
relative	相对于自己在正常文档流的位置进行定位。margin+top一起起作用
fixed	相对于浏览器窗口进行定位。元素未滚动，在当前可视区域他的top值不生效，只有margin生效，滚动起来后margin失效，top值生效
static	采用正常文档流定位（默认）。margin+top一起起作用

说明：非static元素的位置需要采用样式属性top、left、bottom、right进行设置，取值可为负值。这四个样式属性对static不起作用。

absolute

当定位元素的包含块都是static时，其相对于初始包含块（html的包含块/整个html网页）定位

<html>
<head>
<style type="text/css">
 	html{
		background-color:red;
		border:solid 1px black;
		margin:20px 40px;
	}
	body{
		background-color:blue;
		border:solid 1px black;
		margin:20px 40px;
	}
	div{
		background-color:black;
		border:solid 1px black;
		margin:50px 50px;
		height:2000px;
	}
	h2{
		position:absolute;
		background-color:green;
		left:0px;
		top:0px;
	}
	
</style>
</head>

<body>
<div>
	<h2>position-absolute</h2>
</div>
</body>

</html>

-------------------------------------小插曲----------------------------------------------------------------

因为好奇初始包含块和html的关系，所以分别设了html和body的border、margin、和background-color。

结果如下：

从下图看html设了margin后border不和视口（viewport）重合，但其背景颜色并不只是在border以内，而是填满整个网页。

当去掉html的样式属性，则body的背景颜色也是填满整个网页，而不是在border以内。

------------------------------------------小插曲结束-------------------------------------------------------

绝对定位元素随网页滚动而滚动

当绝对定位元素的最近包含块div设为relative时，该绝对定位元素相对于div定位

relative

<div>
	<h2 id="normal">position-absolute</h2>
	<h2 id="toright">position-absolute</h2>
	<h2 id="toleft">position-absolute</h2>
</div>

        h2{
		background-color:green;
	}
	#toleft{
		position:relative;
		left:-20px;
	}
	#toright{
		position:relative;
		left:20px;
	}

fixed

相对于浏览器窗口固定，不会随着网页的滚动而滚动，多用于广告之类。

static

文档流的正常位置

例题：

以下代码，分别给节点 #box 增加如下样式，问节点 #box 距离 body 的上边距是多少？

<body style=”margin:0;padding:0”>
    <div id=”box” style=”top:10px;margin:20px 10px;”>
    </div>
</body>

如果设置 position: static ; 则上边距为 20 px

如果设置 position: relative ; 则上边距为 30 px

如果设置 position: absolute ; 则上边距为 30 px

如果设置 position: sticky ; 则滚动起来上边距为 10 px

susie30

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position中absolute、relative、fixed、static

position样式的四个取值absolute相对于非static的最靠近的祖先元素进行定位。会忽略eft、top、right、bottom和z-index属性，只有margin起作用relative相对于自己在正常文档流的位置进行定位。margin+top一起起作用fixed相对于浏览器窗口进行定位。元素未滚动，在当前可视区域他的top值不生效，只有margin生效，滚动起来后margin失效，...
复制链接

扫一扫