CSS初探学习总结提高四

最新推荐文章于 2024-07-11 03:38:21 发布

xj_love

最新推荐文章于 2024-07-11 03:38:21 发布

阅读量170

点赞数

分类专栏：大前端开发移动端+大前端+后台学习整合文章标签：定位布局子绝父相

本文链接：https://blog.csdn.net/xj_love/article/details/83658266

版权

移动端+大前端+后台学习整合同时被 2 个专栏收录

56 篇文章 4 订阅

订阅专栏

大前端开发

10 篇文章 0 订阅

订阅专栏

定位布局，让标签固定到想要的位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位布局</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		
		fieldset {
			margin: 20px 10px;
		}
		ol {
			margin: 0 20px;
		}
		
		.backView {
			width: 613px;
			height: 230px;
			margin: 0 auto;	
			position: relative;
			background-color: pink;
		}
		.leftB,
		.rightB {
			top: 50%;
			margin-top: -18px;
			position: absolute;
		}
		.rightB {
			right: 0;
		}
		.circle {
			width: 65px;
			height: 15px;
			background: rgba(255,255,255,0.4);
			position: absolute;
			bottom: 20px;
			left: 50%;
			margin-left: -32PX;
			border-radius: 6px;
		}
		.circle li {
			width: 9px;
			height: 9px;
			background-color: #B7B7B7;
			border-radius: 50%;
			float: left;
			margin: 2px;
		}
		.circle .current {
			background-color: #f40;
		}
	</style>
</head>
<body>
	<fieldset>
		<legend>定位布局,定位布局后，就有行内块元素的特征</legend>
		<ol>
			<li>
				静态定位 position: static;
				<ol>
					<li>静态定位 -- 对于边偏移无效的</li>
					<li>一般他用来 清除定位的。 一个原来有定位的盒子，不想加定位了，就写这句话</li>
				</ol> 
			</li>
			<li>
				相对定位 position: relative;
				<ol>
					<li>不脱离标准布局</li>
					<li>它的位置还在</li>
				</ol>
			</li>
			<li>
				绝对定位 position: absolute;
				<ol>
					<li>绝对定位完全脱标，不占有位置</li>
					<li>如果自己有定位，父级一定要有定位</li>
					<li>用的最多的是 子绝父相</li>
				</ol>
			</li>
			<li>
				固定定位 position: fixed;
				<ol>
					<li>完全脱标，不占有位置，一般做固定位置</li>
				</ol>
			</li>
		</ol>
	</fieldset>
	<h1>定位Demo</h1>
	<dir class="backView">
		<img src="image/02.jpg">
		<a href="#" class="leftB"><img src="image/left.png"></a>
		<a href="#" class="rightB"><img src="image/right.png"></a>
		<ul class="circle">
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</dir>
	

</body>
</html>