轮播图区域定位

最新推荐文章于 2022-10-25 19:08:25 发布

clqxmt

最新推荐文章于 2022-10-25 19:08:25 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：轮播图区域的定位不会随着浏览器的缩小而发生变化

本文链接：https://blog.youkuaiyun.com/weixin_43755513/article/details/97542946

CSS 专栏收录该内容

68 篇文章

订阅专栏

本文探讨如何实现轮播图区域的固定定位，确保其在浏览器尺寸变化时保持不变形，提供稳定展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>banner区域定位</title>
		
		<style>
			*{margin:0;padding:0;}
			body{height:10000px;}
			.top1{height:100px;background: #008000;}
			.top2{height:100px;background:#008A45;}
			.nav{/*width:100%;*//*设置定位后如果宽度没有设置，此时其宽度为内容的宽度，如果需要
			宽度为100%，需要手动添加*/height:100px;background:#009966;
			position:sticky/*粘性定位*/;z-index:100;top:0;}
			.banner{height:380px;background:#f00;overflow:hidden/*图片
			分辨率较大会出现滚动条需要把banner以外的图片裁切掉*/; position:relative;}
			.banner .pic{height:380px;width:1900px;background:#ff0;
			position:absolute;/*使用相对定位使其不脱离文档流，可以使banner1在banner中在最左边显示。
			正常显示,如果使用absolute会使其脱离文档流，导致banner1在图片下面显示*/left:50%;margin-left:-950px;/*使图片的和
			浏览器的左边距离为50%，然后设置左边距为其自身宽度的一般使其居中显示*/}
			.banner .pic img{width:100%;}
			.banner1{width:1000px;height:380px;background:#ff0;
			position:relative;/*因为设有margin:auto;所以使用相对定位*/
			margin:10px auto;}
			
			.banner1 .left{width:269px;height:343px;background:#f00;
			float:left;}
			.banner1 .right{float:right;width:269px;height:343px;
			background:#00CCFF;}
		</style>
	</head>
	<body>
		<div class="top1">1</div>
		<div class="top2">2</div>
		<div class="nav">3</div>
      <div class="banner">
      	<div class="pic">
      		<img src="img/banner.jpg" alt="" />
      	</div>
        <div class="banner1">
        	<div class="left"></div>
        	<div class="right"></div>
        </div>
      </div>
		
		
	</body>
</html>

上下两个一样

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0; padding: 0;}
			body{height: 2000px;}
			.top{height: 100px; background: #0f0;}
			.two{height:50px; background: #999;}
			.three{height: 50px; background: #0088CC; position: sticky; width: 100%; top: 100px; z-index: 100;}
			
			.banner{height: 380px; background: #f00; overflow: hidden; position: relative;}
			.pic{position: absolute; width:1900px; height: 380px; left: 50%; margin-left: -950px;}
			.banner .pic img{width:100%;}
			.an{height: 345px; width: 1000px; margin: 16px auto;  position: relative;}
			.an div{width:270px; height: 345px; background: #fff;} 
			
			.main{height:200px; background: #ff0;}
			.right{width:100px; height: 200px; position: fixed; right: 0; top: 300px; background: #F15A23; right: -50px; transition: 1s;/*transition过渡*/}
			.right:hover{right: 0;}
		</style>
	</head>
	<body>
		<div class="top">1</div>
		<div class="two">2</div>
		<div class="three">3</div>
		<div class="banner">
			<div class="pic">
				<img src="banner.jpg">
			</div>
			<div class="an">
				<div></div>
			</div>
		</div>
		<div class="main"></div>
		
		<div class="right">
			
		</div>
	</body>
</html>