模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>模态对话框2</title>
<style>
.shadow {
background-color: black;
height: 1000px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
z-index: 100;
display: none;
}
.content {
background-color: white;
width: 300px;
height: 400px;
position: fixed;
top: 100px;
left: 500px;
right: 200px;
z-index: 2000;
display: none;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<div class="shadow"></div>
<div class="content">
<form action="">
用户名<input type="text">
<input type="submit">
<input type="button" id="cancel" value="取消">
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
console.log(jQuery)
</script>
<script>
$('#btn').click(function () {
//console.log(123);
//$(".shadow").css('display','block');
//$(".content").css('display','block');
$(".shadow").show();
$(".content").show();
});
$('#cancel').click(function () {
$(".shadow").hide();
$(".content").hide();
})
</script>
</html>
定位
绝对定位：以页面为参考点进行移动，固定定位是绝对定位的一种
相对定位：以标签元素本身作为移动对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.div1{
width: 500px;
height: 500px;
background-color: red;
position: relative;
bottom: 100px;
right: 100px;
}
{#.div2{#}
{# width: 500px;#}
{# height: 500px;#}
{# background-color: blue;#}
{# position: absolute;#}
{#}#}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
