CSS样式定位

最新推荐文章于 2023-10-13 21:06:51 发布

须佐能乎！

最新推荐文章于 2023-10-13 21:06:51 发布

阅读量393

点赞数 1

分类专栏： HTML CSS 文章标签： html css css样式定位 z-index属性

本文链接：https://blog.csdn.net/qq_34416191/article/details/51647102

版权

HTML 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

<html>
	  <head>
	  	  <title>CSS样式定位</title>
	  	  <!--定位：定义元素的位置-->
	  	  <!--定位有三种方式：普通流（默认），绝对定位，相对定位-->
	  	  
	  	  
	  	  <style type="text/css">
	  	  	  /*绝对定位：以网页坐标系为基准进行定位*/
	  	  	  #box-abs{
	  	      position:absolute;
	  	      left:100px;
	  	      top:100px;
	  	      border:1px dashed red;
	  	  }
	  	  </style>
	  	  <style type="text/css">
	  	  	  /*相对定位：相对元素原始的位置定位*/
	  	  	  .pos{
	  	  	  	  position:relative;
	  	  	  	  left:200px;
	  	  	  	  top:50px;
	  	  	  	}
	  	  	  .pos-left{
	  	  	  	  position:relative;
	  	  	  	  left:500px;
	  	  	  	}
	  	  	  .pos-top{
	  	  	  	  position:relative;
	  	  	  	  top:-100px;
	  	  	  	}
	  	  </style>
	  	  <style type="text/css">
	  	  	  /*z-index属性：值越小，越靠近底部，可以是负数，默认值为0*/
	  	  	  /*要想使用z-index属性必须使用postion:absolute/relative/fixed三个属性之一。*/

	  	  	  .box1{
	  	  	  	  position:absolute;
	  	  	  	  left:500px;
	  	  	  	  top:500px;
	  	  	  	  z-index:1;
	  	  	  	  
	  	  	  	  width:300px;
	  	  	  	  height:150px;
	  	  	  	  border:1px solid black;
	  	  	  	  margin-top:20px;
	  	  	  	  background-color:red;
	  	  	  	}
	  	  	  .box2{
	  	  	  	  position:absolute;
	  	  	  	  left:550px;
	  	  	  	  top:550px;
	  	  	  	  z-index:2;
	  	  	  	  
	  	  	  	  width:300px;
	  	  	  	  height:150px;
	  	  	  	  border:1px solid black;
	  	  	  	  margin-top:20px;
	  	  	  	  background-color:yellow;
	  	  	  	}	
	  	  	  .box3{
	  	  	  	  position:absolute;
	  	  	  	  left:600px;
	  	  	  	  top:600px;
	  	  	  	  z-index:3;
	  	  	  	  
	  	  	  	  width:300px;
	  	  	  	  height:150px;
	  	  	  	  border:1px solid black;
	  	  	  	  margin-top:20px;
	  	  	  	  background-color:blue;
	  	  	  	}	
	  	  </style>
	  	  
	  </head>
	  <body>
	  	  <p id="box-abs">获取，理解，拓展，应用，纠错</p>
	  	  <br><br><br><br>
	  	  <h2>1标题</h2>
	  	  <h2 class="pos">2标题左下移动</h2>
	  	  <h2 class="pos-left">3标题向左移动</h2>
	  	  <h2 class="pos-top">4向上移动</h2>
	  	  
	  	  <br><br><br><br>
	  	  <h1 class="box1">标题一</h1>
	  	  <h1 class="box2">标题二</h1>
	  	  <h1 class="box3">标题三</h1>
	  </body>
</html>

须佐能乎！

关注

1
点赞
踩
0

收藏

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

CSS样式定位 /*绝对定位：以网页坐标系为基准进行定位*/ #box-abs{ position:absolute; left:100px; top:100px; border:1px dashed red;
复制链接

扫一扫