CSS定位的基础知识及用法

最新推荐文章于 2024-04-12 05:28:38 发布

端脑

最新推荐文章于 2024-04-12 05:28:38 发布

阅读量176

点赞数

分类专栏：前端文章标签： CSS定位的基础知识及用法

本文链接：https://blog.csdn.net/qq_43776742/article/details/98066342

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

本文深入探讨了CSS中Z-index的运用，展示了如何通过不同层级的堆叠来控制元素的前后顺序。同时，讲解了表单元素轮廓线的消除方法，元素的显示与隐藏技巧，以及如何使用:hover伪类实现二维码的显示和隐藏效果。还介绍了overflow属性的多种用法，包括可见、隐藏、自动滚动和固定滚动条等，最后展示了如何设置鼠标样式以增强用户体验。

摘要由CSDN通过智能技术生成

Z - index

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 200px;
	   	  height: 200px;
	   	  position: absolute;
	   	  top: 0;
	   	  left: 0;
	   }

	   div:first-child {
	   	   background-color: red;
	   	   
	   }

	   div:nth-child(2) {
	   	  width: 300px;
	   	  top: 60px;
	   	  left: 20px;
	   	  background-color: purple; 
	   	 
	   }

	   div:last-child {
	   	  width: 400px;
	   	  left: 30px;
	   	  top: 40px;
	   	  background-color: orange; 

	   }
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

表单轮廓线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   input {
	   	   /* outline: 4px solid red; */
	   	   /* border: 1px solid yellow; */
	   	   outline: 0;  
	   }

	   textarea {
	   	   outline: 0;
	   	   resize: none;
	   }
	</style>
</head>
<body>
	<input type="text /">
	<textarea name="" id="" cols="30" rows="10"></textarea>
	<p>段落</p>
</body>
</html>

元素的显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    div {
	    	width: 120px;
	    	height: 120px;
	    	background-color: red;
	    	margin-bottom: 10px;
	    }

	    div:nth-child(2) {
	    	/* display: none; */ /* 隐藏元素 不是删除 只不过看不见 不保留位置*/
	    	visibility: hidden;/*隐藏元素 它保留位置*/
	    }

	    div:last-child {
	    	background-color: blue;
	    }
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

显示和隐藏二维码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div.content {
	   	   width: 100px;
	   	   height: 100px;
	   	   text-align: center;
	   	   line-height: 100px;
	   	   background-color: rgba(0,0,0,0.4);
	   }

	   .wrap {
	   	   position: relative;
	   }

	   .wrap .erweima {
	   	   position: absolute;
	   	   left: 100px;
	   	   top: 0;
	   	   display: none;
	   }

	   .wrap:hover .erweima {
	   	  display: block;
	   }

	</style>
</head>
<body>
    <div class="wrap">	
		<div class="content">扫二维码</div>
		<div class="erweima">
			<img src="img/jd.png" alt="">
		</div>
	</div>
</body>
</html>

overflow属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 120px;
	   	  height: 500px;
	   	  border: 1px solid #ccc;
	   	  overflow: visible; /*超出显示*/
	   	  overflow: hidden; /*超出隐藏*/
	   	  overflow: auto; /* 自动 有多余内容显示滚动条 否则不显示*/
	   	  overflow: scroll;/*一直有滚动条*/
	   }
	</style>
</head>
<body>
	<div>
		窗前明月光疑是地上霜窗前明月光疑是地上霜窗前明月光疑是地上霜窗前明月光疑是地上霜窗前明月光疑是地上霜窗前明月光疑是地上霜窗前明月光疑是地上霜窗前明月光疑是地上霜
	</div>
</body>
</html>

鼠标相关样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   p:nth-child(1) {
	   	   cursor: default;
	   }

	   p:nth-child(2) {
	   	   cursor: pointer;
	   }

	   p:nth-child(3) {
	   	   cursor: text;
	   }

	   p:nth-child(4) {
	   	   cursor: move;
	   }

	   p:nth-child(5) {
	   	   cursor: help;
	   }

	   p:nth-child(6) {
	   	   cursor: wait;
	   }
	</style>
</head>
<body>
	<div>
		<p>aaaa</p>
		<p>bbbb</p>
		<p>ccccc</p>
		<p>ddddd</p>
		<p>eeeee</p>
		<p>fffff</p>
	</div>
</body>
</html>