CSS

最新推荐文章于 2024-06-15 06:12:02 发布

月光派件中。

最新推荐文章于 2024-06-15 06:12:02 发布

阅读量118

点赞数

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108650837

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

定位 position

静态定位 static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

<!DOCTYPE html>
<html>
	<head>
		<title>定位</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div.static{
				position:static;
				top:20px;
				width:200px;
				height:200px;
				border:1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="static">lkjglkajlk</div>
	</body>
</html>

固定定位 fixed

Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

<!DOCTYPE html>
<html>
	<head>
		<title>定位</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div.fixed{
				width:1000px;
				height:800px;
				background-color:green;
			}
			p{
				position:fixed;
				top:20px;
				right:20px;
			}
		</style>
	</head>
	<body>
		<div class="fixed">lkjglkajlk</div>
		<p>hahahaha</p>
	</body>
</html>

相对定位 relative

相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。

<!DOCTYPE html>
<html>
	<head>
		<title>定位</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div{
				width:300px;
				height:300px;
				border:1px solid red;
			}
			
			.relative1{
				position:relative;
				right:300px;
				top:300px;
				background-color:pink;
				
			}
			.relative2{
				background-color:cyan;
			}
		</style>
	</head>
	<body>
		<div class="relative1">盒子1</div>
		<div class="relative2">盒子2</div>
	</body>
</html>

绝对定位 absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

<!DOCTYPE html>
<html>
	<head>
		<title>定位</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div{
				width:300px;
				height:300px;
				border:1px solid red;
			}
			.absolute1{
				background-color:pink;
				position:absolute;
				
			}
			.absolute2{
				background-color:cyan;
				position:absolute;
			}
		</style>
	</head>
	<body>
		<div class="absolute1">盒子1</div>
		<div class="absolute2">盒子2</div>
	</body>
</html>

粘性定位 sticky

<!DOCTYPE html>
<html>
	<head>
		<title>定位</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div.sticky1{
				border:1px solid red;
				background-color:pink;
				height:50px;
				width:300px;
				line-height:50px;
				text-align:center;
				position:sticky;
				top:10px;
			}
			div.sticky2{
				padding-bottom:1000px;
			}
		</style>
	</head>
	<body>
		<div class="sticky1">粘性定位之小猪进圈</div>
		<div class="sticky2">
			<p>1只猪</p>
			<p>2只猪</p>
			<p>3只猪</p>
			<p>4只猪</p>
			<p>5只猪</p>
			<p>6只猪</p>
			<p>7只猪</p>
		</div>
	</body>
</html>

超出隐藏 overflow

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

月光派件中。

关注

0
点赞
踩
0

收藏

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

定位 position静态定位 staticHTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。<!DOCTYPE html><html> <head> <title>定位</title> <meta charset="utf-8"/> <style type="text/css"> div.static{
复制链接

扫一扫