CSS中position属性详解

最新推荐文章于 2024-04-19 19:05:45 发布

Share，Keep Life ^_^

最新推荐文章于 2024-04-19 19:05:45 发布

阅读量294

点赞数 1

分类专栏： CSS 文章标签： HTML CSS position 定位

本文链接：https://blog.csdn.net/weixin_44306005/article/details/100007838

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS中的position属性主要是用来对一个元素进行定位的，包含四个常用的属性值：static、absolute、relative、fixed。

1.static

默认值，即没有定位，遵循正常的文档流对象。设置了static值之后，在设置top、left、right、bottom、z-index都不起作用。

2.absolute

绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。元素的位置通过 left、top、right、bottom 属性进行设置。

3.relative

相对定位，定位是相对于正常元素的位置。受 left、top、right、bottom 属性的影响。

4.fixed

固定定位，相对于浏览器窗口的位置，即使浏览器滚动，位置也不会变。同样受left、top、right、bottom 属性的影响。

5.代码示例

<!DOCTYPE html>
<html>
<head>
<title>position定位</title>
<meta charset="utf-8">
<style type="text/css">
div{
	background-color: #7FFFAA;
	width:320px;
	height: 50px;
	margin-bottom: 20px;
}
#d1{
	position:static;
}
#d2{
	z-index:20px;
	position:absolute;
	background: red;
	left: 50px;
}
#d3{
	padding-top: 40px;
}
#d4{
	position: relative;
	left: 60px;
}
#d5{
	position: fixed;
	left: 80px;
}
</style>
</head>
<body>
	<div id="dd">我是正常位置，即没有设置position的位置</div>
	<div id="d1">我是position:static的位置</div>
	<div id="d2">我是position:absolute的位置</div>
	<div id="d3">我是正常位置，用来凸显absolute的位置</div>
	<div id="d4">我是position:relative的位置</div>
	<div id="d5">我是position:fixed的位置</div>
	<div style="height: 900px;background: white;"></div>
</body>
</html>

效果如下图：

Share，Keep Life ^_^

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中position属性详解

CSS中的position属性主要是用来对一个元素进行定位的，包含四个常用的属性值：static、absolute、relative、fixed。1.static默认值，即没有定位，遵循正常的文档流对象。设置了static值之后，在设置top、left、right、bottom、z-index都不起作用。2.absolute绝对定位，相对于最近的已定位父元素，如果元素没有已定位的父...
复制链接

扫一扫