Position总结

最新推荐文章于 2022-08-01 10:46:00 发布

翘麦力

最新推荐文章于 2022-08-01 10:46:00 发布

阅读量226

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/Candx2/article/details/108572585

版权

本文详细解析了CSS中的五种定位方式：static、relative、absolute、fixed和sticky，以及z-index属性的作用。通过实例展示了relative和absolute定位的具体应用，帮助读者深入理解各定位方式的特点和使用场景。

摘要由CSDN通过智能技术生成

Position(定位)参数总结

static：默认值。此时4个定位偏移属性不会被应用。

relative（相对定位）：参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。移动相对定位元素，但它原本所占的空间不会改变。

absolute（绝对定位）：偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。元素位置与文档流无关，不占据空间，与其他元素重叠

fixed（粘性定位）：偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

z-index（堆叠）：确认堆叠顺序，默认最后出现的元素出现在最上头，z-index可改变其顺序。

relative实例参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>相对定位</title> 
<style>
h2
{
	position:relative;
	top:100px；
}
</style>
</head>

<body>
<h2>这是一个相对定位了的标题</h2>
<p>相对定位，原位置依然存在</p>
</body>

</html>

————————————————————————————————————————
在这里插入图片描述

absolute实例参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>绝对定位</title> 
<style>
h2
{
	position:absolute;
	top:100px；
}
</style>
</head>`

<body>
<h2>这是一个相对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px的元素。.</p>
</body>

</html>