CSS Position（定位）

最新推荐文章于 2022-10-17 01:02:28 发布

一只爱好编程的程序猿

最新推荐文章于 2022-10-17 01:02:28 发布

阅读量199

点赞数 1

分类专栏： CSS 文章标签： html 定位 css

本文链接：https://blog.csdn.net/qq_37881565/article/details/108361642

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CSS Position（定位）

position属性指定了元素的定位类型。

position属性的五个值:

static
relative
fixed
absolute
sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。

static定位

HTML元素的默认值，即没有定位，遵循正常的文档流对象。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	div.static {
    	position: static;
    	border: 3px solid red;
	}
</style>
</head>
<body>
	<h2>position: static;</h2>
	<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
	<div class="static">
		该元素使用了 position: static;
	</div>

</body>
</html>

效果图如下所示:

fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	p.pos_fixed
	{
		position:fixed;
		top:30px;
		right:5px;
	}
</style>
</head>
<body>

	<p class="pos_fixed">Some more text</p>
	<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
	<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

效果图如下所示：

注意：Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

relative定位

相对定位元素的定位是相对其正常位置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	h2.pos_left
	{
		position:relative;
		left:-20px;
	}

	h2.pos_right
	{
		position:relative;
		left:20px;
	}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

效果图如下所示：

注意：移动相对定位元素，但是它所占的空间不会改变的。

absolute定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么他的位置相对于<html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	h2
	{
		position:absolute;
		left:100px;
		top:150px;
	}
</style>
</head>

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

</html>

效果图如下所示:

注意： absolute定位使元素的位置和文档流无关，因此不占据空间。absolute定位的元素和其他元素重叠。

sticky定位

Position：sticky；基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在position： relative与position：fixed定位之间切换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	div.sticky {
		 position: -webkit-sticky;
		position: sticky;
		top: 0;
		padding: 5px;
		background-color: #cae8ca;
		border: 2px solid #4CAF50;
	}
</style>
</head>
<body>

	<p>尝试滚动页面。</p>
	<div class="sticky">我是粘性定位!</div>

	<div style="padding-bottom:2000px">
	  <p>滚动我</p>
	  <p>来回滚动我</p>
	  <p>滚动我</p>
	  <p>来回滚动我</p>
	  <p>滚动我</p>
	  <p>来回滚动我</p>
	</div>

</body>
</html>

效果图如下所示：

一只爱好编程的程序猿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS Position（定位）

CSSPosition（定位）position属性指定了元素的定位类型。position属性的五个值:static relative fixed absolute sticky元素可以使用的顶部，底部，左侧和右侧属性定位。static定位HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到top，bottom，left，right影响。<!DOCTYPE html><html><head><m.
复制链接

扫一扫