Position

最新推荐文章于 2024-07-25 10:18:55 发布

皮卡乒的皮卡乓

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量87

点赞数 1

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/m0_49682076/article/details/115659448

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Position

static
relative
absolute
fixed
sticky（粘贴？）
元素的重叠（可以搞前后位置）

static

静态定位不会受到top、bottom、left、right的影响。

position: static;

relative

相对正常位置的位置改变

 position: relative;

absolute

相对于最近的父级元素定位，如果没有，就相对于html标签

position: absolute;

fixed

相对于浏览器位置固定，滑动也不影响它的位置

position: fixed;

sticky（粘贴？）

fixed与relative的缝合体
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。
tips必须要由top，bottom，left，right中的一个，否则就单纯是一个relative了。

position: sticky;
top: 0;

元素的重叠（可以搞前后位置）

因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>zlx大帅b</title> 
<style>
img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>

皮卡乒的皮卡乓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Position

Positionstaticrelativeabsolutefixedsticky（粘贴？）元素的重叠（可以搞前后位置）static静态定位不会受到top、bottom、left、right的影响。position: static;relative相对正常位置的位置改变 position: relative;absolute相对于最近的父级元素定位，如果没有，就相对于html标签position: absolute;fixed相对于浏览器位置固定，滑动也不影响它的位置posit
复制链接

扫一扫

专栏目录