让小盒子在大盒子中水平居中，固定定位

最新推荐文章于 2024-05-31 18:26:22 发布

boxyuan

最新推荐文章于 2024-05-31 18:26:22 发布

阅读量1.9k

点赞数

分类专栏： Html+CSS 文章标签： html css 前端 ui

本文链接：https://blog.csdn.net/boxyuan/article/details/76326373

版权

Html+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*
			{
				margin: 0;
				padding: 0;
			}
			.big
			{
				width:600px;
				height: 300px;
				background-color: powderblue;
				margin: 0 auto;
				position: relative;
				
			}
			.small
			{
				width:100px ;
				height:30px;
				background-color: pink;
				position: absolute;
				bottom:5px ;
				left:50% ;
				margin-left:-50px;

			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="small">
				
			</div>			
		</div>
	</body>
</html>

固定定位：

position:fixed ，配合trbl来使用

特点：

不管页面有多大，trbl永远是相对于浏览器边框来的

固定定位的元素脱离了标准流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*
			{
				margin: 0;
				padding: 0;
			}
			.father
			{
				width: 500px;
				border: 1px solid pink;
				margin: 0 auto;
				margin-top: 100px;
				
			}
			.iimag
			{
				width: 170px;
				height: 250px;
				background-color: powderblue;
				position: fixed;
				top: 100px;
				left: 20px;
			}
			.iimagr
			{
				width: 170px;
				height: 250px;
				background-color: powderblue;
				position: fixed;
				top: 100px;
				right: 20px;
			}
			
			 
		</style>
	</head>
	<body>
		<div class="father">
			 这是一条新闻<br />	
			 这是一条新闻<br />	
			 这是一条新闻<br />	
			 这是一条新闻<br />	
			 这是一条新闻<br />	
			 这是一条新闻<br />	
			 
		</div>
		<div class="iimag">左广告</div>
		<div class="iimagr">右广告</div>
	</body>
</html>

boxyuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
让小盒子在大盒子中水平居中，固定定位

* { margin: 0; padding: 0; } .big { width:600px; height: 300px; background-color: powderblue; margin: 0 auto; position: relative; } .small { w
复制链接

扫一扫

专栏目录