WEB前端代码：定位样式、定位类型、相对定位的实际用途、relative相对下的z轴、css3边框样式、定位在正中间

最新推荐文章于 2025-12-05 12:56:56 发布

原创最新推荐文章于 2025-12-05 12:56:56 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WEB

Web 专栏收录该内容

80 篇文章

订阅专栏

1、定位样式:

1.四个坐标
1)left top 左上角
2)right top 右上角
3)left bottom 左下角
4)right bottom 右上角

.img{
			width:100px;
			height:100px;
			background: #888;
			position: absolute;
			left:100px;
			top:100px;
		}

		.img img{
			display: block;
		}

2、定位类型

1)绝对定位
position:absolute;

2)固定定位
position:fixed;

3)相对定位
position:relative;
固定定位

position: fixed;
			left:  0px;
			top:0px;

absolute绝对定位特效

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面</title>
	<style>
		*{
			font-family: 微软雅黑;
			margin:0px;
			padding:0px;
		}

		.img{
			width:100px;
			height:100px;
			background: #888;
			position: absolute;
			left:  0px;
			top:0px;
		}

		.img img{
			display: block;
		}
	</style>
	<script src='/bootstrap4/jquery.min.js'></script>
</head>
<body>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<div class='img'>
		<img src="/img/sd.png" width="100px">	
	</div>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaaa</h1>

</body>
<script>
winh=$(window).height();
imgh=100;
delh=winh-imgh;

$('.img').click(function(){
	s=0;
	v=20;

	setInterval(function(){
		s+=v;

		if(s>=delh){
			s=delh;
			v=-v;
		}

		if(s<=0){
			s=0;
			v=-v;
		}
		$('.img').css({'top':s+'px'});
	},100);
});
</script>
</html>

相对定位

position: relative;
			left:  100px;
			top:100px;

3、相对定位的实际用途

父:relative
子:absolute(他们的坐标系是父的左上角)

.div1{
			width:1000px;
			height:500px;
			background: #888;
			margin:0 auto;
			position: relative;
		}

		.div2{
			width:100px;
			height:100px;
			background: #f00;
			position: absolute;
			top:0px;
			left:0px;
		}

		.div3{
			width:100px;
			height:100px;
			background: #00f;
			position: absolute;
			top:100px;
			left:100px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2"></div>	
		<div class="div3"></div>
	</div>

4、定位的高(z轴)

z-index:1(默认的是0)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面</title>
	<style>
		*{
			font-family: 微软雅黑;
			margin:0px;
			padding:0px;
		}

		.div1{
			width:90px;
			height:90px;
			background: #888;
			position: absolute;
			top:0px;
			left:0px;
			z-index:1;
		}

		.div2{
			width:80px;
			height:80px;
			background: #f00;
			position: absolute;
			top:0px;
			left:0px;
			z-index:2;
		}

		.div3{
			width:70px;
			height:70px;
			background: #00f;
			position: absolute;
			top:0px;
			left:0px;
			z-index:3;
		}
	</style>
</head>
<body>
	<div class='div1'></div>	
	<div class='div2'></div>	
	<div class='div3'></div>	
</body>
</html>

5、relative相对下的z轴

.div1{
			width:90px;
			height:90px;
			background: #888;
			position: relative;
			top:50px;
			left:0px;
			z-index:1;
		}

		.div2{
			width:80px;
			height:80px;
			background: #f00;
			position: relative;
			top:0px;
			left:0px;
			z-index:2;
		}

6、css3边框样式:

1.border-radius
10px 4个圆角
10px 20px 对角圆角
10px 20px 30px 3个圆角
10px 20px 30px 40px 顺时针4个圆角

border-radius圆角

.div1{
			margin:50px;
			width:256px;
			height:256px;
			background: #888;
			border-radius:128px;
		}	
	</style>
</head>
<body>
	<div class="div1">
		<img src="/img/sd.png">
	</div>

两个对角圆角

border-radius:10px 50px;

顺时针4个圆角

border-radius:50px 50px 128px 128px;

7、定位在正中间

.div1{
			width:256px;
			height:256px;
			background: #888;
			border-radius:50px;
			position: absolute;
			top:50%;
			left:50%;
			margin-left:-128px;
			margin-top:-128px;
		}