HTML5 day9、10相对定位、绝对定位、锚点

最新推荐文章于 2024-01-14 22:49:02 发布

鲸是鲸鱼的鲸

最新推荐文章于 2024-01-14 22:49:02 发布

阅读量248

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44195250/article/details/89914465

版权

Html5 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

position 定位属性，检索对象的定位方式；
语法：position：static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/initial(最初的)
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据《浏览器》进行定位，而其层叠通过z-index属性定义
3、relative ：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义.
4、fixed：(固定定位)，类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流；
5、inherit:规定元素的定位方式继承父元素的position的属性值。
注：任何元素设置过脱离文档流的定位方式时，就有了块元素的显示特性
6、sticky：(粘性定位)
粘性定位，该定位是相对定位和固定定位的集合，在跨越特定阈值前为相对定位，之后为固定定位。
7、unset(未设置，是inherit和initial的结合)
当当前属性有继承性时，他解析的是继承(inherit)所得来的属性值，如果当前属性没有继承，解析的是初始（initial）值。

Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style><!--子绝父相-->
			*{padding: 0;margin: 0;}
			.er{width: 550px;height: 393px;margin: 150px  auto 0;}
			.xc{float: left;width: 100px;height: 75px;border:2px solid gray;position: relative;}
			img{width: 100px;height: 75px;position: absolute;}
			.er>.xc :hover{width: 300px;height: 275px;top:-100px;left:-100px;z-index: 1;}
		</style>
	</head>
	<body>
		<div class="er">
		<div class="xc"><img src="photo01.jpg" alt=""></div>
		<div class="xc"><img src="photo02.jpg" alt=""></div>
		<div class="xc"><img src="photo03.jpg" alt=""></div>
		<div class="xc"><img src="photo04.jpg" alt=""></div>
		<div class="xc"><img src="photo05.jpg" alt=""></div>
		<div class="xc"><img src="photo06.jpg" alt=""></div>
		<div class="xc"><img src="photo07.jpg" alt=""></div>
		<div class="xc"><img src="photo08.jpg" alt=""></div>
		<div class="xc"><img src="photo09.jpg" alt=""></div>
		<div class="xc"><img src="photo10.jpg" alt=""></div>
		<div class="xc"><img src="photo11.jpg" alt=""></div>
		<div class="xc"><img src="photo12.jpg" alt=""></div>
		<div class="xc"><img src="photo13.jpg" alt=""></div>
		<div class="xc"><img src="photo14.jpg" alt=""></div>
		<div class="xc"><img src="photo15.jpg" alt=""></div>
		<div class="xc"><img src="photo16.jpg" alt=""></div>
		<div class="xc"><img src="photo17.jpg" alt=""></div>
		<div class="xc"><img src="photo18.jpg" alt=""></div>
		<div class="xc"><img src="photo19.jpg" alt=""></div>
		<div class="xc"><img src="photo20.jpg" alt=""></div>
		</div>
	</body>
</html>

									<!DOCTYPE html>
								<html>
							<head>
						<meta charset="utf-8">
					<title></title>
				<style>
		*{margin: 0;padding: 0;}
			.er{width:500px;height: 386px;position: relative;}
				span{width: 27px;
					height: 27px;
						display: block;
							background:rgba(0,0,0,0.5);
								float: left;
									margin-right: 10px;
										text-align: center;
											line-height: 27px;}
			
											.et{position: absolute;
										bottom:0;right:0;
									margin-bottom:20px;}
								span{color: #FFFFFF;}
							</style>
						</head>
					<body>
				<div class="er"><img src="img07.jpg">
					<div class="et">
						<span>1</span>
							<span>2</span>
								<span>3</span>
									<span>4</span>
								</div>
							</div>
						</body>
				</html>

									<!DOCTYPE html>
								<html>
							<head>
						<meta charset="utf-8">
					<title></title>
				<style>
		*{margin: 0;padding: 0;}
			.er{width:500px;height: 386px;position: relative;}
			.uj{overflow: hidden;width:500px;height: 386px;}
				span{width: 27px;
					height: 27px;
						display: block;
							background:rgba(0,0,0,0.5);
								float: left;
									margin-right: 10px;
										text-align: center;
											line-height: 27px;}
			
											.et{position: absolute;
										bottom:0;right:0;
									margin-bottom:20px;}
								span{color: #FFFFFF;}
							</style>
						</head>
					<body>
				<div class="er">
					<div class="uj"><img id="rf1" src="img04.jpg">
								<img id="rf2" src="img05.jpg" alt="">
								<img id="rf3"src="img06.jpg" alt="">
								<img id="rf4"src="img07.jpg" alt=""></div>
					<div class="et">
						<a href="#rf1"><span>1</span></a>
						<a href="#rf2">	<span>2</span></a>
						<a href="#rf3">	<span>3</span></a>
						<a href="#rf4">	<span>4</span></a>
								</div>
							</div>
						</body>
					</html>

在这里插入图片描述

鲸是鲸鱼的鲸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 day9、10相对定位、绝对定位、锚点

position 定位属性，检索对象的定位方式；语法：position：static /absolute/relative/fixed/inherit/sticky/unset(未设置是inherit和initial的结合)/initial(最初的)取值：1、static：默认值，无特殊定位，对象遵循HTML原则；2、absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/...
复制链接

扫一扫