定位

最新推荐文章于 2022-10-20 20:15:31 发布

婉菡

最新推荐文章于 2022-10-20 20:15:31 发布

阅读量175

点赞数

分类专栏：前端文章标签：定位

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113244068

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位</title>
		<!--
		  标准文档流:页面元素按照从上到下,从左到右的标准顺序进行布局
          position实现页面元素的定位
            static:默认值  没有定位
            relative:相对定位
               top left right bottom实现偏移    偏移量支持负数,向反方向移动
                                       相对定位不脱离标准流,原来位置物体保持不变,后边元素不能占用原物体位置
            absolute:绝对定位
                                       子元素相对于父元素进行定位  top left right bottom实现偏移
                                        前提:父元素必须支持相对定位或者绝对定位
                                        如果父元素不支持定位,则子元素会相对于body进行定位.因为body默认支持相对定位
                                        绝对定位脱离标准流,后面元素可以占用它原来的位置
            fixed:固定定位
                                        脱离标准文档流
            z-index:设定层叠效果
            opacity:透明度
        -->
        <style>
        	#div1{
        		width: 150px;
        		height: 150px;
        		background-color: #FFC0CB;
        		position: relative;/*相对定位*/
        		left: 50px;/*往右移动  若负数则向反方向移动*/
        		top: 100px;/*往下移动*/
        	}
        	#div2{
        		width: 150px;
        		height: 150px;
        		background-color: #9ACD32;
        	}
        	#div3{
        		width: 500px;
        		height: 60px;
        		border: 1px solid #0000FF;
        		position: relative;
        	}
        	#div31{
        		width: 200px;
        		height: 50px;
        		border: 1px solid #008000;
        		position: absolute;
        		top: 5px;
        		left: 30px;
        	}
        	#div32{
        		width: 100px;
        		height: 50px;
        		border: 1px solid #800080;
        		position: absolute;
        		top: 5px;
        		right: 30px;
        	}
        	#div4{
        		width: 80px;
        		height: 80px;
        		text-align: center;/*内容水平居中*/
        		line-height: 80px;/*内容垂直居中*/
        		border: 1px solid green;
        		position: relative;
        	}
        	#div41{
        		width: 20px;
        		height: 20px;
        		border-radius: 10px;/*圆球*/
        		background-color: red;
        		text-align: center;/*内容水平居中*/
        		line-height: 20px;/*内容垂直居中*/
        		position: absolute;
        		top: -10px;
        		right: -10px;
        	}
        	#div5{
        		width: 100%;
        		height: 30px;
        		background-color: palegreen;
        		text-align: center;/*内容水平居中*/
        		line-height: 30px;/*内容垂直居中*/
        	    position:fixed;
        	    bottom: 0px;
        	}
        	#div7{
        		width: 80px;
        		height: 80px;
        		background-color: #006400;
        		position: relative;
        	}
        	#div71{
        		width: 40px;
        		height: 40px;
        		background-color: #98FB98;
        		position: absolute;
        		top: 20px;
        		left: 10px;
        		z-index: -1;
        	}
        	
        	#div9{
        		width: 20px;
        		height: 20px;
        		background-color: #006400;
        		position: relative;
        		opacity: 0.2;
        	}
        </style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3">
			<div id="div31"></div>
			<div id="div32"></div>
		</div>
		<br /><br /><br /><br /><br />
		
		<div id="div4">
			微信
			<div id="div41">2</div>
		</div>
		
		<div id="div5">footer</div>
		<div id="div6">foooooo</div>
		
		<div id="div7">
			<div id="div71"></div>
		</div>
		
		<div id="div9"></div>
	</body>
</html>

在这里插入图片描述
练习
demo05ex1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大风车啊转悠悠</title>
		<style>
			#div1{
				width: 50px;
				height: 50px;
				background-color: #800080;
				position: relative;
				top: 300px;
				left: 500px;
			}
			#div2{
				width: 50px;
				height: 50px;
				background-color: yellow;
				position: absolute;
				left: 50px;
			}
			#div3{
				width: 50px;
				height: 50px;
				background-color: #008000;
				position: absolute;
				right: 50px;
			}
			#div4{
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				bottom: 50px;
			}
			#div5{
				width: 50px;
				height: 50px;
				background-color: aqua;
				position: absolute;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2"></div>
			<div id="div3"></div>
			<div id="div4"></div>
			<div id="div5"></div>
		</div>
	</body>
</html>

在这里插入图片描述
demo05ex2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#a1{
				height: 500px;
				width: 500px;
				background-image: url(img/03.jpg);
				background-size: 500px;
				position: relative;
			}
			#a2{
				position: relative;
				left: 340px;
				top: 180px;
			}
		</style>
	</head>
	<body>
		<div id="a1">
			<div id="a2">
				<img src="img/02.jpg" width="200px" height="350px"/>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

婉菡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>定位</title> <!-- 标准文档流:页面元素按照从上到下,从左到右的标准顺序进行布局 position实现页面元素的定位 static:默认值没有定位 relative:相对定位 t
复制链接

扫一扫

专栏目录